I would like to rotate 4 sliders in WPF to create a custom control.
Here is my code :
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Slider Name="Slider_Top_Left" Minimum="0" Maximum="100" Value="75" RenderTransformOrigin="0,0">
<Slider.LayoutTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="-135"/>
</Slider.LayoutTransform>
</Slider>
<Slider Name="Slider_Top_Right" Grid.Column="1" Minimum="0" Maximum="100" Value="75">
<Slider.LayoutTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="-45"/>
</Slider.LayoutTransform>
</Slider>
<Slider Name="Slider_Bottom_Right" Grid.Column="1" Grid.Row="1" Minimum="0" Maximum="100" Value="75">
<Slider.LayoutTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="45"/>
</Slider.LayoutTransform>
</Slider>
<Slider Name="Slider_Bottom_Left" Grid.Column="0" Grid.Row="1" Minimum="0" Maximum="100" Value="75">
<Slider.LayoutTransform>
<RotateTransform CenterX="-10" CenterY="-10" Angle="135"/>
</Slider.LayoutTransform>
</Slider>
</Grid>
The result :
What I want :
I've tried without the grid definitions, with different centers (it didn't change anything).
I've followed the online help for layout transform but I can't make it work.
Thank you for your help.
Put Sliders in Grid properly and Rotate the Grid
. If you decide later to add more elements to custom control, where will be no need to calculate any rotation angles/centers for them
<Grid Grid.Row="3">
<Grid.LayoutTransform>
<RotateTransform Angle="45"/>
</Grid.LayoutTransform>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!--top right-->
<Slider Orientation="Vertical" Grid.ColumnSpan="2" HorizontalAlignment="Center">
<Slider.LayoutTransform>
<ScaleTransform ScaleY="-1"/>
</Slider.LayoutTransform>
</Slider>
<!--bottom left-->
<Slider Orientation="Vertical" Grid.Row="1"
Grid.ColumnSpan="2"
HorizontalAlignment="Center"/>
<!--top left-->
<Slider Grid.RowSpan="2" VerticalAlignment="Center"/>
<!--bottom right-->
<Slider Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Center">
<Slider.LayoutTransform>
<ScaleTransform ScaleX="-1"/>
</Slider.LayoutTransform>
</Slider>
</Grid>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With