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> 

 

 

欢迎大家积极评论！！