如何在Extended WPF Toolkit的IntegerUpDown中自定义ButtonSpinner控件

问题根源 #

IntegerUpDown的默认ControlTemplate中，内部的ButtonSpinner控件的SpinnerWidth和SpinnerHeight属性是直接绑定到IntegerUpDown自身的SpinnerButtonWidth、SpinnerButtonHeight属性，或者模板内已显式指定了值。WPF的属性优先级规则里，模板内部直接设置的属性值优先级高于外部资源中的Style Setter，所以你在IntegerUpDown.Resources里定义的样式无法生效。

而单独使用ButtonSpinner时，没有模板内部的强制属性设置，直接设置属性或通过Style修改都能正常起作用。

解决方案 #

方案1：直接设置IntegerUpDown的Spinner相关属性（推荐）

IntegerUpDown本身已经封装了控制内部Spinner按钮尺寸的属性，直接设置即可：

<xctk:IntegerUpDown Value="1564" Width="200" Height="100"
                    SpinnerButtonWidth="100" SpinnerButtonHeight="100"/>

方案2：重写IntegerUpDown的ControlTemplate

如果需要更自定义的样式，需要重写整个模板，找到内部的PART_Spinner（ButtonSpinner的命名部分），直接修改它的SpinnerWidth和SpinnerHeight：

<xctk:IntegerUpDown Value="1564" Width="200" Height="100">
    <xctk:IntegerUpDown.Template>
        <ControlTemplate TargetType="{x:Type xctk:IntegerUpDown}">
            <Grid x:Name="Root">
                <Border x:Name="FocusBorder"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}"
                        CornerRadius="{TemplateBinding CornerRadius}"/>
                <Grid Margin="{TemplateBinding Padding}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <xctk:WatermarkTextBox x:Name="PART_TextBox"
                                           Grid.Column="0"
                                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                           Watermark="{TemplateBinding Watermark}"/>
                    <!-- 修改此处的SpinnerWidth和SpinnerHeight -->
                    <xctk:ButtonSpinner x:Name="PART_Spinner"
                                        Grid.Column="1"
                                        SpinnerWidth="100"
                                        SpinnerHeight="100"
                                        Visibility="{TemplateBinding ShowButtonSpinner, Converter={xctk:BooleanToVisibilityConverter}}"/>
                </Grid>
            </Grid>
        </ControlTemplate>
    </xctk:IntegerUpDown.Template>
</xctk:IntegerUpDown>

内容的提问来源于stack exchange，提问作者Ihsan Nurul Iman