如何在UWP中的多选择列表视图中样式复选框

Question

在UWP AM中使用具有项目模板的多选列表视图，例如：

    <ListView 
        ItemsSource="{x:Bind ItemsSource, Mode=OneWay}" 
        ItemTemplate="{x:Bind LineTemplate, Mode=OneWay}"
        SelectionMode="Multiple"
        >
    </ListView>

问题是UWP添加的复选框的样式。在我的程序的其余部分中，我都有自己的复选框样式，而ListView中的样式不匹配。

我看不到任何样式的复选框，我看不到ListViewItem模板中的ListViewItemPresenter周围的任何代码。

也许我可以设置isMultiselectCheckBoxEnabled =" false"，然后在ListViewItem中包含我自己的复选框。我看到如何将复选框添加到ListViewItem样式中的模板中：我可以将其放在ListViewItemPresenter之前（使用，例如水平stackpanel）。然后，我可以绑定iSChecked =" {templateBinding Isselected}"。

但是，如果我这样做，那么我会得到" listViewItemPresenter只能用作ListViewItem模板中的第一个孩子"。

是否有或多或少简单的方法可以做到这一点？

- SJB

P.S。显然，ListViewItemPresenter非常特别...我的印象是它内置了很多优化，这不应该只是扔掉。

Answer 1

您必须修改ItemContainerStyle。尽管如果您尝试使用Visual Studio工具进行修改，但您只能访问它的有限版本，类似的内容：

<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Padding" Value="12,0,12,0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" ContentMargin="{TemplateBinding Padding}" CheckMode="Inline" ContentTransitions="{TemplateBinding ContentTransitions}" CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" SelectionCheckMarkVisualEnabled="True" SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

要完全控制ListViewItem容器，您需要使用另一个模板，例如：

