[Windows Phone] 自己动手实现Telerik公司的LayoutTransform动画效果

[Windows Phone] 自己动手实现Telerik公司的LayoutTransform动画效果

 

作者：sinodragon21/Nathan

 

转载请注明出处 http://www.cnblogs.com/sinodragon21/archive/2012/07/20/2601164.html

 

一、Demo截图效果

 

 

 

二、核心代码

        public void OnPropertyChanged(Object sender, PropertyChangedEventArgs args)
        {
            //Rect tmp = _layoutTransform.TransformBounds(((Rect)_content));
            if (null == _content)
            {
                return;
            }

            _content.RenderTransform = _layoutTransform;
            CompositeTransform tmp = (CompositeTransform) _layoutTransform;
            double radian = tmp.Rotation * Math.PI / 180;
            double d = (_content.Width) * (System.Math.Sin(radian) + System.Math.Cos(radian));
            double margin = Math.Abs((d  - _content.Width)/2);
            _content.Margin = new Thickness(margin);
        }

 

<phone:PhoneApplicationPage 
    x:Name="Myself"
    x:Class="LayoutTransform.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:layouttransform="clr-namespace:LayoutTransform;assembly=LayoutTransform"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <system:Double x:Key="MyFontSizeAppName">24</system:Double>
        <FontFamily x:Key="MyFontFamilySemiBold">Segoe WP Semibold</FontFamily>
        
        <Style x:Key="MyAppNameTextBlockStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="{StaticResource MyFontFamilySemiBold}"/>
            <Setter Property="FontSize" Value="{StaticResource MyFontSizeAppName}"/>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="Margin" Value="12,10,12,10" />
        </Style>

        <Storyboard x:Name="sb_protagonist">
            <DoubleAnimation Storyboard.TargetName="Myself"
                             Storyboard.TargetProperty="Rotation"
                             From="0" To="360" Duration="0:0:5" />
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

 

三、源代码下载地址

http://www.hugwp.com/thread-4208-1.html

 

——完。