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

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

 

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

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

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

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

 

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 

样例项目