Is it possible to rotate the NumericUpDown control?

[dknippel]

Hi @punker76 , When I try to apply a 90 degree rotate transform, the buttons and text are rotated, but not the control itself.

[dknippel]

Here is my current XAML that does not seem to rotate the control itself:

<mah:NumericUpDown Grid.Column="2" Grid.Row="0" Minimum="-180" Maximum="180" 
    Value="{Binding RotateZ}" RenderTransformOrigin="0.5, 0.5">
        <mah:NumericUpDown.RenderTransform>
            <TransformGroup>
                <RotateTransform Angle="90"/>
            </TransformGroup>
        </mah:NumericUpDown.RenderTransform>
</mah:NumericUpDown>

[punker76]

Hi @dknippel there are dependency properties available to change the alignement of the text and buttons:

ButtonsAlignment="Left"

SwitchUpDownButtons="True"

TextAlignment="Left"

[dknippel]

Hi @punker76 , thanks so much for your reply! I'm aware of the dependency properties available to change the alignement of the text and buttons. Those work great.

However, due to screen real estate limits I am needing to rotate the entire control so that it renders vertically. The text and buttons do rotate correctly. Unfortunately though the containing "box" does not seem to rotate and thus I'm not able to place multiple numericupddown controls close enough to each other. I've attached a screenshot for your reference. The red box seems to be some kind of container element for the numericupdown control that is not rotating and thus preventing closer arrangement of multiple instances of said control.

Do you know if rendering the entire numericupdown control vertically is possible? If so, what would be the correct XAML?

[punker76]

@dknippel Ok, got it, you should use LayoutTransform instead RenderTransform to get this:

I hope this is what you want.

    <Grid HorizontalAlignment="Center" Grid.ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <mah:NumericUpDown Grid.Column="0"
                           Grid.Row="0"
                           Minimum="-180"
                           Maximum="180" 
                           Value="100"
                           Margin="4"
                           VerticalAlignment="Stretch"
                           HorizontalAlignment="Stretch">
            <mah:NumericUpDown.LayoutTransform>
                <TransformGroup>
                    <RotateTransform Angle="90"/>
                </TransformGroup>
            </mah:NumericUpDown.LayoutTransform>
        </mah:NumericUpDown>

        <mah:NumericUpDown Grid.Column="1"
                           Grid.Row="0"
                           Minimum="-180"
                           Maximum="180" 
                           Value="100"
                           Margin="4"
                           VerticalAlignment="Stretch"
                           HorizontalAlignment="Stretch">
            <mah:NumericUpDown.LayoutTransform>
                <TransformGroup>
                    <RotateTransform Angle="90"/>
                </TransformGroup>
            </mah:NumericUpDown.LayoutTransform>
        </mah:NumericUpDown>

        <mah:NumericUpDown Grid.Column="2"
                           Grid.Row="0"
                           Minimum="-180"
                           Maximum="180" 
                           Value="100"
                           Margin="4"
                           VerticalAlignment="Stretch"
                           HorizontalAlignment="Stretch">
            <mah:NumericUpDown.LayoutTransform>
                <TransformGroup>
                    <RotateTransform Angle="90"/>
                </TransformGroup>
            </mah:NumericUpDown.LayoutTransform>
        </mah:NumericUpDown>
    </Grid>

[dknippel]

Haha, yes that worked!!! Also, now I understand a bit more about RenderTransform versus LayoutTransform. Thanks so much @punker76 :-D