WPF中复选框左侧的文本？

Posted 2023-03-05

【中文标题】WPF中复选框左侧的文本？

【英文标题】：Text on the left side of checkbox in WPF?

【发布时间】：2013-07-02 04:45:30

【问题描述】：

将复选框内容（文本）放在复选框本身左侧的最简单方法是什么？

【参考方案1】：

我知道已经有一段时间了，我迟到了。但是在经历了几个复杂的答案并在互联网上搜索了很多之后，我终于找到了实现这一目标的最简单方法，而不会扭曲 here 的勾选。

<CheckBox Content="Checked" FlowDirection="RightToLeft">
    <CheckBox.Resources>
        <Style TargetType="x:Type Path">
            <Setter Property="FlowDirection" Value="LeftToRight" />
        </Style>
    </CheckBox.Resources>
</CheckBox>

结果：

【参考方案2】：

我花了两个小时，但我找到了最好的决定

<Style x:Key="TextAlignLeft" TargetType="CheckBox">
    <Style.Resources>
        <Style TargetType="Path">
            <Setter Property="FlowDirection" Value="LeftToRight" />
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="FlowDirection" Value="LeftToRight" />
        </Style>
    </Style.Resources>

    <Setter Property="FlowDirection" Value="RightToLeft" />
</Style>

【讨论】：

我在 windows 10 Visual Studio 2017 中测试过，效果很好，刻度方向也正确。

【参考方案3】：

最简单的方法是使用堆栈面板：

            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Some Text"/>
                <CheckBox  />
            </StackPanel>

【讨论】：

如果您不介意在单击文本时失去选中/取消选中的功能，我想这没关系

事件处理程序可以处理

【参考方案4】：

另一种解决方法是，在定义全新的 CheckBox 样式时避免上面讨论的流向和大量代码的细微问题，只使用包含 Label（具有所需的 CheckBox 内容字符串）和 CheckBox 的 WrapPanel （没有内容字符串）。

<WrapPanel>
    <Label Content="Checkbox content"/>
    <CheckBox VerticalAlignment="Center" Margin="5,0,0,0"/>
</WrapPanel>

【讨论】：

这很简单，但您无法单击文本以选中其他一些解决方案为您提供的复选框。

【参考方案5】：

另一种方法是制作新的自定义样式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <SolidColorBrush Color="#F4F4F4"
                   x:Key="CheckBoxFillNormal" />
  <SolidColorBrush Color="#8E8F8F"
                   x:Key="CheckBoxStroke" />
  <Style x:Key="EmptyCheckBoxFocusVisual">
    <Setter Property="Control.Template">
      <Setter.Value>
        <ControlTemplate>
          <Rectangle Margin="1"
                     SnapsToDevicePixels="true"
                     Stroke="DynamicResource x:Static SystemColors.ControlTextBrushKey"
                     StrokeDashArray="1 2"
                     StrokeThickness="1" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  <Style x:Key="CheckRadioFocusVisual">
    <Setter Property="Control.Template">
      <Setter.Value>
        <ControlTemplate>
          <Rectangle Margin="14,0,0,0"
                     SnapsToDevicePixels="true"
                     Stroke="DynamicResource x:Static SystemColors.ControlTextBrushKey"
                     StrokeDashArray="1 2"
                     StrokeThickness="1" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  <Style TargetType="x:Type CheckBox"
         x:Key="ContentLeftCheckBoxStyle">
    <Setter Property="Foreground"
            Value="DynamicResource x:Static SystemColors.ControlTextBrushKey" />
    <Setter Property="Background"
            Value="StaticResource CheckBoxFillNormal" />
    <Setter Property="BorderBrush"
            Value="StaticResource CheckBoxStroke" />
    <Setter Property="BorderThickness"
            Value="1" />
    <Setter Property="FocusVisualStyle"
            Value="StaticResource EmptyCheckBoxFocusVisual" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="x:Type CheckBox">
          <StackPanel Orientation="Horizontal">
            <ContentPresenter HorizontalAlignment="TemplateBinding HorizontalContentAlignment"
                              Margin="TemplateBinding Padding"
                              RecognizesAccessKey="True"
                              SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels"
                              VerticalAlignment="TemplateBinding VerticalContentAlignment" />
            <BulletDecorator Background="Transparent"
                             SnapsToDevicePixels="true"
                             VerticalAlignment="TemplateBinding VerticalContentAlignment">
              <BulletDecorator.Bullet>
                <Microsoft_Windows_Themes:BulletChrome Background="TemplateBinding Background"
                                                       BorderBrush="TemplateBinding BorderBrush"
                                                       IsChecked="TemplateBinding IsChecked"
                                                       RenderMouseOver="TemplateBinding IsMouseOver"
                                                       RenderPressed="TemplateBinding IsPressed" />
              </BulletDecorator.Bullet>
            </BulletDecorator>
          </StackPanel>
          <ControlTemplate.Triggers>
            <Trigger Property="HasContent"
                     Value="true">
              <Setter Property="FocusVisualStyle"
                      Value="StaticResource CheckRadioFocusVisual" />
              <Setter Property="Padding"
                      Value="0,0,4,0" />
            </Trigger>
            <Trigger Property="IsEnabled"
                     Value="false">
              <Setter Property="Foreground"
                      Value="DynamicResource x:Static SystemColors.GrayTextBrushKey" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

