Rotate sliders WPF

Question

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.

Answer 1

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>