首发 手把手教你制作 Windows8 应用程序内部的 hubtile （动态瓷砖控件） MetroStyle（转）

http://blog.csdn.net/wangrenzhu2011/article/details/8175492 （转）

在metro 风格中 动态磁贴是他的精髓

在wp7 的开发中 我们可以使用hubtile 来制作类似效果

但是在 win8 中并不具备这个功能，

下面我们来通过扩展GridViewItem 来实现  PictureHubTile

[html] view plaincopyprint?
 
  1. <GridViewItem  
  2.     x:Class="App1.HubTile"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:local="using:App1"  
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  8.     mc:Ignorable="d"   
  9.     x:Name="gridViewItem"  
  10.     d:DesignHeight="150"  
  11.     d:DesignWidth="150">  
  12.     <GridViewItem.Resources>  
  13.   
  14.         <Storyboard x:Name="UpperSecStoryboard">  
  15.             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="SecImg">  
  16.                 <SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="-150" KeySpline="0.29,0.88,0,1"/>  
  17.             </DoubleAnimationUsingKeyFrames>  
  18.             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="FirstImg">  
  19.                 <SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="150" KeySpline="1,0,1,0"/>  
  20.             </DoubleAnimationUsingKeyFrames>  
  21.         </Storyboard>  
  22.         <Storyboard x:Name="UpperFirstStoryboard">  
  23.             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="SecImg">  
  24.                 <SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="0" KeySpline="1,0,1,0"/>  
  25.             </DoubleAnimationUsingKeyFrames>  
  26.             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="FirstImg">  
  27.                 <SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="0" KeySpline="0.29,0.88,0,1"/>  
  28.             </DoubleAnimationUsingKeyFrames>  
  29.         </Storyboard>  
  30.     </GridViewItem.Resources>  
  31.     <Grid Width="{Binding Width, ElementName=gridViewItem}" Height="{Binding Height, ElementName=gridViewItem}">  
  32.         <Canvas x:Name="PART_LayoutRoot" >  
  33.             <StackPanel x:Name="PART_Panel">  
  34.                 <Canvas   
  35.                     Height="{Binding Height, ElementName=gridViewItem}"   
  36.                     x:Name="FirstImg">  
  37.                     <Grid  x:Name="PART_FirstContent">  
  38.                         <Image x:Name="Img1"  
  39.                                Width="{Binding Width, ElementName=gridViewItem}"   
  40.                                Height="{Binding Height, ElementName=gridViewItem}"  
  41.                                Stretch="UniformToFill" VerticalAlignment="Center">  
  42.                         </Image>  
  43.                     </Grid>  
  44.                     <Canvas.RenderTransform>  
  45.                         <CompositeTransform/>  
  46.                     </Canvas.RenderTransform>  
  47.                 </Canvas>  
  48.   
  49.                 <Canvas   
  50.                     x:Name="SecImg"   
  51.                     Height="{Binding Height, ElementName=gridViewItem}">  
  52.                     <Grid x:Name="SecGrid" Background="Red">  
  53.                         <Image x:Name="Img2"  
  54.                                Width="{Binding Width, ElementName=gridViewItem}"   
  55.                                Height="{Binding Height, ElementName=gridViewItem}"  
  56.                                Stretch="UniformToFill" VerticalAlignment="Center">  
  57.                         </Image>  
  58.                     </Grid>  
  59.                     <Canvas.RenderTransform>  
  60.                         <CompositeTransform/>  
  61.                     </Canvas.RenderTransform>  
  62.                 </Canvas>  
  63.             </StackPanel>  
  64.         </Canvas>  
  65.         <ContentPresenter Content="1111" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" x:Name="PART_Title" Margin="0,0,10,7" />  
  66.     </Grid>  
  67. </GridViewItem>  


 

