如何在 MahApps.Metro 的 NumericUpDown 控件中交换向上/向下按钮？

Question

我目前正在使用 MahApps.Metro NumericUpDown 控件来更改图像堆栈中的帧。我从中得到的用户反馈是按钮感觉方向不对，直觉上左边的按钮会向后移动一帧，而右边的按钮会向前移动。因此，我想交换按钮的顺序

我查看了控件的属性，但找不到任何可以让我更改按钮顺序的属性。

有没有办法做到这一点而不必滚动我自己的控制？

基本上我想改变这个：

到这里：

Answer 1

更新

在最新的 MahApps 版本 (v2.x) 中，新的 SwitchUpDownButtons 属性可用于交换/切换按钮。

较早的 MahApps 版本

没有可以更改向上和向下按钮顺序的属性。但是您可以采用 MahApps.Metro 的 GitHub 存储库中提供的原始样式并更改模板。

<Style x:Key="CustomNumericUpDownStyle" TargetType="{x:Type Controls:NumericUpDown}" BasedOn="{StaticResource {x:Type Controls:NumericUpDown}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Controls:NumericUpDown}">
                <Grid SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                    <Border x:Name="Base"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding Controls:ControlsHelper.CornerRadius}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    <Grid Margin="{TemplateBinding BorderThickness}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="PART_TextBoxColumn" Width="*" />
                            <ColumnDefinition x:Name="PART_ButtonsColumn" Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBox x:Name="PART_TextBox"
                                    Grid.Column="0"
                                    MinWidth="20"
                                    MinHeight="0"
                                    Margin="0 0 -2 0"
                                    Padding="0"
                                    HorizontalAlignment="Stretch"
                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                    Controls:ControlsHelper.DisabledVisualElementVisibility="Collapsed"
                                    Controls:TextBoxHelper.ButtonContent="{TemplateBinding Controls:TextBoxHelper.ButtonContent}"
                                    Controls:TextBoxHelper.ButtonContentTemplate="{TemplateBinding Controls:TextBoxHelper.ButtonContentTemplate}"
                                    Controls:TextBoxHelper.ButtonFontFamily="{TemplateBinding Controls:TextBoxHelper.ButtonFontFamily}"
                                    Controls:TextBoxHelper.ButtonFontSize="{TemplateBinding Controls:TextBoxHelper.ButtonFontSize}"
                                    Controls:TextBoxHelper.ButtonWidth="{TemplateBinding Controls:TextBoxHelper.ButtonWidth}"
                                    Controls:TextBoxHelper.ButtonsAlignment="{TemplateBinding ButtonsAlignment}"
                                    Controls:TextBoxHelper.ClearTextButton="{TemplateBinding Controls:TextBoxHelper.ClearTextButton}"
                                    Controls:TextBoxHelper.HasText="{TemplateBinding Controls:TextBoxHelper.HasText}"
                                    Controls:TextBoxHelper.SelectAllOnFocus="{TemplateBinding Controls:TextBoxHelper.SelectAllOnFocus}"
                                    Controls:TextBoxHelper.UseFloatingWatermark="{TemplateBinding Controls:TextBoxHelper.UseFloatingWatermark}"
                                    Controls:TextBoxHelper.Watermark="{TemplateBinding Controls:TextBoxHelper.Watermark}"
                                    Controls:TextBoxHelper.WatermarkAlignment="{TemplateBinding Controls:TextBoxHelper.WatermarkAlignment}"
                                    Controls:TextBoxHelper.WatermarkTrimming="{TemplateBinding Controls:TextBoxHelper.WatermarkTrimming}"
                                    Background="{x:Null}"
                                    BorderThickness="0"
                                    FocusVisualStyle="{x:Null}"
                                    Focusable="{TemplateBinding Focusable}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    FontSize="{TemplateBinding FontSize}"
                                    Foreground="{TemplateBinding Foreground}"
                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                    IsReadOnly="{TemplateBinding IsReadOnly}"
                                    IsTabStop="{TemplateBinding IsTabStop}"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                    TabIndex="{TemplateBinding TabIndex}"
                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" />
                        <StackPanel x:Name="PART_Buttons"
                                    Grid.Column="1"
                                    Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Padding, Converter={StaticResource ThicknessBindingConverter}, ConverterParameter={x:Static Converters:ThicknessSideType.Left}}"
                                    Orientation="Horizontal">
                            <!-- down is now the first button -->
                            <RepeatButton x:Name="PART_NumericDown"
                                            Width="{TemplateBinding UpDownButtonsWidth}"
                                            VerticalContentAlignment="Center"
                                            Delay="{TemplateBinding Delay}"
                                            Foreground="{TemplateBinding Foreground}"
                                            IsTabStop="False"
                                            Style="{DynamicResource ChromelessButtonStyle}">
                                <Path x:Name="PolygonDown"
                                        Width="14"
                                        Height="3"
                                        Data="F1 M 19,38L 57,38L 57,44L 19,44L 19,38 Z "
                                        Fill="{DynamicResource GrayBrush1}"
                                        Stretch="Fill" />
                            </RepeatButton>
                            <RepeatButton x:Name="PART_NumericUp"
                                            Width="{TemplateBinding UpDownButtonsWidth}"
                                            Delay="{TemplateBinding Delay}"
                                            Foreground="{TemplateBinding Foreground}"
                                            IsTabStop="False"
                                            Style="{DynamicResource ChromelessButtonStyle}">
                                <Path x:Name="PolygonUp"
                                        Width="14"
                                        Height="14"
                                        Data="F1 M 35,19L 41,19L 41,35L 57,35L 57,41L 41,41L 41,57L 35,57L 35,41L 19,41L 19,35L 35,35L 35,19 Z "
                                        Fill="{DynamicResource GrayBrush1}"
                                        Stretch="Fill" />
                            </RepeatButton>
                        </StackPanel>
                    </Grid>
                    <Border x:Name="DisabledVisualElement"
                            Background="{DynamicResource ControlsDisabledBrush}"
                            BorderBrush="{DynamicResource ControlsDisabledBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding Controls:ControlsHelper.CornerRadius}"
                            IsHitTestVisible="False"
                            Opacity="0"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.DisabledVisualElementVisibility), Mode=OneWay}" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="ButtonsAlignment" Value="Left">
                        <Setter TargetName="PART_Buttons" Property="Grid.Column" Value="0" />
                        <Setter TargetName="PART_Buttons" Property="Margin" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Padding, Converter={StaticResource ThicknessBindingConverter}, ConverterParameter={x:Static Converters:ThicknessSideType.Right}}" />
                        <Setter TargetName="PART_ButtonsColumn" Property="Width" Value="*" />
                        <Setter TargetName="PART_TextBox" Property="Grid.Column" Value="1" />
                        <Setter TargetName="PART_TextBox" Property="Margin" Value="-2 0 0 0" />
                        <Setter TargetName="PART_TextBox" Property="Margin" Value="-2 0 0 0" />
                        <Setter TargetName="PART_TextBoxColumn" Property="Width" Value="Auto" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="DisabledVisualElement" Property="Opacity" Value="0.6" />
                    </Trigger>
                    <Trigger Property="IsReadOnly" Value="True">
                        <Setter Property="InterceptArrowKeys" Value="False" />
                        <Setter Property="InterceptManualEnter" Value="False" />
                        <Setter Property="InterceptMouseWheel" Value="False" />
                        <Setter TargetName="PART_NumericDown" Property="IsEnabled" Value="False" />
                        <Setter TargetName="PART_NumericUp" Property="IsEnabled" Value="False" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsReadOnly" Value="False" />
                            <Condition Property="InterceptManualEnter" Value="False" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="PART_TextBox" Property="IsReadOnly" Value="True" />
                    </MultiTrigger>
                    <Trigger SourceName="PART_NumericUp" Property="IsMouseOver" Value="True">
                        <Setter TargetName="PART_NumericUp" Property="Background" Value="{DynamicResource GrayBrush8}" />
                        <Setter TargetName="PolygonUp" Property="Fill" Value="{DynamicResource AccentColorBrush}" />
                    </Trigger>
                    <Trigger SourceName="PART_NumericUp" Property="IsPressed" Value="True">
                        <Setter TargetName="PART_NumericUp" Property="Background" Value="{DynamicResource BlackBrush}" />
                        <Setter TargetName="PolygonUp" Property="Fill" Value="{DynamicResource WhiteBrush}" />
                    </Trigger>
                    <Trigger SourceName="PART_NumericDown" Property="IsMouseOver" Value="True">
                        <Setter TargetName="PART_NumericDown" Property="Background" Value="{DynamicResource GrayBrush8}" />
                        <Setter TargetName="PolygonDown" Property="Fill" Value="{DynamicResource AccentColorBrush}" />
                    </Trigger>
                    <Trigger SourceName="PART_NumericDown" Property="IsPressed" Value="True">
                        <Setter TargetName="PART_NumericDown" Property="Background" Value="{DynamicResource BlackBrush}" />
                        <Setter TargetName="PolygonDown" Property="Fill" Value="{DynamicResource WhiteBrush}" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Base" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.MouseOverBorderBrush)}" />
                    </Trigger>
                    <Trigger SourceName="PART_TextBox" Property="IsFocused" Value="true">
                        <Setter TargetName="Base" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.FocusBorderBrush)}" />
                    </Trigger>

                    <Trigger Property="HideUpDownButtons" Value="True">
                        <Setter TargetName="PART_Buttons" Property="Visibility" Value="Collapsed" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>