如何正确缩小UWP NumberBox宽度避免控件右侧截断

问题原因 #

直接设置Width属性、修改控件MinWidth或NumberBoxMinWidth主题资源不生效，核心原因是NumberBox默认控件模板中，承载右侧上下数值调节按钮的网格容器有独立的最小宽度约束：该约束绑定独立主题资源NumberBoxSpinButtonWidth，不受前述属性或资源的控制，当控件总宽度设置过小时，内部内容被强制挤压就会出现右侧截断的问题。

解决方法 #

根据实际使用场景选对应方案即可：

• 不需要显示右侧调节按钮
  这是最简单的方案，直接给NumberBox设置属性：

<muxc:NumberBox SpinButtonPlacementMode="Hidden" Width="60" />

隐藏按钮后控件没有额外占位，直接设置Width和MinWidth就能自由调整尺寸，不会出现截断。

• 需要保留调节按钮、全局统一窄化样式
  在应用级资源字典中覆盖相关主题资源的默认值即可，不需要修改控件模板：

<Application.Resources>
    <!-- 控件整体最小宽度，按实际需求设置，示例值为60 -->
    <x:Double x:Key="NumberBoxMinWidth">60</x:Double>
    <!-- 右侧按钮组最小宽度，系统默认值为32，按缩窄需求调整，示例值为20 -->
    <x:Double x:Key="NumberBoxSpinButtonWidth">20</x:Double>
    <!-- 可选配置：按钮视觉太挤时可同步缩小按钮字号适配，示例值为8 -->
    <FontSize x:Key="NumberBoxSpinButtonFontSize">8</FontSize>
</Application.Resources>

配置完成后，直接给任意NumberBox设置目标宽度都可以正常显示，不会出现内容截断。

• 需要保留调节按钮、仅修改单个NumberBox宽度
  单独为目标控件编辑自定义模板即可：

1. 在Visual Studio设计器的文档大纲面板中找到目标NumberBox，右键选择「编辑模板」-「编辑副本」，将系统默认的NumberBox模板生成为本地资源
2. 在生成的模板代码中找到名为SpinDownSpinUpButtonsGrid的Grid控件，删除它的MinWidth属性，或者将该值修改为你需要的小尺寸
3. 按需调整输入框内边距、按钮图标大小适配窄尺寸，保存后即可正常给控件设置小宽度。

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