Practical development tips for Windows Phone (30): gradient background image during swap Switching

In the previous article, we mentioned that if you dynamically bind a token, You can bind the token correctly. There are no technical difficulties. Today, we will introduce the background image of switching between the gradient and titem to improve the user experience.

Of course, most of the time, if your timeline has a background image, it is often an image, not every timeline titem will give an image. However, sometimes this is the case. Different regions have different background images. How do you switch between background images? If the contrast between the background image is large, the user experience is not very good.

So how can we achieve a good transitional effect? My idea is to gradient the background image when switching. When Expression Blend was used at the beginning, there was a problem. We could not animation the background image of the watermark. However, in another way, we can animation the transparency of the user control. We can use the user control as the background animation of the current page.

public partial class BgControl : UserControl{    public DependencyProperty ImageUrlProperty = DependencyProperty.Register("ImageUrl", typeof(string), typeof(BgControl),         new PropertyMetadata(new PropertyChangedCallback((e1,e2) =>        {            var control = e1 as BgControl;            if (control != null && e2.NewValue!=null)            {                control.LayoutRoot.Background = new ImageBrush() { ImageSource = new BitmapImage(new Uri(e2.NewValue.ToString(), UriKind.Relative)) };            }        })));    public string ImageUrl    {        get        {            return (string)base.GetValue(ImageUrlProperty);        }        set        {            base.SetValue(ImageUrlProperty, value);        }   }    public BgControl()    {        InitializeComponent();        Loaded += new RoutedEventHandler(BgControl_Loaded);    }    void BgControl_Loaded(object sender, RoutedEventArgs e)    {        this.LayoutRoot.Background = new ImageBrush() { ImageSource = new BitmapImage(new Uri(ImageUrl, UriKind.Relative)) };    }}

The above code is the post code of the background control. A Dependency Property ImageUrl is registered and the current background is modified when the property changes.

OK. Let's see how to call

<Grid x:Name="LayoutRoot" Background="Transparent">    <local:BgControl x:Name="bgControl" ImageUrl="Bg/1.jpg" />    <controls:Pivot x:Name="pivot" Title="DYNAMIC BG" SelectionChanged="Pivot_SelectionChanged">        <controls:PivotItem Header="pivot one">        </controls:PivotItem>        <controls:PivotItem Header="pivot two">        </controls:PivotItem>        <controls:PivotItem Header="pivot three">        </controls:PivotItem>    </controls:Pivot></Grid>

We set the control to a very smooth level and place it in front of the pipeline, so that BgControl will be displayed below the pipeline. Let's take a look at the SelectionChanged event of the queue:

Random r = new Random();private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e){    int bg = r.Next(1, 7);    if (sb_shuffle != null)    {        sb_shuffle.Begin();        pivot.IsHitTestVisible = false;        sb_shuffle.Completed += (e1, e2) =>        {            bgControl.ImageUrl = string.Format("Bg/{0}.jpg", bg);            sb_next.Begin();            sb_next.Completed += (e3, e4) =>                {                    pivot.IsHitTestVisible = true;                };        };    }}

The file name of the current background image is generated, and two animations are played. One is the fading of the current background and the other is the gradual display of the next background.

<phone:PhoneApplicationPage.Resources>    <Storyboard x:Name="sb_shuffle">        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bgControl">            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>        </DoubleAnimationUsingKeyFrames>    </Storyboard>    <Storyboard x:Name="sb_next">        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bgControl">            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>        </DoubleAnimationUsingKeyFrames>    </Storyboard></phone:PhoneApplicationPage.Resources>

Note that in the SelectionChanged event, you need to set the IsHitTestVisible of intent to false, that is, when the animation is being played, we cannot slide the intent and restore it back at the end of the animation.

The instance code can be found here. Hope that helps.