windows phone app adds startup page to introduce new features_html/css_WEB-ITnose

Option 1: Use Panorama or pivotpage

1. Rewrite the panorama page to make it full screen

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

2. Remove title and header, adjust margin

            <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>

3. Control page jump in codebehind

 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();            }        }

4. Supplement: Extend the panorama method to make the jump with animation

  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();        }

Inadequacy:

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

Option 2:

Arrange all pictures horizontally and pass according to gestures Left and right offset to control display

 <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>

Generally speaking, the buttons in the last page are different from the previous ones and can be distinguished by SlidePageIndex. First declare it as a dependent attribute, and use converter in the view to control whether to display

        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); }        }

The offset is determined according to different devices

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

Gesture control

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            {            }        }

Sliding logic

        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();        }

This page Not able to navigate via back key??

        protected override void OnNavigatedFrom(NavigationEventArgs e)        {            while (NavigationService.BackStack.Any())            {                NavigationService.RemoveBackEntry();            }        }

??

? ?