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>