用法：

<CheckBox Style="StaticResource ContentLeftCheckBoxStyle" Content="CheckBox:" />

希望有帮助！

【讨论】：

我想我们都知道这个答案，我们知道这是解决这个问题的正确方法，但“最简单”的方法就是改变流动方向。 :)

@LepiPerke 好的，左边的“：”很好:-)

这个答案确实应该被标记为正确。它做所有正确的事情，并且在翻转复选标记和反转文本方面没有问题。提倡使用 FlowDirection 的答案对于字符顺序和非对称复选标记并不一致。

可能存在问题：“未找到类型 'Microsoft_Windows_Themes:BulletChrome'。确认您没有丢失程序集引用并且所有引用的程序集均已构建。”请参阅：***.com/questions/2304779/…。

【参考方案6】：

最大化“轻松性”和“正确性”的解决方案是制作带有LeftToRight 内容的RightToLeft 复选框：

<CheckBox FlowDirection="RightToLeft">
    <TextBlock FlowDirection="LeftToRight" Text="CheckBox Content:" />
</CheckBox>

或者如果你想要一种风格：

<Style TargetType="CheckBox">
    <Setter Property="FlowDirection" Value="RightToLeft" />
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <ContentControl FlowDirection="LeftToRight" Content="Binding" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

无论出于何种原因，这也会翻转复选标记字形（注意： .NET 4.5），这使得该解决方案毫无用处。最好的办法是编辑原始样式的副本并自定义模板来处理这个问题。

由于有些人可能不知道如何获取默认 CheckBox 样式的副本，因此我决定将我的实现（利用附加属性）放在 a gist 上，其中包括 完整 CheckBox 样式，对ControlTemplate.Triggers 进行了一些小的修改。

@nmclean 在您的解决方案中缺少翻转复选标记字形。 @Erode，您可以按照@Lance 的建议轻松翻转字形，将FlowDirection 设置为Path (Lance Solution)

不仅复选标记被翻转，任何问号“？”也被翻转。翻到了句子的开头。 @Lance 在上述基础上通过添加额外的 FlowDirection 提示 (Link to Solution from Lance below) 提供了一个完整的解决方案，并且为好奇的 punker76 提供了一个完整的自定义控件。

要解决复选标记字形的翻转，请参阅：***.com/questions/24217199/…

【参考方案7】：

在代码中：

System.Windows.Controls.CheckBox checkBox = new System.Windows.Controls.CheckBox();
checkBox.Content = ":CheckBox Enabled";
checkBox.FlowDirection = System.Windows.FlowDirection.RightToLeft;

在 XAML 中：

<CheckBox FlowDirection="RightToLeft" Content=":CheckBox Enabled" />

编辑

用户 punker76 帮助我注意到冒号“:”必须位于文本的 infront 位置才能正确显示，最后（“CheckBox Enabled:”） ，可能是由于流向对文本元素的影响造成的。不错的收获。

【讨论】：

这有一个问题：你的刻度线被水平翻转，至少在实现为笔画数组时是这样。这是因为组成 CheckBox 的所有组件都继承了 FlowDirection 属性。解决方案在这里解释：link

@punker76 同样的问题导致“:ABC”显示为“ABC:”。将 ContentPresenter 的 FlowDirection 设置为 LeftToRight 可使文本按预期从左到右脚本显示。

【参考方案8】：

您可以编辑复选框模板，在那里可以将文本块放在矩形前面