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.
本文出自 “Alexis的51博客” 博客,请务必保留此出处http://alexis.blog.51cto.com/2621421/720462
相关新闻>>
- Windows Phone 实用开发技巧(25):Windows Phone读取本地数据
- Windows Phone 项目实战之我的微盘(上)
- Windows Phone 项目实战之我的微盘(下)
- Windows Phone 实用开发技巧(26):对DataTemplate中的元素播放
- Windows Phone 实用开发技巧(27):创建透明Tile
- Windows Phone 实用开发技巧(28):图片缓存
- Windows Phone 实用开发技巧(29):动态绑定Pivot
- Windows Phone 实用开发技巧1-30合集(电子书+源代码)
- Windows Phone 知识锦(12月版)
- Windows Phone实用开发技巧(31):密码加密
- 发表评论
-
- 最新评论 更多>>