c# - 更改列表框中复选框的颜色

Question

我有一个带复选框的列表框。这就是我构建它的方式：

<Style x:Key="_ListBoxItemStyleCheckBox" TargetType="ListBoxItem">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <CheckBox Name="_Border" Margin="5,2" IsChecked="{TemplateBinding IsSelected}">
                            <ContentPresenter />
                        </CheckBox>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

这是我的列表框：

      <ListBox
           VerticalAlignment="Stretch"
           ItemsSource="{Binding Items}"
           SelectionMode="Multiple"
           ItemContainerStyle="{StaticResource _ListBoxItemStyleCheckBox}">

                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
      </ListBox>

当我将鼠标悬停在复选框上时，我得到默认颜色（蓝色）。我怎样才能改变这种颜色？我不想改变文本的颜色。只有复选框的边框颜色。

感谢您的任何帮助！

标签： c#wpfxamlstyling

Answer 1

您应该创建模板。

• 复选框模板示例

<Style TargetType="{x:Type CheckBox}" x:Key="chb">
            <Setter Property="Margin" Value="5 2 5 2"/>
            <Setter Property="IsChecked" Value="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsSelected}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border x:Name="border"
                                    Grid.Column="0"
                                    Width="20"
                                    Height="20"
                                    Background="Transparent"
                                    BorderBrush="Black"
                                    BorderThickness="2">
                                <Viewbox x:Name="view" 
                                         Width="22" 
                                         Height="22" 
                                         Visibility="Collapsed"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center">
                                    <Canvas Width="24" Height="24">
                                        <Path Data="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" Fill="#333333"/>
                                    </Canvas>
                                </Viewbox>
                            </Border>
                            <TextBlock Grid.Column="1" 
                                       Text="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=Content}"
                                       Margin="5 0 0 0"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="Red"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="view" Property="Visibility" Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

• 使用连接StaticResource

<Style x:Key="_ListBoxItemStyleCheckBox" TargetType="ListBoxItem">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <CheckBox Name="_Border" Style="{StaticResource chb}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

它将像这样显示。

我Path在“Material Design Icons”的 CheckBox 中带来了 SVG 数据。
https://materialdesignicons.com/