如何向 WPF CheckBox 控件添加左填充？答案

【问题标题】：How to add a left padding to the WPF CheckBox control?如何向 WPF CheckBox 控件添加左填充？
【发布时间】：2012-07-04 18:56:16
【问题描述】：

早安，

我正在为 WPF 应用程序中的 CheckBox 控件设置样式。我的目标是在 CheckBox 'default' 矩形/边框的左侧添加一个填充。

默认情况下，填充仅应用于 CheckBox 的内容区域。左边距确实有效，但在这种情况下，CheckBox 不会注册单击以选中该框。

有人有想法吗？提前致谢！！

编辑 #1，回答 Vlad，一个显示填充/边距差异的示例：

<StackPanel Orientation="Vertical">
   <Border Width="400" Height="50" BorderBrush="Black" BorderThickness="1">
      <CheckBox Content="Normal, clickable everywhere" />
   </Border>
   <Border Width="400" Height="50" BorderBrush="Black" BorderThickness="1">
      <CheckBox Content="Content padding, clickable everywhere" Padding="5" />
   </Border>
   <Border Width="400" Height="50" BorderBrush="Black" BorderThickness="1">
      <CheckBox Content="Control margin, not clickable in area 5px around" Margin="5" />
   </Border>
</StackPanel>

【问题讨论】：

我理解正确吗，CheckBox with 边距的工作方式与 without 不同？您能否发布（最小）代码来复制它？
@Vlad，我用一个例子编辑了我的帖子。希望清楚。
使用 CheckBox 的内置 ControlTemplate 是不可能的。您可以为 CheckBox 创建自己的ControlTemplate。从这里复制 (.NET4) msdn.microsoft.com/en-us/library/ms752319(v=vs.100).aspx
@Monty：看看我的回答，希望对您有所帮助。

标签： .net wpf checkbox padding controltemplate

【解决方案1】：

听起来您正在寻找Margin 而不是Padding。你找到the documentation了吗？我认为它给出了相当透彻的解释。

仅在左侧添加空格的复选框：

<CheckBox Margin="50 0 0 0"/>

【讨论】：

查看我的帖子，我提到它没有注册点击检查边缘区域的CheckBox。还更新了帖子，其中包含一个显示这一点的示例。不幸的是，这不是一个解决方案。
@Monty：CheckBox 没有在边距区域注册点击的原因是它不是控件的一部分。这可以改变，但我认为它的界面设计很糟糕。你确定要这样做吗？
mizipzor，在这种情况下是的。我只展示了我的 UI 的一部分，CheckBox 是样式化 ListBox 的一部分。因此，CheckBox 左侧缺少的可点击区域与直觉相悖。

【解决方案2】：

嗯，它的行为应该是这样的。边距被认为是控件的“外部”，因此边距区域不会让点击进入控件。相反，内边距区域被认为是控件的一部分（在控件本身和呈现内容的“客户区”之间），因此内边距区域正在获得点击。

看起来你可以只使用Padding="5,0,0,0"。（这只会在左侧添加填充。）请参阅this picture 了解 WPF 的盒子模型。

更新：根据您的评论，您需要破解默认模板。默认模板可以在这里找到：http://msdn.microsoft.com/en-us/library/ms752319%28v=vs.100%29.aspx。

您需要进行以下更改：将BulletDecorator 包含到Grid 中，并将所需的边距设置为BulletDecorator。这一定会有所帮助，因为希望焦点将应用于整个Grid 而不是BulletDecorator。或者，您也可以将边距设置为BulletDecorator.Bullet 的Border。

更新：当然，最好不要将整个模板定义复制到实际代码中以提高可维护性。可以通过以下技巧避免。

假设您决定在Bullet 的Border 设置额外的边距。您可以尝试覆盖Border 的默认样式就在Checkbox 的Bullet 内。以下技巧应该做到这一点：

<!-- first, define a style for border -->
<Style TargetType="Border" x:Key="MyCoolBorderWithMargin">
    <Setter Property="Margin" Value="5,0,0,0"/>
</Style>

<!-- then, define a style for BulletDecorator -->
<!-- this style overrides the style for inner borders -->
<Style TargetType="BulletDecorator" x:Key="MyCoolDecoratorStyle">
    <Style.Resources>
        <Style TargetType="Border"
               BasedOn="{StaticResource MyCoolBorderWithMargin}"/>
    </Style.Resources>
</Style>

<!-- finally, override the style for CheckBox -->
<Style TargetType="CheckBox">
    <Style.Resources>
        <Style TargetType="BulletDecorator"
               BasedOn="{StaticResource MyCoolDecoratorStyle}"/>
    </Style.Resources>
</Style>

这应该会有所帮助。

请注意，此代码是一个 hack，它使用了有关如何在当前 WPF 版本中实现 CheckBox 的默认控件模板的知识。（如果您使用的 WPF 版本与 4.0 不同，则可能需要更新代码，因为它是特定于版本的：不同版本的 WPF 使用不同的控件模板！）

【讨论】：

谢谢，我理解设计的行为。不幸的是，CheckBox 控件上的填充仅应用于内容区域。内容区域始终位于可点击矩形的右侧。所以不幸的是，这不是解决方案......
@Monty：好吧，看看更新答案中的第二种方法。
好吧，这是一个镜头！剩下的一个问题，我可以在 BulletDecorator（或边框）上设置边距而不将整个控件模板复制到我的代码中吗？
太好了，那是缺少的链接！很高兴注意到它仍然是一个 hack，但我认为可以接受，谢谢！