<!-- Style for Windows.UI.Xaml.Controls.ListViewItem -->
<Style TargetType="ListViewItem" x:Key="ListViewItemExpanded">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="12,0,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="ListViewItem">
      <Grid x:Name="ContentBorder"
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal">
          <Storyboard>
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="BorderBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Pressed">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="BorderBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <PointerDownThemeAnimation TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Selected">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:0"
                             To="1"/>
            <DoubleAnimation Storyboard.TargetName="BorderBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="PointerOverSelected">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:0"
                             To="1"/>
            <DoubleAnimation Storyboard.TargetName="BorderBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="PressedSelected">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:0"
                             To="1"/>
            <DoubleAnimation Storyboard.TargetName="BorderBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <PointerDownThemeAnimation TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="DisabledStates">
        <VisualState x:Name="Enabled"/>
        <VisualState x:Name="Disabled">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="ContentBorder"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="{ThemeResource ListViewItemDisabledThemeOpacity}"/>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="MultiSelectStates">
        <VisualState x:Name="MultiSelectDisabled">
          <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheckBoxTransform"
                                            Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="-32" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectClipTransform"
                                           Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="32" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterTranslateTransform"
                                           Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="32"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
              <DiscreteObjectKeyFrame KeyTime="0:0:0.333" Value="Collapsed" />
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="MultiSelectEnabled">
          <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheckBoxTransform"
                                            Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-32"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectClipTransform"
                                           Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="32"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterTranslateTransform"
                                           Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-32"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheck" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterGrid" Storyboard.TargetProperty="Margin">
              <DiscreteObjectKeyFrame KeyTime="0" Value="32,0,0,0" />
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="DataVirtualizationStates">
        <VisualState x:Name="DataAvailable"/>
        <VisualState x:Name="DataPlaceholder">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="ReorderHintStates">
        <VisualState x:Name="NoReorderHint"/>
        <VisualState x:Name="BottomReorderHint">
          <Storyboard>
            <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Bottom" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="TopReorderHint">
          <Storyboard>
            <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Top" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="RightReorderHint">
          <Storyboard>
            <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Right" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="LeftReorderHint">
          <Storyboard>
            <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Left" />
          </Storyboard>
        </VisualState>
        <VisualStateGroup.Transitions>
          <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2"/>
        </VisualStateGroup.Transitions>
      </VisualStateGroup>
      <VisualStateGroup x:Name="DragStates">
        <VisualState x:Name="NotDragging" />
        <VisualState x:Name="Dragging">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="ContentBorder"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="{ThemeResource ListViewItemDragThemeOpacity}" />
            <DragItemThemeAnimation TargetName="ContentBorder" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="DraggingTarget">
          <Storyboard>
            <DropTargetItemThemeAnimation TargetName="ContentBorder" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="MultipleDraggingPrimary">
          <Storyboard>
            <!-- These two Opacity animations are required - the FadeInThemeAnimations
                                     on the same elements animate an internal Opacity. -->
            <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1" />
            <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayText"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1" />
            <DoubleAnimation Storyboard.TargetName="ContentBorder"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="{ThemeResource ListViewItemDragThemeOpacity}" />
            <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
            <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
            <DragItemThemeAnimation TargetName="ContentBorder" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="MultipleDraggingSecondary">
          <Storyboard>
            <FadeOutThemeAnimation TargetName="ContentBorder" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="DraggedPlaceholder">
          <Storyboard>
            <FadeOutThemeAnimation TargetName="ContentBorder" />
          </Storyboard>
        </VisualState>
        <VisualStateGroup.Transitions>
          <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
        </VisualStateGroup.Transitions>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Rectangle x:Name="BorderBackground"
                IsHitTestVisible="False"
                Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                Opacity="0"
                Control.IsTemplateFocusTarget="True"/>
    <Grid x:Name="ContentPresenterGrid"
          Background="Transparent"
          Margin="0,0,0,0">
      <Grid.RenderTransform>
        <TranslateTransform x:Name="ContentPresenterTranslateTransform"/>
      </Grid.RenderTransform>
      <ContentPresenter x:Name="ContentPresenter"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Content="{TemplateBinding Content}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Margin="{TemplateBinding Padding}"/>
    </Grid>
    <!-- The 'Xg' text simulates the amount of space one line of text will occupy.
                      In the DataPlaceholder state, the Content is not loaded yet so we
                      approximate the size of the item using placeholder text. -->
    <TextBlock x:Name="PlaceholderTextBlock"
                Opacity="0"
                Text="Xg"
                Foreground="{x:Null}"
                Margin="{TemplateBinding Padding}"
                IsHitTestVisible="False"
                AutomationProperties.AccessibilityView="Raw"/>
    <Rectangle x:Name="PlaceholderRect"
                Visibility="Collapsed"
                Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"/>
    <Rectangle x:Name="MultiArrangeOverlayBackground"
                IsHitTestVisible="False"
                Opacity="0"
                Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                Grid.ColumnSpan="2"/>
    <Border x:Name="MultiSelectSquare"
            BorderBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
            BorderThickness="2"
            Width="20"
            Height="20"
            Margin="12,0,0,0"
            VerticalAlignment="Center"
            HorizontalAlignment="Left"
            Visibility="Collapsed" >
      <Border.Clip>
        <RectangleGeometry Rect="0,0,20,20">
          <RectangleGeometry.Transform>
            <TranslateTransform x:Name="MultiSelectClipTransform"/>
          </RectangleGeometry.Transform>
        </RectangleGeometry>
      </Border.Clip>
      <Border.RenderTransform>
        <TranslateTransform x:Name="MultiSelectCheckBoxTransform"/>
      </Border.RenderTransform>
      <FontIcon x:Name="MultiSelectCheck"
                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                Glyph="&#xE73E;"
                FontSize="16"
                Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                Visibility="Collapsed"
                Opacity="0"/>
    </Border>
    <TextBlock x:Name="MultiArrangeOverlayText"
                Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
                Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                FontSize="26.667"
                IsHitTestVisible="False"
                Opacity="0"
                TextWrapping="Wrap"
                TextTrimming="WordEllipsis"
                Margin="18,9,0,0"
                AutomationProperties.AccessibilityView="Raw"
                Grid.ColumnSpan="2"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
</Style>

在那里您可以看到负责复选框外观的MultiSelectCheck图标，您可以尝试对其进行修改和相关的视觉状态，以使您的应用程序的样式更多。

注意，在某些情况下，使用此扩展模板可能会损害列表视图的性能。您应该阅读此文章，以更好地了解ListView的性能。