.net - 在 WPF 中应用主题时不显示 Listview 复选框

Question

嗨，我在应用主题 ThemeExpressionDark.xaml 时遇到复选框未显示在 Listview 中的问题。

我在 View 模型中有集合。这些集合项将与 ListView 中的复选框绑定(bind)。

我在 XAML 中的 ListView 代码是这样的。

 <ListView Background="Transparent" x:Name="checkedListView" SelectionMode="Multiple" ItemsSource="{Binding CollectionOfDays}" ItemTemplate="{StaticResource ItemDataTemplate}"       CheckBox.Unchecked="OnUncheckItem" SelectionChanged="SelectDays" SelectedItem="{Binding SelectedItems}">

我在 page.Resource 中使用的 Checkbox DataTemplate 和主题的 XAML 代码如下所示

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Skins/ThemeExpressionDark.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <Style x:Key="ListViewTransparentSelection_Both" TargetType="{x:Type ListViewItem}">
            <Style.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"  Color="Transparent"/>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"  Color="Transparent"/>
            </Style.Resources>
        </Style>
        <local:UriToBitmapConverter x:Key="UriToBitmapConverter" />    
        <DataTemplate x:Key="ItemDataTemplate">
            <CheckBox
        x:Name="checkbox" Foreground="Wheat" Content="{Binding}" Margin="10,0,0,0"
        Command="{Binding CheckBoxCommand}" CommandParameter="{Binding ElementName=checkedListView, Path=SelectedItems}" IsChecked="{Binding    RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}}, Path=IsSelected}" />
        </DataTemplate>            
    </ResourceDictionary>
</Page.Resources>

当我在 ListView 中执行此 XAML 代码集合复选框时未显示。请让我知道我使用的 DataTemplate 或 Theme 是否存在问题。

以下是我在 ThemeThemeExpressionDark.xaml 中与 Checkbox 相关的 XAML 代码。

<Style x:Key="{x:Static ToolBar.CheckBoxStyleKey}"
       TargetType="{x:Type CheckBox}">
  <Setter Property="FontSize"
          Value="10" />
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="FocusVisualStyle"
          Value="{DynamicResource CheckBoxFocusVisual}" />
  <Setter Property="Background"
          Value="{DynamicResource NormalBrush}" />
  <Setter Property="BorderBrush"
          Value="{DynamicResource NormalBorderBrush}" />
  <Setter Property="Template"
          Value="{DynamicResource CheckBoxTemplate}" />
  <Setter Property="Foreground"
          Value="{DynamicResource TextBrush}" />
</Style>
<Style TargetType="{x:Type CheckBox}">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="FocusVisualStyle"
          Value="{DynamicResource CheckBoxFocusVisual}" />
  <Setter Property="Background"
          Value="{DynamicResource NormalBrush}" />
  <Setter Property="Foreground"
          Value="{DynamicResource TextBrush}" />
  <Setter Property="BorderBrush"
          Value="{DynamicResource NormalBorderBrush}" />
  <Setter Property="Template"
          Value="{DynamicResource CheckBoxTemplate}" />
</Style>

