XAML 如何创建一个带有较大标记的WPF复选框？

kcugc4gi  于 2023-09-28  发布在  其他
关注(0)|答案(1)|浏览(101)

在a previous question中，我试图寻找一个已经存在的解决方案来创建一个带有更大标记的CheckBox，但是这个问题被认为是重复的，我不明白。
所以我更进一步，找到了一个基于“可触发”LinearGradient s的中间解决方案。
这就是我目前所拥有的：

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

它看起来像这样：

所以，现在的想法变成：

  • 我怎么才能去掉单词左边的小方块呢？
  • 如何取两个LinearGradientBrush的并集？（我知道，通过将起点和终点从(1,0)和(0,1)更改为(0,0)和(1,1)，我得到了另一个方向的黑条，所以两者的结合将形成一个美丽的十字架）
  • 我如何在触发器的setter中使用它作为一个值？

当然，如果你知道一个更简单的方法来使WPF CheckBox具有更大的标记，不要犹豫通知我：-）

xaml

1条答案

按热度按时间
okxuctiv

okxuctiv1#

下面你会找到解决方案：
我打开一个复选框样式，并与第一列绑定，其中复选框位于标签属性，从那里你可以控制宽度。

<Window.Resources>
    <Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2"
                               StrokeDashArray="1 2"
                               Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                               SnapsToDevicePixels="true"
                               StrokeThickness="1" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="OptionMarkFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="14,0,0,0"
                               StrokeDashArray="1 2"
                               Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                               SnapsToDevicePixels="true"
                               StrokeThickness="1" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="OptionMark.Static.Background"
                     Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="OptionMark.Static.Border"
                     Color="#FF707070" />
    <SolidColorBrush x:Key="OptionMark.Static.Glyph"
                     Color="#FF212121" />
    <SolidColorBrush x:Key="OptionMark.MouseOver.Background"
                     Color="#FFF3F9FF" />
    <SolidColorBrush x:Key="OptionMark.MouseOver.Border"
                     Color="#FF5593FF" />
    <SolidColorBrush x:Key="OptionMark.MouseOver.Glyph"
                     Color="#FF212121" />
    <SolidColorBrush x:Key="OptionMark.Pressed.Background"
                     Color="#FFD9ECFF" />
    <SolidColorBrush x:Key="OptionMark.Pressed.Border"
                     Color="#FF3C77DD" />
    <SolidColorBrush x:Key="OptionMark.Pressed.Glyph"
                     Color="#FF212121" />
    <SolidColorBrush x:Key="OptionMark.Disabled.Background"
                     Color="#FFE6E6E6" />
    <SolidColorBrush x:Key="OptionMark.Disabled.Border"
                     Color="#FFBCBCBC" />
    <SolidColorBrush x:Key="OptionMark.Disabled.Glyph"
                     Color="#FF707070" />
    <Style x:Key="CheckBoxStyle1"
           TargetType="{x:Type CheckBox}">
        <Setter Property="FocusVisualStyle"
                Value="{StaticResource FocusVisual}" />
        <Setter Property="Background"
                Value="{StaticResource OptionMark.Static.Background}" />
        <Setter Property="BorderBrush"
                Value="{StaticResource OptionMark.Static.Border}" />
        <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <Grid x:Name="templateRoot"
                          Background="Transparent"
                          SnapsToDevicePixels="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"  MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent} , Path=Tag}"/>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Border x:Name="checkBoxBorder"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Margin="1"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid x:Name="markGrid">
                                <Path x:Name="optionMark"
                                      Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z "
                                      Fill="{StaticResource OptionMark.Static.Glyph}"
                                      Margin="1"
                                      Opacity="0"
                                      Stretch="Uniform" />
                                <Rectangle x:Name="indeterminateMark"
                                           Fill="{StaticResource OptionMark.Static.Glyph}"
                                           Margin="2"
                                           VerticalAlignment="Top"
                                           Opacity="0" />
                            </Grid>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter"
                                          Grid.Column="1"
                                          Focusable="False"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          Margin="{TemplateBinding Padding}"
                                          RecognizesAccessKey="True"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasContent"
                                 Value="true">
                            <Setter Property="FocusVisualStyle"
                                    Value="{StaticResource OptionMarkFocusVisual}" />
                            <Setter Property="Padding"
                                    Value="4,-1,0,0" />
                        </Trigger>
                        <Trigger Property="IsMouseOver"
                                 Value="true">
                            <Setter Property="Background"
                                    TargetName="checkBoxBorder"
                                    Value="{StaticResource OptionMark.MouseOver.Background}" />
                            <Setter Property="BorderBrush"
                                    TargetName="checkBoxBorder"
                                    Value="{StaticResource OptionMark.MouseOver.Border}" />
                            <Setter Property="Fill"
                                    TargetName="optionMark"
                                    Value="{StaticResource OptionMark.MouseOver.Glyph}" />
                            <Setter Property="Fill"
                                    TargetName="indeterminateMark"
                                    Value="{StaticResource OptionMark.MouseOver.Glyph}" />
                        </Trigger>
                        <Trigger Property="IsEnabled"
                                 Value="false">
                            <Setter Property="Background"
                                    TargetName="checkBoxBorder"
                                    Value="{StaticResource OptionMark.Disabled.Background}" />
                            <Setter Property="BorderBrush"
                                    TargetName="checkBoxBorder"
                                    Value="{StaticResource OptionMark.Disabled.Border}" />
                            <Setter Property="Fill"
                                    TargetName="optionMark"
                                    Value="{StaticResource OptionMark.Disabled.Glyph}" />
                            <Setter Property="Fill"
                                    TargetName="indeterminateMark"
                                    Value="{StaticResource OptionMark.Disabled.Glyph}" />
                        </Trigger>
                        <Trigger Property="IsPressed"
                                 Value="true">
                            <Setter Property="Background"
                                    TargetName="checkBoxBorder"
                                    Value="{StaticResource OptionMark.Pressed.Background}" />
                            <Setter Property="BorderBrush"
                                    TargetName="checkBoxBorder"
                                    Value="{StaticResource OptionMark.Pressed.Border}" />
                            <Setter Property="Fill"
                                    TargetName="optionMark"
                                    Value="{StaticResource OptionMark.Pressed.Glyph}" />
                            <Setter Property="Fill"
                                    TargetName="indeterminateMark"
                                    Value="{StaticResource OptionMark.Pressed.Glyph}" />
                        </Trigger>
                        <Trigger Property="IsChecked"
                                 Value="true">
                            <Setter Property="Opacity"
                                    TargetName="optionMark"
                                    Value="1" />
                            <Setter Property="Opacity"
                                    TargetName="indeterminateMark"
                                    Value="0" />
                        </Trigger>
                        <Trigger Property="IsChecked"
                                 Value="{x:Null}">
                            <Setter Property="Opacity"
                                    TargetName="optionMark"
                                    Value="0" />
                            <Setter Property="Opacity"
                                    TargetName="indeterminateMark"
                                    Value="1" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

  <CheckBox Style="{DynamicResource CheckBoxStyle1}"
          Content="Geladen?"
          Tag="100"
          HorizontalContentAlignment="Stretch"
          VerticalContentAlignment="Stretch" />
赞(0）分享  回复(0）举报  2023-09-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com