Half of Slider is cut out upon rotating it

Question

I am setting up the basic layout for a new piece of software I am developing, I have the grid setup in a 2x2. The main section (0,0) is for a canvas, the bottom main (0,1) is space for a slider, let's call it Slider1 and finally the right main (1,0) is space for Slider2. The issue is I want Slider2 to be rotated along the Y axis giving sliders for both X & Y, upon rotating the slider the top and bottom get completely cut off and sometimes VS forces it to change column.

My XAML for the page is as follows:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    <Slider HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Center" Width="600"/>
    <Slider Name="Slider2" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Width="300">
        <Slider.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="-90"/>
                <TranslateTransform/>
            </TransformGroup>
        </Slider.RenderTransform>
    </Slider>
</Grid>

And this shows on the WPF as:

As you can see Slider2 on the right is not displaying fully and the goal is just to have it display fully and be able to keep it in the column it's in with it being centred to it's Grid position.

I've been playing around for awhile and can't see to get it working, so I'm hoping one of you clever people can point out the simple mistake I've made.

Cheers for any help!

Answer 1

Instead of applying a RenderTransform, set the Slider's Orientation property to Vertical:

<Slider x:Name="Slider2" Orientation="Vertical" ... />