WPF中调整NumericUpDown控件上下调节按钮大小适配触摸屏

针对Extended WPF Toolkit的NumericUpDown控件，要放大上下按钮适配触摸屏，最可靠的方式是重写控件模板，直接调整按钮的尺寸和内部箭头元素的大小。以下是具体实现方案：

方案1：自定义控件模板调整按钮尺寸 #

通过修改控件的ControlTemplate，指定上下按钮（PART_UpButton、PART_DownButton）的宽高，并同步调整按钮内箭头的大小，确保触摸操作的可用性。

完整XAML示例 #

<Window xmlns:xctk1="http://schemas.xceed.com/wpf/xaml/toolkit">
    <Window.Resources>
        <Style x:Key="TouchFriendlyNumericUpDown" TargetType="xctk1:NumericUpDown">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="xctk1:NumericUpDown">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <!-- 输入框部分 -->
                            <xctk1:ButtonSpinner Grid.Column="0"
                                                x:Name="PART_Spinner"
                                                Background="{TemplateBinding Background}"
                                                BorderBrush="{TemplateBinding BorderBrush}"
                                                BorderThickness="{TemplateBinding BorderThickness}"
                                                IsTabStop="False">
                                <xctk1:ButtonSpinner.Content>
                                    <TextBox x:Name="PART_TextBox"
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                            FontSize="{TemplateBinding FontSize}"
                                            Background="Transparent"
                                            BorderThickness="0"/>
                                </xctk1:ButtonSpinner.Content>
                            </xctk1:ButtonSpinner>
                            <!-- 上下按钮容器 -->
                            <Grid Grid.Column="1" Width="60"> <!-- 按钮容器宽度，可按需调整 -->
                                <!-- 上按钮 -->
                                <RepeatButton x:Name="PART_UpButton"
                                            Height="50" <!-- 上按钮高度，控件总高100时设50刚好分半 -->
                                            Background="#FFB8B6B6"
                                            BorderBrush="Black"
                                            BorderThickness="0,0,0,1">
                                    <Path Data="M0,5 L5,0 L10,5 Z"
                                        Fill="Black"
                                        Width="20" Height="15"/> <!-- 箭头大小，按需调整 -->
                                </RepeatButton>
                                <!-- 下按钮 -->
                                <RepeatButton x:Name="PART_DownButton"
                                            Height="50"
                                            Margin="0,50,0,0" <!-- 上按钮占50，下按钮从50位置开始 -->
                                            Background="#FFB8B6B6"
                                            BorderBrush="Black"
                                            BorderThickness="0,1,0,0">
                                    <Path Data="M0,0 L5,5 L10,0 Z"
                                        Fill="Black"
                                        Width="20" Height="15"/>
                                </RepeatButton>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <!-- 应用自定义样式的NumericUpDown -->
    <xctk1:NumericUpDown Grid.Row="3" Grid.Column="1" 
                         Minimum="0" Maximum="24" Value="0" 
                         Name="hoursUpDown" Height="100" Width="200" 
                         FontSize="70" Margin="22,37,10,33" Background="#FFB8B6B6" 
                         BorderBrush="Black" BorderThickness="2"
                         Style="{StaticResource TouchFriendlyNumericUpDown}"/>
</Window>

关键调整点说明 #

• 按钮容器宽度：设置Grid.Column="1"的Grid宽度为60，确保按钮有足够的触摸区域。
• 按钮高度：控件总高为100，将上下按钮各设为50，刚好填满右侧区域。
• 箭头大小：调整Path的Width和Height，让箭头更醒目，方便识别。
• 按钮边框：给上下按钮添加分隔边框，提升视觉区分度。

注意事项 #

1. 确保模板内的控件名称与原控件的Part名称一致（如PART_UpButton、PART_DownButton），否则控件的增减值功能会失效。
2. 可根据实际需求进一步调整按钮的背景色、边框样式，或者增大按钮的触摸热区（比如设置Padding）。

内容的提问来源于stack exchange，提问作者drntvc