SliderHubTile 用windows8 制作 仿wp8 翻转瓷砖
2012-12-31 10:40
176 查看
<ContentControl xmlns:Controls="using:WinRTXamlToolkit.Controls" x:Class="TSM.View.Control.HubTile" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 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" 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>
代码:
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; // “用户控件”项模板在 http://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("http://")) { 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("http://")) { _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; } } } }
通过 awaitable 事件 实现 动画切换完毕后 更换图片 达到 翻转效果
timer 时间为随机数 不会造成同屏幕 所有瓷砖同时翻转
http://download.csdn.net/detail/wangrenzhu2011/4946056
相关文章推荐
- 首发 手把手教你制作 Windows8 应用程序内部的 hubtile (动态瓷砖控件) MetroStyle
- 手把手教你制作 Windows8 应用程序内部的 hubtile (动态瓷砖控件) MetroStyle
- 首发 手把手教你制作 Windows8 应用程序内部的 hubtile (动态瓷砖控件) MetroStyle(转)
- 3d-导航栏制作(导航栏上下翻转)
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
- android开发--翻转闹铃(从制作到打包)
- 鼠标悬停div翻转效果,记录自己制作时踩得一些坑及解决方案
- 制作翻转效果动画
- 翻转拼图网页小游戏制作
- C# Windows Phone 8 WP8 高级开发,制作不循环 Pivot ,图片(Gallery)导览不求人! 内附图文教学!!
- 制作翻转点击按钮效果方法
- 【W8】windows8 开发教程 教你制作 多点触控Helper可将任意容器内任意对象进行多点缩放
- 纯css制作九宫格色块翻转效果,代码只需100行
- 使用WP8最新的AudioVideoCaptureDevice类制作录像应用
- WP7 WP8 windows8 教程 公共基础篇 一 XAML基础
- 手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画)
- WP7 WP8 Windows8 教程 公共基础篇 二 布局
- android开发--翻转闹铃(从制作到打包)
- CSS3制作3D轮播翻转动画示例
- NSIS制作Windows8风格安装界面(模仿Visual Studio 2012的主题和颜色)