CODEWITHSUNDEEP
c#wpfxamlslider
user2088807
user2088807

Reputation: 1408

Rotate sliders WPF

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.

Upvotes: 5

Views: 3621

Answers (3)

ASh
ASh

Reputation: 35730

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

Upvotes: 5

Naresh Ravlani
Naresh Ravlani

Reputation: 1620

I am not really sure what you want to achieve but still on based of image you have provided I am posting my code :

<Slider VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
            <Slider.RenderTransform>
                <TransformGroup>                    
                    <RotateTransform Angle="45"/>                    
                </TransformGroup>
            </Slider.RenderTransform>
</Slider>

Use angles of 45,-45,135,-135 to layout them as per your posted design.

A small tip : Next time you find any such issue, Go to properties of that control and look for all available properties.

Happy coding !!

Upvotes: 2

Joren Vandamme
Joren Vandamme

Reputation: 412

This is how I did it:

<Grid>
    <Slider x:Name="slider" HorizontalAlignment="Center" Margin="-50,50,0,0" VerticalAlignment="Center" Width="75">
        <Slider.LayoutTransform>
            <RotateTransform CenterX="0" CenterY="0" Angle="-45"/>
        </Slider.LayoutTransform>
    </Slider>
    <Slider x:Name="slider1" HorizontalAlignment="Center" Margin="50,50,0,0" VerticalAlignment="Center" Width="75">
        <Slider.LayoutTransform>
            <RotateTransform CenterX="0" CenterY="0" Angle="-135"/>
        </Slider.LayoutTransform>
    </Slider>
    <Slider x:Name="slider5" HorizontalAlignment="Center" Margin="50,-50,0,0" VerticalAlignment="Center" Width="75">
        <Slider.LayoutTransform>
            <RotateTransform CenterX="0" CenterY="0" Angle="135"/>
        </Slider.LayoutTransform>
    </Slider>
    <Slider x:Name="slider3" HorizontalAlignment="Center" Margin="-50,-50,0,0" VerticalAlignment="Center" Width="75">
        <Slider.LayoutTransform>
            <RotateTransform CenterX="0" CenterY="0" Angle="45"/>
        </Slider.LayoutTransform>
    </Slider>
</Grid>

I can't embed images yet, please find my result in this link

Upvotes: 3

Related Questions