mercredi 27 septembre 2023

How to create a WPF CheckBox with a larger mark?

In a previous question, I tried to look for an already existing solution for creating a CheckBox with a larger mark, but that question got downvoted as a duplicate, which I don't understand.

So I went further, and found an intermediate solution, based on "triggerable" LinearGradients.

This is what I currently have:

    <UserControl.Resources>
        <Style x:Key="CustomCheckBoxStyle"
               TargetType="CheckBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40"/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>
                            <CheckBox IsChecked="{TemplateBinding IsChecked}"
                                      Content="{TemplateBinding Content}"
                                      Grid.Column="1"
                                      HorizontalAlignment="Stretch"
                                      VerticalAlignment="Stretch">
                             </CheckBox>
                            <Rectangle x:Name="checkBoxRectangle"
                                           HorizontalAlignment="Left"
                                           Width="40"
                                           Height="40">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
                                        <GradientStop Color="White" Offset="0.0" />
                                        <GradientStop Color="White" Offset="0.4" />
                                        <GradientStop Color="Black" Offset="0.4" />
                                        <GradientStop Color="Black" Offset="0.6" />
                                        <GradientStop Color="White" Offset="0.6" />
                                        <GradientStop Color="White" Offset="1.0" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>                                               
                            </Rectangle>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked"
                                     Value="True">
                                <Setter TargetName="checkBoxRectangle"
                                        Property="Fill"
                                        Value="Green"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
...
<CheckBox Style="{StaticResource CustomCheckBoxStyle}" 
          Grid.Row="1" Grid.Column="0" FontSize="26" Name="Chk_Something" 
          Content="Geladen?"
          HorizontalContentAlignment="Left"
          VerticalContentAlignment="Center">
</CheckBox>

... and it looks like this:

enter image description here

So, now the idea becomes:

  • How do I get rid of the small square, at the left side of the word?
  • How to I take the union of two LinearGradientBrushes? (I know that, by changing the start- and endpoint from (1,0) and (0,1) into (0,0) and (1,1), I get the black bar in the other direction, so a union of both would make a beautiful cross)
  • How can I use this as a value in the trigger's setter?

Of course, if you know an easier way to make a WPF CheckBox with a larger mark, don't hesitate informing me :-)




Aucun commentaire:

Enregistrer un commentaire