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> 

 

 

歡迎大家積極評論！！