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，在动画结束的时候再还原回来。
实例代码可以在这里找到：/2012/0130/20120130032055737.rar。Hope that helps.
作者：Alexis
补充：移动开发 , Windows Phone ,
