Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rotate sliders WPF

Tags:

c#

wpf

xaml

slider

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 : result

What I want :wanted

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.

like image 563
user2088807 Avatar asked Mar 29 '16 12:03

user2088807


1 Answers

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>

enter image description here

like image 50
ASh Avatar answered Sep 28 '22 20:09

ASh