Rotate Transform in WPF


In this article, we discuss Rotate Transform in WPF. There are three main properties of a Rotate Transform which are:

Angle: It specifies the distance to Rotate.

CenterX and CenterY: These properties are used to specify the center point around which the element will be rotated.

<RotateTransform
Angle="{Binding ElementName=SliderForAngle, Path=Value}"
CenterX="{Binding ElementName=SliderForCenterX, Path=Value}"
CenterY="{Binding ElementName=SliderForCenterY, Path=Value}"
/>

Here we take an example in which we apply the rotate transform property in a ListBox.

First we set the style of the TextBox, Slider and TextBlock:

<Style TargetType="TextBox">
            <Setter Property="FontFamily" Value="Verdana"/>
                <Setter Property="Margin" Value="5"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                        <Setter Property="Width" Value="50"/>
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Verdana"/>
                <Setter Property="Margin" Value="5"/>
                    <Setter Property="FontWeight" Value="Bold"/>
        </Style>
        <Style TargetType="Slider">
            <Setter Property="Margin" Value="5"/>
                <Setter Property="Width" Value="100"/>
                    <Setter Property="Maximum" Value="100"/>
                        <Setter Property="Minimum" Value="-100"/>
                            <Setter Property="Value" Value="0"/>
                                <Setter Property="TickFrequency" Value="2"/>
                                    <Setter Property="IsSnapToTickEnabled" Value="True"/>
</Style>

RotTWPF1.jpg


After that we discuss the ListBox and Item:

<ListBox Height="100" Width="200" BorderBrush="Brown" BorderThickness="2">
<
ListBoxItem Content="Menu1" Background="Pink" Height="25"/>
<
ListBoxItem Content="Menu2" Background="Plum" Height="25"/>
<
ListBoxItem Content="Menu3" Background="Orchid" Height="25"/>
<
ListBoxItem Content="Menu4" Background="Lavender" Height="25"/>
<
ListBoxItem Content="Menu5" Background="LavenderBlush" Height="25"/>
<
ListBoxItem Content="Menu6" Background="Khaki" Height="25"/>
<
ListBox.RenderTransform>
<
RotateTransform
Angle="{Binding ElementName=SliderForAngle, Path=Value}"
CenterX="{Binding ElementName=SliderForCenterX, Path=Value}"
CenterY="{Binding ElementName=SliderForCenterY, Path=Value}"
/>
</
ListBox.RenderTransform>
</ListBox>

We set the Rotate Transform in it.

RotTWPF2.jpg

After that we set the Rectangle property:

<Rectangle Height="100" Width="200" Stroke="Blue" Fill="Blue" Opacity=".05"/>

RotTWPF3.jpg

Now we write the complete program:

<Window.Resources>
        <Style TargetType="TextBox">
            <Setter Property="FontFamily" Value="Verdana"/>
                <Setter Property="Margin" Value="5"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                        <Setter Property="Width" Value="50"/>
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Verdana"/>
                <Setter Property="Margin" Value="5"/>
                    <Setter Property="FontWeight" Value="Bold"/>
        </Style>
        <Style TargetType="Slider">
            <Setter Property="Margin" Value="5"/>
                <Setter Property="Width" Value="100"/>
                    <Setter Property="Maximum" Value="100"/>
                        <Setter Property="Minimum" Value="-100"/>
                            <Setter Property="Value" Value="0"/>
                                <Setter Property="TickFrequency" Value="2"/>
                                    <Setter Property="IsSnapToTickEnabled" Value="True"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel Margin="8">
            <TextBlock Height="25" Width="100"/>
<
ListBox Height="100" Width="200" BorderBrush="Brown" BorderThickness="2">
<
ListBoxItem Content="Menu1" Background="Pink" Height="25"/>
<
ListBoxItem Content="Menu2" Background="Plum" Height="25"/>
<
ListBoxItem Content="Menu3" Background="Orchid" Height="25"/>
<
ListBoxItem Content="Menu4" Background="Lavender" Height="25"/>
<
ListBoxItem Content="Menu5" Background="LavenderBlush" Height="25"/>
<
ListBoxItem Content="Menu6" Background="Khaki" Height="25"/>
<
ListBox.RenderTransform>
<
RotateTransform
Angle="{Binding ElementName=SliderForAngle, Path=Value}"
CenterX="{Binding ElementName=SliderForCenterX, Path=Value}"
CenterY="{Binding ElementName=SliderForCenterY, Path=Value}"
/>
</
ListBox.RenderTransform>
</
ListBox>
<
TextBlock Height="50" Width="100"/>
<
Grid HorizontalAlignment="Center" Margin="2">
<
Grid.RowDefinitions>
<
RowDefinition/>
<
RowDefinition/>
<
RowDefinition/>
<
RowDefinition/>
</
Grid.RowDefinitions>
<
Grid.ColumnDefinitions>
<
ColumnDefinition/>
<
ColumnDefinition Width="150"/>
<
ColumnDefinition/>
</
Grid.ColumnDefinitions>
<
TextBlock Grid.Row="0" Grid.Column="0" Text="Angle"/>
<
Slider Grid.Row="0" Grid.Column="1" Name="SliderForAngle" Maximum="360"
Minimum="-360"/>
<
TextBox Grid.Row="0" Grid.Column="2" Text="{Binding
ElementName=SliderForAngle, Path=Value}"/>
<
TextBlock Grid.Row="1" Grid.Column="0" Text="X"/>
<
Slider Grid.Row="1" Grid.Column="1" Name="SliderForCenterX"/>
<
TextBox Grid.Row="1" Grid.Column="2" Text="{Binding
ElementName=SliderForCenterX, Path=Value}"/>
<
TextBlock Grid.Row="2" Grid.Column="0" Text="Y:"/>
<
Slider Grid.Row="2" Grid.Column="1" Name="SliderForCenterY"/>
<
TextBox Grid.Row="2" Grid.Column="2" Text="{Binding
ElementName=SliderForCenterY, Path=Value}"/>
</
Grid>
</
StackPanel>
<
StackPanel Margin="10">
<
TextBlock Height="25" Width="100"/>
<
Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100">

<Rectangle Height="100" Width="200" Stroke="Blue" Fill="Blue" Opacity=".05"/>
</
Border>
</
StackPanel>
</
Grid>

RotTWPF4.jpg

RotTWPF5.jpg

RotTWPF6.jpg