Texte sur le côté gauche de la case à cocher dans WPF?

Quelle est la meilleure façon de mettre case de contenu (texte) sur le côté gauche de la case elle-même?

42
demandé sur user2771704 2013-07-04 12:49:06

8 réponses

une solution qui maximise la "facilité" et la "justesse" est de faire un RightToLeft case à cocher avec LeftToRight contenu:

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

Ou si vous souhaitez un style:

<Style TargetType="CheckBox">
    <Setter Property="FlowDirection" Value="RightToLeft" />
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <ContentControl FlowDirection="LeftToRight" Content="{Binding}" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>
73
répondu nmclean 2014-02-13 20:52:55

EN code:

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

In XAML:

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

EDIT

Utilisateur punker76 m'a aidé à remarquer que deux points": "doit être des endroits face du texte à afficher correctement, à la fin ("case à cocher activée:"), probablement causé par une direction de flux affect sur l'élément de texte. Belle prise.

25
répondu Ivan Peric 2014-01-03 10:55:58

une Autre façon est de faire un nouveau style personnalisé

<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>

utilisation:

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

enter image description here

espérons que cela aide!

16
répondu punker76 2014-11-18 19:34:53

une autre solution, pour éviter les problèmes subtils discutés ci-dessus avec la direction du flux et la grande quantité de code lors de la définition d'un style de case à cocher entièrement nouveau, est d'utiliser simplement un WrapPanel contenant une étiquette (avec la chaîne de contenu de case à cocher désirée) et une case à cocher (sans chaîne de contenu).

<WrapPanel>
    <Label Content="Checkbox content"/>
    <CheckBox VerticalAlignment="Center" Margin="5,0,0,0"/>
</WrapPanel>
13
répondu Bill Foster 2015-01-29 19:19:45

j'ai passé deux heures, mais j'ai trouvé la meilleure décision

    <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>
11
répondu Lance 2015-07-27 09:19:22

le plus simple est d'utiliser une pile de panneau:

            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Some Text"/>
                <CheckBox  />
            </StackPanel>
3
répondu John 2015-03-05 14:43:15

je sais que ça fait longtemps et que je suis en retard. Mais après avoir parcouru plusieurs réponses compliquées et cherché beaucoup sur internet, j'ai finalement trouvé le moyen le plus simple d'y parvenir sans déformer la tique de ici.

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

Résultat:

enter image description here

2
répondu Akshatha 2017-09-25 03:01:08

vous pouvez éditer le modèle de case à cocher et là-bas vous pouvez placer le texte en avant du rectangle

0
répondu Arushi Agrawal 2013-07-04 11:27:08