<ControlTemplate x:Key="CheckBoxTemplate"
                 TargetType="{x:Type CheckBox}">
  <ControlTemplate.Resources>
    <Storyboard x:Key="HoverOn">
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                     Storyboard.TargetName="BackgroundOverlay"
                                     Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
                              Value="1" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="HoverOff">
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                     Storyboard.TargetName="BackgroundOverlay"
                                     Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.4000000"
                              Value="0" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="PressedOn">
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                     Storyboard.TargetName="PressedRectangle"
                                     Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
                              Value="1" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="PressedOff">
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                     Storyboard.TargetName="PressedRectangle"
                                     Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000"
                              Value="0" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="CheckedTrue">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon"
                                     Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
                              Value="1" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="CheckedFalse">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon"
                                     Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.4000000"
                              Value="0" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="IndeterminateOn">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateIcon"
                                     Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.2000000"
                              Value="1" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="IndeterminateOff">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateIcon"
                                     Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.4000000"
                              Value="0" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="FocussedOn">
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                     Storyboard.TargetName="ContentFocusVisualElement"
                                     Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
                              Value="1" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="FocussedOff">
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                     Storyboard.TargetName="ContentFocusVisualElement"
                                     Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000"
                              Value="0" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  </ControlTemplate.Resources>
  <BulletDecorator Background="Transparent"
                   x:Name="bulletDecorator">
    <BulletDecorator.Bullet>
      <Grid Width="16"
            Height="16">
        <Rectangle Height="14"
                   Margin="1"
                   x:Name="Background"
                   Width="14"
                   Fill="{TemplateBinding Background}"
                   Stroke="{TemplateBinding BorderBrush}"
                   StrokeThickness="{TemplateBinding BorderThickness}" />
        <Rectangle Height="14"
                   Margin="1"
                   x:Name="BackgroundOverlay"
                   Width="14"
                   Opacity="0"
                   Fill="{x:Null}"
                   Stroke="{StaticResource HoverBrush}"
                   StrokeThickness="2" />
        <Rectangle Height="16"
                   x:Name="PressedRectangle"
                   Width="16"
                   IsHitTestVisible="false"
                   Opacity="0"
                   Stroke="{StaticResource HoverBrush}"
                   StrokeThickness="1" />
        <Path Height="10"
              Margin="1,1,0,1.5"
              x:Name="CheckIcon"
              Width="10.5"
              Opacity="0"
              Fill="{StaticResource GlyphBrush}"
              Stretch="Fill"
              Data="M102.03442,598.79645 L105.22962,597.78918 L106.78825,600.42358 C106.78825,600.42358 108.51028,595.74304 110.21724,593.60419 C112.00967,591.35822 114.89314,591.42316 114.89314,591.42316 C114.89314,591.42316 112.67844,593.42645 111.93174,594.44464 C110.7449,596.06293 107.15683,604.13837 107.15683,604.13837 z" />
        <Rectangle Height="8"
                   x:Name="IndeterminateIcon"
                   Width="10"
                   Opacity="0"
                   Fill="{StaticResource GlyphBrush}" />
        <Rectangle Height="14"
                   x:Name="DisabledVisualElement"
                   Width="14"
                   Opacity="0"
                   Fill="{StaticResource DisabledBackgroundBrush}" />
        <Rectangle Height="16"
                   x:Name="ContentFocusVisualElement"
                   Width="16"
                   IsHitTestVisible="false"
                   Opacity="0"
                   Stroke="{StaticResource HoverShineBrush}"
                   StrokeThickness="1" />
        <Rectangle Height="12"
                   x:Name="ShineRectangle"
                   Width="14"
                   IsHitTestVisible="false"
                   Opacity="1"
                   Stroke="{x:Null}"
                   StrokeThickness="1"
                   Fill="{StaticResource ShineBrush}"
                   Margin="2,2,2,2" />
      </Grid>
    </BulletDecorator.Bullet>
    <ContentPresenter RecognizesAccessKey="True"
                      Margin="5,0,0,0"
                      VerticalAlignment="Top"
                      HorizontalAlignment="Left" />
  </BulletDecorator>
  <ControlTemplate.Triggers>
    <Trigger Property="IsFocused"
             Value="True">
      <Trigger.ExitActions>
        <BeginStoryboard Storyboard="{StaticResource FocussedOff}"
                         x:Name="FocussedOff_BeginStoryboard" />
      </Trigger.ExitActions>
      <Trigger.EnterActions>
        <BeginStoryboard Storyboard="{StaticResource FocussedOn}"
                         x:Name="FocussedOn_BeginStoryboard" />
      </Trigger.EnterActions>
    </Trigger>
    <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property="IsChecked"
                   Value="True" />
        <Condition Property="IsThreeState"
                   Value="True" />
      </MultiTrigger.Conditions>
      <MultiTrigger.EnterActions>
        <BeginStoryboard x:Name="ThreeStateOn_BeginStoryboard"
                         Storyboard="{StaticResource CheckedFalse}" />
      </MultiTrigger.EnterActions>
      <MultiTrigger.ExitActions>
        <BeginStoryboard x:Name="ThreeStateOff_BeginStoryboard"
                         Storyboard="{StaticResource CheckedTrue}" />
      </MultiTrigger.ExitActions>
    </MultiTrigger>
    <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property="IsChecked"
                   Value="{x:Null}" />
        <Condition Property="IsThreeState"
                   Value="True" />
      </MultiTrigger.Conditions>
      <MultiTrigger.EnterActions>
        <BeginStoryboard x:Name="ThreeStateOn1_BeginStoryboard"
                         Storyboard="{StaticResource IndeterminateOn}" />
      </MultiTrigger.EnterActions>
      <MultiTrigger.ExitActions>
        <BeginStoryboard x:Name="ThreeStateOff1_BeginStoryboard"
                         Storyboard="{StaticResource IndeterminateOff}" />
      </MultiTrigger.ExitActions>
      <Setter Property="Visibility"
              TargetName="CheckIcon"
              Value="Hidden" />
    </MultiTrigger>
    <Trigger Property="IsChecked"
             Value="True">
      <Trigger.ExitActions>
        <BeginStoryboard Storyboard="{StaticResource CheckedFalse}"
                         x:Name="CheckedTrue_BeginStoryboard" />
      </Trigger.ExitActions>
      <Trigger.EnterActions>
        <BeginStoryboard x:Name="CheckedTrue_BeginStoryboard1"
                         Storyboard="{StaticResource CheckedTrue}" />
      </Trigger.EnterActions>
    </Trigger>
    <Trigger Property="IsMouseOver"
             Value="true">
      <Trigger.EnterActions>
        <BeginStoryboard Storyboard="{StaticResource HoverOn}" />
      </Trigger.EnterActions>
      <Trigger.ExitActions>
        <BeginStoryboard Storyboard="{StaticResource HoverOff}" />
      </Trigger.ExitActions>
    </Trigger>
    <Trigger Property="IsEnabled"
             Value="false">
      <Setter Property="Fill"
              Value="{DynamicResource DisabledBackgroundBrush}"
              TargetName="Background" />
      <Setter Property="Stroke"
              Value="{DynamicResource DisabledBorderBrush}"
              TargetName="Background" />
      <Setter Property="Foreground"
              Value="{DynamicResource DisabledForegroundBrush}" />
      <Setter Property="Opacity"
              TargetName="bulletDecorator"
              Value="0.5" />
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

