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

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

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



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

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

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

[html] view plaincopyprint?

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

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

样例项目