如何在其可点击区域中心放置一个WPF复选框？ [英] How can I center a WPF checkbox inside its clickable region?

问题描述

如果我在WPF中创建一个CheckBox控件（没有内容 - 我只需要检查/取消选中部分），它将框视觉化（有或没有检查的3-D矩形

我可以将框视觉化显示在复选框的中心控制？也就是说，水平和垂直居中？像这样：

/ p>

我可以通过将CheckBox的Horizo​​ntalAlignment和VerticalAlignment设置为Center来获得与此类似的东西。这导致复选框控件缩小到其框视觉的大小，然后在其父级中心。

解决方案

然而，它只响应盒子视觉上的点击，这提供了更小和更不方便的目标。您可以更改复选框的模板。最简单的方法是使用类似 StyleSnooper 然后根据您的需要编辑它：

 < ControlTemplate> 
< BulletDecorator Background =Transparent> 
< aero：BulletChrome Width =13Height =13Background ={TemplateBinding Panel.Background}
 BorderBrush ={TemplateBinding Border.BorderBrush}RenderMouseOver ={TemplateBinding UIElement。 IsMouseOver}
 RenderPressed ={TemplateBinding ButtonBase.IsPressed}IsChecked ={TemplateBinding ToggleButton.IsChecked}/> 
< / BulletDecorator> 
< ControlTemplate.Triggers> 
< Trigger Property =ContentControl.HasContentValue =True> 
< Setter Property =FrameworkElement.FocusVisualStyle> 
< Setter.Value> 
< Style TargetType ={x：Type IFrameworkInputElement}> 
< Setter Property =Control.Template> 
< Setter.Value> 
< ControlTemplate> 
< Rectangle Stroke ={DynamicResource {x：Static SystemColors.ControlTextBrushKey}}
 StrokeThickness =1StrokeDashArray =1 2Margin =14,0,0,0SnapsToDevicePixels = True/> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
< /Setter.Value> 
< / Setter> 
< Setter Property =Control.PaddingValue =4,0,0,0/> 
< / Trigger> 
< Trigger Property =UIElement.IsEnabledValue =False> 
< Setter Property =TextElement.ForegroundValue ={DynamicResource {x：Static SystemColors.GrayTextBrushKey}}/> 
< / Trigger> 
< /ControlTemplate.Triggers> 
< / ControlTemplate> 
  

If I create a CheckBox control in WPF (with no Content -- I only need the check/uncheck part), it puts the "box" visual (the 3-D rectangle that either has or doesn't have a check mark in it) in the top-left corner of the control.

Can I put the "box" visual in the center of the CheckBox control instead? That is, centered both horizontally and vertically? Something like this:

I can get something visually similar to this by setting the CheckBox's HorizontalAlignment and VerticalAlignment to Center. This causes the CheckBox control to shrink to just the size of its "box" visual, and then that gets centered within its parent. However, then it only responds to clicks on the "box" visual, which presents a much smaller and more inconvenient target.

解决方案

You can change the template of the checkbox. The easiest way is to copy the default template using something like StyleSnooper and then edit it for your needs to something like this:

<ControlTemplate>
  <BulletDecorator Background="Transparent">
    <aero:BulletChrome Width="13" Height="13" Background="{TemplateBinding Panel.Background}"
                       BorderBrush="{TemplateBinding Border.BorderBrush}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}"
                       RenderPressed="{TemplateBinding ButtonBase.IsPressed}" IsChecked="{TemplateBinding ToggleButton.IsChecked}" />
  </BulletDecorator>
  <ControlTemplate.Triggers>
    <Trigger Property="ContentControl.HasContent" Value="True">
      <Setter Property="FrameworkElement.FocusVisualStyle">
        <Setter.Value>
          <Style TargetType="{x:Type IFrameworkInputElement}">
            <Setter Property="Control.Template">
              <Setter.Value>
                <ControlTemplate>
                  <Rectangle Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                             StrokeThickness="1" StrokeDashArray="1 2" Margin="14,0,0,0" SnapsToDevicePixels="True" />
                </ControlTemplate>
              </Setter.Value>
            </Setter>
          </Style>
        </Setter.Value>
      </Setter>
      <Setter Property="Control.Padding" Value="4,0,0,0" />
    </Trigger>
    <Trigger Property="UIElement.IsEnabled" Value="False">
      <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

这篇关于如何在其可点击区域中心放置一个WPF复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！