Windows Phone アプリに新機能を紹介するスタートアップ ページを追加_html/css_WEB-ITnose

オプション 1: パノラマまたはピボットページを使用します

1. パノラマ ページを全画面表示に書き換えます

2. タイトルとヘッダーを削除し、余白を調整します

    public class PanoramaFullScreen : Panorama    {        protected override System.Windows.Size MeasureOverride(System.Windows.Size availableSize)        {            availableSize.Width += 48;            return base.MeasureOverride(availableSize);        }    }

3. コードビハインドでの制御ページジャンプ

            <phone:PanoramaItem>                <Grid Canvas.ZIndex="-1" Margin="-66,-40,-55,0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="591">                        <Image Stretch="Fill" Source="/Images/screen1.jpg" VerticalAlignment ="Stretch"                                                         HorizontalAlignment="Stretch" Margin="54,0,54,0"/>                    </Grid>            </phone:PanoramaItem>

補足: パノラマメソッドを拡張してアニメーションでジャンプする

 private TouchPoint first;        private const int DetectRightGesture = 20;        private int startIndex = 0;        private readonly int endIndex;        public WhatsNewView()        {            InitializeComponent();            endIndex = MyStartScreen.Items.Count - 1;            MyStartScreen.IsHitTestVisible = false;            MyStartScreen.IsEnabled = false;            Touch.FrameReported += Touch_FrameReported;            TouchPanel.EnabledGestures = GestureType.HorizontalDrag;        }        private void Touch_FrameReported(object sender, TouchFrameEventArgs e)        {                     try            {                TouchPoint mainTouch = e.GetPrimaryTouchPoint(this);                if (mainTouch.Action == TouchAction.Down)                    first = mainTouch;                else if (mainTouch.Action == TouchAction.Up && TouchPanel.IsGestureAvailable)                {                    if (mainTouch.Position.X - first.Position.X < -DetectRightGesture)                    {                        if (startIndex < endIndex)                        {                            MyStartScreen.SlideToPage(startIndex + 1, SlideTransitionMode.SlideLeftFadeOut);                            startIndex++;                        }                        else                        {                            NavigateToNextPage();                        }                    }                    else if (mainTouch.Position.X - first.Position.X > DetectRightGesture)                    {                        if (startIndex > 0)                        {                            MyStartScreen.SlideToPage(startIndex - 1, SlideTransitionMode.SlideRightFadeOut);                            startIndex--;                        }                    }                }            }            catch            {            }        }        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)        {            NavigateToNextPage();        }        private void NavigateToNextPage()        {            NavigationService.Navigate(new Uri("/Views/LoginPage.xaml", UriKind.Relative));        }        protected override void OnNavigatedFrom(NavigationEventArgs e)        {            while (NavigationService.BackStack.Any())            {                NavigationService.RemoveBackEntry();            }        }

不十分な点:

  public static void SlideToPage(this Panorama self, int item, SlideTransitionMode slideMode)        {            var slideTransition = new SlideTransition { };            slideTransition.Mode = slideMode;            ITransition transition = slideTransition.GetTransition(self);            transition.Completed += delegate            {                self.DefaultItem = self.Items[item];                transition.Stop();            };            transition.Begin();        }

オプション 2:

すべての画像を横に並べ、ジェスチャーに応じて左右に移動して表示を制御します

SlideTransitionMode SlideTransitionMode支持动画有限，一般达不到预期效果

一般的に、最後のページのボタンは前のページのボタンとは異なり、SlidePageIndex によって区別できます。まず依存属性として宣言し、ビュー内のコンバーターを使用して

 <Canvas>            <StackPanel x:Name="Slider"                        Canvas.Left="0"                        Orientation="Horizontal">                <Image Source="/Images/screen1.jpg"                       Stretch ="UniformToFill"/>                <Image Source="/Images/screen2.jpg"                       Stretch ="UniformToFill" />                <Image Source="/Images/screen3.jpg"                       Stretch ="UniformToFill" />            </StackPanel>        </Canvas>

オフセットはデバイスごとに決定されます

        public static readonly DependencyProperty SlidePageIndexProperty =                 DependencyProperty.Register("SlidePageIndex", typeof(int), typeof(StartScreenView), null);        public int SlidePageIndex        {            get { return (int)GetValue(SlidePageIndexProperty); }            set { SetValue(SlidePageIndexProperty, value); }        }

ジェスチャーコントロール

 _uniformImageWidth = (int)Application.Current.Host.Content.ActualWidth;

Touch.FrameReported += Touch_FrameReported;            TouchPanel.EnabledGestures = GestureType.HorizontalDrag;

スライディングロジック

 private void Touch_FrameReported(object sender, TouchFrameEventArgs e)        {            try            {                TouchPoint mainTouch = e.GetPrimaryTouchPoint(this);                if (mainTouch.Action == TouchAction.Down)                    first = mainTouch;                else if (mainTouch.Action == TouchAction.Up && TouchPanel.IsGestureAvailable)                {                    if (mainTouch.Position.X - first.Position.X < -DetectRightGesture)                    {                        if (SlidePageIndex == MaxSlidePageCount - 1)                        {                            NavigateToLoginPage();                        }                        SlidePageIndex++;                        Slide();                    }                    else if (mainTouch.Position.X - first.Position.X > DetectRightGesture)                    {                        if (SlidePageIndex == 0) return;                        SlidePageIndex--;                        Slide();                    }                }            }            catch            {            }        }

このページは戻るキーからは移動できません??

        private void Slide()        {            var storyboard = new Storyboard();            var ani = new DoubleAnimation();            ani.To = SlidePageIndex * -_uniformImageWidth;            ani.Duration = TimeSpan.FromSeconds(1.0f);            ani.EasingFunction = new ElasticEase() { EasingMode = EasingMode.EaseInOut, Oscillations = 0 };            Storyboard.SetTarget(ani, this.Slider);            Storyboard.SetTargetProperty(ani, new PropertyPath("(Canvas.Left)"));            storyboard.Children.Add(ani);            storyboard.Begin();        }

??

??