Answer 1

如果您所指的主题与我过去使用的主题相同，那么请查看下面的 CheckBox 控件模板。特别注意SolidColorBrush在以下标签内。

<Border.BorderBrush>
    <SolidColorBrush Color="{DynamicResource BlackColor}" />
</Border.BorderBrush>

您主题中的画笔可能设置为与您的背景融为一体的颜色。因为这会使边框不可见，所以复选框也将显得不可见。尝试将该边框画笔设置为不同的颜色。我已将我的设置为 BlackColor，它与主题中的所有其他边框相匹配。

<ControlTemplate x:Key="NuclearCheckBox"  TargetType="{x:Type CheckBox}">
    <BulletDecorator Background="Transparent" x:Name="bulletDecorator">
        <BulletDecorator.Bullet>
            <Grid Width="13" Height="13">
                <Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,0,0,0" Background="{DynamicResource LightBrush}">
                    <Border.BorderBrush>
                        <SolidColorBrush Color="{DynamicResource BlueBorderColor}" />
                    </Border.BorderBrush>
                    <Rectangle Visibility="Hidden" Fill="{DynamicResource GlyphBrush}" x:Name="rectangle" Margin="1,1,1,1" />
                </Border>
                <Path Stretch="Fill" Stroke="{DynamicResource GlyphBrush}" StrokeThickness="2" x:Name="path" Width="Auto" Data="M1.0924787,5.372821 L3.1785986,10.519821 10.528543,2.5198207" Margin="1.577,0.134,-0.013,2.866" />
            </Grid>
        </BulletDecorator.Bullet>
        <ContentPresenter RecognizesAccessKey="True" Margin="5,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" />
    </BulletDecorator>
    <ControlTemplate.Triggers>
    </ControlTemplate.Triggers>
</ControlTemplate>