Windows Phone 實用開發技巧（30）：Pivot切換時同時漸變背景圖片

上篇文章講了若是動態綁定Pivot，其實綁定正確了就能夠了，沒有什麼技術難點。今天介紹若是在切換PivotItem時同時漸變的切換Pivot的背景圖片，用來提升用戶體驗。

當 然不少時候若是你的Pivot有背景圖片，那常常是一張圖片，不會每一個PivotItem都給一張圖片。可是有時候或許就用這樣的需求，不一樣的Pivot 有不一樣的背景圖片，那麼你如何去作到很好的背景圖片的切換呢？由於若是背景圖片的反差比較大的時候，給用戶的體驗不是很好。

那麼如何實 現很好的過渡效果呢？個人想法是在切換時漸變其背景圖片。在剛開始使用Expression Blend的時候遇到一個問題，咱們不能對Pivot的背景圖片作動畫。可是換個思路去想，咱們能夠對用戶控件的透明度作動畫，咱們能夠使用用戶控件做爲 當前頁面的背景動畫。

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

上述代碼是該背景控件的後置代碼，註冊了一個依賴屬性ImageUrl，在屬性發生變化的時候同時修改當前的背景。

ok，下面看看XAML中如何調用這個控件的

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

咱們將該控件設置很Pivot平級，而且放置在Pivot的前面，這樣BgControl就會在Pivot的下方呈現。下面看看Pivot的SelectionChanged事件：

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

    }
}

隨即生成當前背景圖片的文件名，而後播放兩個動畫，一個是當前背景的漸漸消失，一個是下一個背景的漸漸顯示。

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

注意到SelectionChanged事件中，須要將Pivot的IsHitTestVisible設爲false，即表示正在播放動畫的時候咱們不能滑動Pivot，在動畫結束的時候再還原回來。

實例代碼能夠在這裏找到。Hope that helps.