SliderHubTile 用windows8制作仿wp8翻转瓷砖
<ContentControl
xmlns:Controls="using:WinRTXamlToolkit.Controls"
x:Class="TSM.View.Control.HubTile"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="gridViewItem"
d:DesignHeight="150"
d:DesignWidth="150" IsTapEnabled="False" IsRightTapEnabled="False" IsHoldingEnabled="False" IsDoubleTapEnabled="False">
<ContentControl.Resources>
<Storyboard x:Name="UpperSecStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Img2">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Img2">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="90">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseIn"></QuadraticEase>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-90">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseIn"></QuadraticEase>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Img1">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-90">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseIn"></QuadraticEase>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseIn"></QuadraticEase>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="UpperFirstStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Img1">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Img1">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="90">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseIn"></QuadraticEase>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-90">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseIn"></QuadraticEase>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Img2">
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-90">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseIn"></QuadraticEase>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseIn"></QuadraticEase>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ContentControl.Resources>
<Grid Width="{Binding Width, ElementName=gridViewItem}" Height="{Binding Height, ElementName=gridViewItem}">
<Grid.Background>
<ImageBrush/>
</Grid.Background>
<Canvas x:Name="PART_LayoutRoot" >
<Canvas 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="Fill" VerticalAlignment="Center"
Canvas.ZIndex="1">
<Image.Projection>
<PlaneProjection/>
</Image.Projection>
</Image>
</Grid>
<Canvas.RenderTransform>
<CompositeTransform/>
</Canvas.RenderTransform>
</Canvas>
<Canvas
x:Name="SecImg"
Height="{Binding Height, ElementName=gridViewItem}">
<Canvas.RenderTransform>
<CompositeTransform/>
</Canvas.RenderTransform>
<Grid x:Name="SecGrid">
<Image x:Name="Img2"
Width="{Binding Width, ElementName=gridViewItem}"
Height="{Binding Height, ElementName=gridViewItem}"
Stretch="Fill" VerticalAlignment="Center">
<Image.Projection>
<PlaneProjection RotationX="-90"/>
</Image.Projection>
</Image>
</Grid>
</Canvas>
</Canvas>
</Canvas>
</Grid>
</ContentControl>
代码：
[csharp]
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using TSM.Config;
using TSM.Tools;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Storage;
using Windows.Storage.BulkAccess;
using Windows.Storage.Search;
using Windows.Storage.Streams;
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.Controls;
using WinRTXamlToolkit.Imaging;
// “用户控件”项模板在 https://go.microsoft.com/fwlink/?LinkId=234236 上提供
namespace TSM.View.Control
{
public sealed partial class HubTile : ContentControl
{
private static Uri _baseUri = new Uri("ms-appx:///");
#region propdp
#region ImgList
public ObservableCollection<string> ImgList
{
get { return (ObservableCollection<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(ObservableCollection<string>),
typeof(HubTile),
new PropertyMetadata(null, OnImgListChanged));
private static void OnImgListChanged(
DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var target = (HubTile)d;
}
#endregion
#endregion
protected override void OnGotFocus(RoutedEventArgs e)
{
base.OnGotFocus(e);
}
public HubTile()
{
this.InitializeComponent();
Storyboard storySec = null;
Storyboard storyFir = null;
DispatcherTimer timer = new DispatcherTimer();
int index = 0;
bool isFirst = true;
this.Loaded += ((sender, e) =>
{
storySec = Resources["UpperSecStoryboard"] as Storyboard;
storyFir = Resources["UpperFirstStoryboard"] as Storyboard;
if (null != ImgList && ImgList.Count > 0)
{
BitmapImage _source = new BitmapImage();
var url = ImgList[0];
Uri uri = null;
if (null != url)
{
if (url.StartsWith(".") || url.StartsWith("ms"))
{
uri = new Uri(HubTile._baseUri, url);
_source.UriSource = uri;
}
else if (url.StartsWith("https://"))
{
uri = new Uri(url);
_source.UriSource = uri;
}
else
SetSource(_source, url);
this.Img1.Source = _source;
if (ImgList.Count >= 2)
{
if (null != timer)
timer.Start();
}
}
}
});
this.Unloaded += ((sender, e) =>
{
if (null != timer)
timer.Stop();
this.Img1.Source = null;
this.Img2.Source = null;
});
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++;
if (ImgList == null)
{
timer.Stop();
}
else
{
var count = ImgList.Count;
if (null != ImgList && count != 0)
{
var url = ImgList[index % count];
Uri uri = null;
BitmapImage _source = new BitmapImage();
_source.DecodePixelHeight = 200;
_source.DecodePixelWidth = 200;
if (url.StartsWith(".") || url.StartsWith("ms"))
{
if (url.StartsWith("."))
uri = new Uri(HubTile._baseUri, url);
else
uri = new Uri(url);
_source.UriSource = uri;
}
else if (url.StartsWith("https://"))
{
_source.UriSource = new Uri(url);
}
else
_source = await GetLocalImageSource(url);
Debug.WriteLine(this.Name + "加载图片..." + url);
if (isFirst)
{
isFirst = false;
await storySec.BeginAsync();
this.Img2.Source = _source;
Canvas.SetZIndex(SecImg, 1);
Canvas.SetZIndex(FirstImg, 2);
}
else
{
isFirst = true;
await storyFir.BeginAsync();
this.Img1.Source = _source;
Canvas.SetZIndex(SecImg, 2);
Canvas.SetZIndex(FirstImg, 1);
}
}
}
});
}
private async Task<BitmapImage> GetLocalImageSource(string url)
{
StorageFile file = await StorageFile.GetFileFromPathAsync(url);
var img = await file.GetThumbnailAsync(Windows.Storage.FileProperties.ThumbnailMode.PicturesView, 400, Windows.Storage.FileProperties.ThumbnailOptions.ResizeThumbnail);
BitmapImage bitmapImage = new BitmapImage();
await bitmapImage.SetSourceAsync(img);
return bitmapImage;
}
private async void SetSource(BitmapSource _source, string url)
{
try
{
_source = await GetLocalImageSource(url);
}
catch (Exception)
{
_source = null;
}
}
}
}