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>



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.



After that we set the Rectangle property:

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



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>