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?
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>
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.
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:" />
espérons que cela aide!
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>
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>
le plus simple est d'utiliser une pile de panneau:
<StackPanel Orientation="Horizontal">
<TextBlock Text="Some Text"/>
<CheckBox />
</StackPanel>
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:
vous pouvez éditer le modèle de case à cocher et là-bas vous pouvez placer le texte en avant du rectangle