SliderHubTile 用windows8 制作 仿wp8 翻转瓷砖

原创 于 2012-12-31 10:40:24 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用XAML和C#实现翻转动画的方法，通过设置Storyboard动画实现图片的翻转效果，并利用DispatcherTimer控制动画触发的时间间隔。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<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.youkuaiyun.com/detail/wangrenzhu2011/4946056

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值