WPF变换详解

虽说是详解，但也不是很详细，总共5种变换，这里将介绍3种：RotateTransform、ScaleTransform和TranslateTransform。

首先要说的是在此示例中所有被应用变换元素的RenderTransformOrigin都设置为"0.5,0.5"，即变换点在中心，所有变换都是以中心点而展开的。

由RotateTransform开始。RotateTransform用于改变元素的角度，用以旋转对象，重要属性是Angle。这里为其指定了Name属性，目的是为了之后应用动画。

<TextBlock.RenderTransform> 

    <RotateTransform Angle="0" x:Name="rt1"></RotateTransform> 

</TextBlock.RenderTransform> 

 

然后在说下ScaleTransform。ScaleTransform用于翻转元素，其中我们用它的两个重要属性ScaleX和ScaleY。ScaleX或ScaleY设置为-1时，元素就会根据之前设定的变换点进行翻转。

<TextBlock.RenderTransform> 

    <ScaleTransform x:Name="st1" ScaleX="1" ScaleY="1"></ScaleTransform> 

</TextBlock.RenderTransform> 

 

再说下TranslateTransform 。TranslateTransform 用于水平偏移元素，同样也包含两个重要属性X和Y，分别是指水平和垂直偏移元素，设置为负数即为与正值相反的方向。

<TextBlock.RenderTransform> 

    <TranslateTransform X="0" x:Name="ttf1"></TranslateTransform> 

</TextBlock.RenderTransform> 

 

此外，还有一个TransformGroup属性。顾名思义，其作用就是组合多个变换在一起，在此不过多阐述。

这是WPF变换的一个实际应用的例子：WPF字体输入倒影效果 ，一个简单的WPF字体选择器实现

以下是完整xaml（同样无代码）：

<Window x:Class="WpfApplication8.Window1" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

        Title="WPF变换" Height="350" Width="525"> 

    <Grid> 

        <Grid.RowDefinitions> 

            <RowDefinition Height="Auto"></RowDefinition> 

            <RowDefinition></RowDefinition> 

        </Grid.RowDefinitions> 

        <Grid.ColumnDefinitions> 

            <ColumnDefinition></ColumnDefinition> 

            <ColumnDefinition></ColumnDefinition> 

            <ColumnDefinition></ColumnDefinition> 

        </Grid.ColumnDefinitions> 

        <TextBlock>RotateTransform(旋转效果）</TextBlock> 

        <TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center"  RenderTransformOrigin="0.5,0.5" MaxHeight="300"  MaxWidth="100" Text="RotateTransform" Height="102" Margin="0,141,0,53"> 

            <TextBlock.RenderTransform> 

                <RotateTransform Angle="0" x:Name="rt1"></RotateTransform> 

            </TextBlock.RenderTransform> 

            <TextBlock.Triggers> 

                <EventTrigger RoutedEvent="MouseEnter"> 

                    <BeginStoryboard> 

                        <Storyboard> 

                            <DoubleAnimation Storyboard.TargetName="rt1" Storyboard.TargetProperty="Angle"  To="360" Duration="0:0:3"></DoubleAnimation> 

                        </Storyboard> 

                    </BeginStoryboard> 

                </EventTrigger> 

                <EventTrigger RoutedEvent="MouseLeave"> 

                    <BeginStoryboard> 

                        <Storyboard> 

                            <DoubleAnimation Storyboard.TargetName="rt1" Storyboard.TargetProperty="Angle" Duration="0:0:1"> </DoubleAnimation> 

                        </Storyboard> 

                    </BeginStoryboard> 

                </EventTrigger> 

            </TextBlock.Triggers> 

        </TextBlock> 

        <TextBlock Grid.Column="1">ScaleTransform（翻转效果）</TextBlock> 

        <TextBlock Grid.Column="1" Grid.Row="1" VerticalAlignment="Center"  RenderTransformOrigin="0.5,0.5" Text="ScaleTransform" MaxHeight="300"  MaxWidth="100" Height="102" Margin="0,141,0,53"> 

            <TextBlock.RenderTransform> 

                <ScaleTransform x:Name="st1" ScaleX="1" ScaleY="1"></ScaleTransform> 

            </TextBlock.RenderTransform> 

            <TextBlock.Triggers> 

                <EventTrigger RoutedEvent="MouseEnter"> 

                    <BeginStoryboard> 

                        <Storyboard> 

                            <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleX" To="-1" Duration="0:0:3"></DoubleAnimation> 

                        </Storyboard> 

                    </BeginStoryboard> 

                </EventTrigger> 

                 <EventTrigger RoutedEvent="MouseLeave"> 

                    <BeginStoryboard> 

                        <Storyboard> 

                            <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleX" ></DoubleAnimation> 

                        </Storyboard> 

                    </BeginStoryboard> 

                </EventTrigger> 

            </TextBlock.Triggers> 

        </TextBlock> 

        <TextBlock Grid.Row="0" Grid.Column="3">TranslateTransform(偏移效果）</TextBlock> 

        <TextBlock  Grid.Row="1" Grid.Column="2" TextAlignment="Center" TextWrapping="Wrap"  VerticalAlignment="Center" MaxHeight="300"  MaxWidth="100" RenderTransformOrigin="0.5 ,0.5" Text="TranslateTransform" Height="102" Margin="0,141,0,53" > 

            <TextBlock.RenderTransform> 

                <TranslateTransform X="0" x:Name="ttf1"></TranslateTransform> 

                

            </TextBlock.RenderTransform> 

            <TextBlock.Triggers> 

                <EventTrigger RoutedEvent="MouseEnter"> 

                    <BeginStoryboard> 

                        <Storyboard> 

                            <DoubleAnimation Storyboard.TargetName="ttf1" Storyboard.TargetProperty="Y" To="100" Duration="0:0:3"></DoubleAnimation> 

                        </Storyboard> 

                    </BeginStoryboard> 

                </EventTrigger> 

                <EventTrigger RoutedEvent="MouseLeave"> 

                    <BeginStoryboard> 

                        <Storyboard> 

                            <DoubleAnimation Storyboard.TargetName="ttf1" Storyboard.TargetProperty="Y" ></DoubleAnimation> 

                        </Storyboard> 

                    </BeginStoryboard> 

                </EventTrigger> 

            </TextBlock.Triggers> 

        </TextBlock> 

    </Grid> 

</Window> 

 

 

欢迎大家积极评论！！