更改列表框内复选框的颜色

Change the color of a Checkbox inside Listbox

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

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

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

感谢您的帮助!

Css 帮助你做到这一点,例如

ListBox tr.rowHover:hover
{
       background-color: Yellow;
}
<asp ..... rowstyle-cssclass="rowHover" ...../>
 <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}">
                        <CheckBox.Resources>
                            <Style TargetType="{x:Type CheckBox}">
                                <Setter Property="BorderBrush" Value="LightGray" />
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="BorderBrush" Value="Gray" />
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </CheckBox.Resources>
                        <ContentPresenter />
                    </CheckBox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

您应该创建模板。

  • 复选框模板示例
<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>

会这样显示

并且我在 'Material Design Icons' 处的 CheckBox 中引入了 Path SVG 数据。
https://materialdesignicons.com/