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

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

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

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

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

[html] view plain copy print ?

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

<GridViewItem
    x:Class="App1.HubTile"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" 
    x:Name="gridViewItem"
    d:DesignHeight="150"
    d:DesignWidth="150">
    <GridViewItem.Resources>

        <Storyboard x:Name="UpperSecStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="SecImg">
                <SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="-150" KeySpline="0.29,0.88,0,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="FirstImg">
                <SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="150" KeySpline="1,0,1,0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="UpperFirstStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="SecImg">
                <SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="0" KeySpline="1,0,1,0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="FirstImg">
                <SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="0" KeySpline="0.29,0.88,0,1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </GridViewItem.Resources>
    <Grid Width="{Binding Width, ElementName=gridViewItem}" Height="{Binding Height, ElementName=gridViewItem}">
        <Canvas x:Name="PART_LayoutRoot" >
            <StackPanel x:Name="PART_Panel">
                <Canvas 
                    Height="{Binding Height, ElementName=gridViewItem}" 
                    x:Name="FirstImg">
                    <Grid  x:Name="PART_FirstContent">
                        <Image x:Name="Img1"
                               Width="{Binding Width, ElementName=gridViewItem}" 
                               Height="{Binding Height, ElementName=gridViewItem}"
                               Stretch="UniformToFill" VerticalAlignment="Center">
                        </Image>
                    </Grid>
                    <Canvas.RenderTransform>
                        <CompositeTransform/>
                    </Canvas.RenderTransform>
                </Canvas>

                <Canvas 
                    x:Name="SecImg" 
                    Height="{Binding Height, ElementName=gridViewItem}">
                    <Grid x:Name="SecGrid" Background="Red">
                        <Image x:Name="Img2"
                               Width="{Binding Width, ElementName=gridViewItem}" 
                               Height="{Binding Height, ElementName=gridViewItem}"
                               Stretch="UniformToFill" VerticalAlignment="Center">
                        </Image>
                    </Grid>
                    <Canvas.RenderTransform>
                        <CompositeTransform/>
                    </Canvas.RenderTransform>
                </Canvas>
            </StackPanel>
        </Canvas>
        <ContentPresenter Content="1111" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" x:Name="PART_Title" Margin="0,0,10,7" />
    </Grid>
</GridViewItem>

[html] view plain copy print ?

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 上提供
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. }
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));
42. private static void OnImgListChanged(
43. DependencyObject d, DependencyPropertyChangedEventArgs e)
44. {
45. var target = (HubTile)d;
46. }
48. #endregion
50. #endregion
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);
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. }

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Navigation;
using WinRTXamlToolkit.AwaitableUI;
using WinRTXamlToolkit.Imaging;
// “用户控件”项模板在 http://go.microsoft.com/fwlink/?LinkId=234236 上提供

namespace App1
{
    public sealed partial class HubTile : GridViewItem
    {
        #region propdp
        #region ImgList
        public List<string> ImgList
        {
            get { return (List<string>)GetValue(ImgListProperty); }
            set { SetValue(ImgListProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ImgList.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ImgListProperty =
            DependencyProperty.Register(
            "ImgList",
            typeof(List<string>),
            typeof(HubTile),
            new PropertyMetadata(null, OnImgListChanged));

        private static void OnImgListChanged(
           DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var target = (HubTile)d;
        }

        #endregion

        #endregion

        public HubTile()
        {
            this.InitializeComponent();
            DispatcherTimer timer = new DispatcherTimer();
            int index = 0;
            bool isFirst = true;
            Storyboard storySec = null;
            Storyboard storyFir = null;
            this.Loaded += ((sender, e) =>
            {
                storySec = Resources["UpperSecStoryboard"] as Storyboard;
                storyFir = Resources["UpperFirstStoryboard"] as Storyboard;
                var animation = storySec.Children[0] as DoubleAnimationUsingKeyFrames;
                var keyframe = animation.KeyFrames[0] as SplineDoubleKeyFrame;
                ((storySec.Children[1] as DoubleAnimationUsingKeyFrames).KeyFrames[0] as SplineDoubleKeyFrame).Value = this.Height;
                keyframe.Value = -this.Height;
                if (null != ImgList && ImgList.Count > 0)
                {
                    var url = ImgList[0];
                    BitmapImage _source = new BitmapImage(new Uri(url));
                    this.Img1.Source = _source;
                    timer.Start();
                }
            });
            Random r = new Random(Convert.ToInt32(DateTime.Now.Millisecond));
            var second = r.Next(2000, 6000);

            Debug.WriteLine(this.Name + "间隔时间:" + second);
            timer.Interval = TimeSpan.FromMilliseconds(second);
            timer.Tick += (async (o, b) =>
            {
                index++;
                var count = ImgList.Count;
                if (null != ImgList)
                {
                    var url = ImgList[index % count];
                    BitmapImage _source = new BitmapImage(new Uri(url));
                    Debug.WriteLine(this.Name + "加载图片..." + url);
                    if (isFirst)
                    {
                        this.Img2.Source = _source;
                        isFirst = false;
                        await storySec.BeginAsync();
                        Canvas.SetZIndex(SecImg, 1);
                        Canvas.SetZIndex(FirstImg, 2);
                    }
                    else
                    {
                        this.Img1.Source = _source;
                        isFirst = true;
                        await storyFir.BeginAsync();
                        Canvas.SetZIndex(SecImg, 2);
                        Canvas.SetZIndex(FirstImg, 1);
                    }
                }
            });
        }
    }
}

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

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

开始菜单的效果

demo 稍后上传

最终效果图：

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