[html] view plaincopyprint?
 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Collections.ObjectModel;  
  4. using System.Diagnostics;  
  5. using System.IO;  
  6. using System.Linq;  
  7. using Windows.Foundation;  
  8. using Windows.Foundation.Collections;  
  9. using Windows.UI.Xaml;  
  10. using Windows.UI.Xaml.Controls;  
  11. using Windows.UI.Xaml.Controls.Primitives;  
  12. using Windows.UI.Xaml.Data;  
  13. using Windows.UI.Xaml.Input;  
  14. using Windows.UI.Xaml.Media;  
  15. using Windows.UI.Xaml.Media.Animation;  
  16. using Windows.UI.Xaml.Media.Imaging;  
  17. using Windows.UI.Xaml.Navigation;  
  18. using WinRTXamlToolkit.AwaitableUI;  
  19. using WinRTXamlToolkit.Imaging;  
  20. // “用户控件”项模板在 http://go.microsoft.com/fwlink/?LinkId=234236 上提供  
  21.   
  22. namespace App1  
  23. {  
  24.     public sealed partial class HubTile : GridViewItem  
  25.     {  
  26.         #region propdp  
  27.         #region ImgList  
  28.         public List<string> ImgList  
  29.         {  
  30.             get { return (List<string>)GetValue(ImgListProperty); }  
  31.             set { SetValue(ImgListProperty, value); }  
  32.         }  
  33.   
  34.         // Using a DependencyProperty as the backing store for ImgList.  This enables animation, styling, binding, etc...  
  35.         public static readonly DependencyProperty ImgListProperty =  
  36.             DependencyProperty.Register(  
  37.             "ImgList",  
  38.             typeof(List<string>),  
  39.             typeof(HubTile),  
  40.             new PropertyMetadata(null, OnImgListChanged));  
  41.   
  42.         private static void OnImgListChanged(  
  43.            DependencyObject d, DependencyPropertyChangedEventArgs e)  
  44.         {  
  45.             var target = (HubTile)d;  
  46.         }  
  47.   
  48.         #endregion  
  49.   
  50.         #endregion  
  51.   
  52.         public HubTile()  
  53.         {  
  54.             this.InitializeComponent();  
  55.             DispatcherTimer timer = new DispatcherTimer();  
  56.             int index = 0;  
  57.             bool isFirst = true;  
  58.             Storyboard storySec = null;  
  59.             Storyboard storyFir = null;  
  60.             this.Loaded += ((sender, e) =>  
  61.             {  
  62.                 storySec = Resources["UpperSecStoryboard"] as Storyboard;  
  63.                 storyFir = Resources["UpperFirstStoryboard"] as Storyboard;  
  64.                 var animation = storySec.Children[0] as DoubleAnimationUsingKeyFrames;  
  65.                 var keyframe = animation.KeyFrames[0] as SplineDoubleKeyFrame;  
  66.                 ((storySec.Children[1] as DoubleAnimationUsingKeyFrames).KeyFrames[0] as SplineDoubleKeyFrame).Value = this.Height;  
  67.                 keyframe.Value = -this.Height;  
  68.                 if (null != ImgList && ImgList.Count > 0)  
  69.                 {  
  70.                     var url = ImgList[0];  
  71.                     BitmapImage _source = new BitmapImage(new Uri(url));  
  72.                     this.Img1.Source = _source;  
  73.                     timer.Start();  
  74.                 }  
  75.             });  
  76.             Random r = new Random(Convert.ToInt32(DateTime.Now.Millisecond));  
  77.             var second = r.Next(2000, 6000);  
  78.   
  79.             Debug.WriteLine(this.Name + "间隔时间:" + second);  
  80.             timer.Interval = TimeSpan.FromMilliseconds(second);  
  81.             timer.Tick += (async (o, b) =>  
  82.             {  
  83.                 index++;  
  84.                 var count = ImgList.Count;  
  85.                 if (null != ImgList)  
  86.                 {  
  87.                     var url = ImgList[index % count];  
  88.                     BitmapImage _source = new BitmapImage(new Uri(url));  
  89.                     Debug.WriteLine(this.Name + "加载图片..." + url);  
  90.                     if (isFirst)  
  91.                     {  
  92.                         this.Img2.Source = _source;  
  93.                         isFirst = false;  
  94.                         await storySec.BeginAsync();  
  95.                         Canvas.SetZIndex(SecImg, 1);  
  96.                         Canvas.SetZIndex(FirstImg, 2);  
  97.                     }  
  98.                     else  
  99.                     {  
  100.                         this.Img1.Source = _source;  
  101.                         isFirst = true;  
  102.                         await storyFir.BeginAsync();  
  103.                         Canvas.SetZIndex(SecImg, 2);  
  104.                         Canvas.SetZIndex(FirstImg, 1);  
  105.                     }  
  106.                 }  
  107.             });  
  108.         }  
  109.     }  
  110. }  


 

该样例代码中 我使用了awaitUI 来实现对动画执行的监控，

程序逻辑并不复杂，通过随机的timer 来切换图片 实现

开始菜单的效果

demo 稍后上传

最终效果图：

资源下载地址：http://download.csdn.net/detail/wangrenzhu2011/4760211 

样例项目

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/CharlesGrant/p/3639202.html