c# - gridview 中的 Windows 8.1 选择模式

Question

在 Windows 应用商店应用程序中，我有一个 XAML 格式的 GridView。我已经设置了 SelectionMode="Extended" 并且我可以毫无问题地选择项目。但是，我想实现Windows 8.1的选择模式。在 Windows 8.1 的触摸版本中，当您将手指放在“开始”屏幕中的某个项目上时，整个屏幕会进入某种“管理模式”，在该模式下，点击某个项目将选中它，点击屏幕上的任意位置或快速点击项目将取消选择所有这些并在未选择任何内容时点击任何地方退出此模式。这是该模式的图片:

如果我尝试自己实现它，我可以实现这样的目标。但是我只是想知道是否已经有这样的东西了。

Answer 1

您可以使用 Microsoft 为 ListView 提供的默认样式，只需进行一些调整即可使所选项目按原样作为背景。由于空间限制，我包含了对原始 ListViewItem 样式所做的更改以供引用:

    <VisualState x:Name="Selecting">
<Storyboard>
    <DoubleAnimation Storyboard.TargetName="SelectionBackground"
                 Storyboard.TargetProperty="Opacity"
                 Duration="0"
                 To="0" />
    <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                 Storyboard.TargetProperty="Opacity"
                 Duration="0"
                 To="1" />
    <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
                 Storyboard.TargetProperty="Opacity"
                 Duration="0"
                 To="1" />
    <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
                 Storyboard.TargetProperty="Opacity"
                 Duration="0"
                 To="1" />
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                               Storyboard.TargetProperty="Foreground">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
    </ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
    <DoubleAnimation Storyboard.TargetName="SelectionBackground"
                 Storyboard.TargetProperty="Opacity"
                 Duration="0"
                 To="0" />
    <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                 Storyboard.TargetProperty="Opacity"
                 Duration="0"
                 To="1" />
    <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
                 Storyboard.TargetProperty="Opacity"
                 Duration="0"
                 To="1" />
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
                               Storyboard.TargetProperty="Foreground">
        <DiscreteObjectKeyFrame KeyTime="0" Value="White" />
    </ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

    <Border x:Name="ContentContainer">
<Grid x:Name="InnerDragContent">
<Rectangle x:Name="PointerOverBorder"
IsHitTestVisible="False"
Opacity="0"
Fill="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" 
Margin="1" />
<Rectangle x:Name="FocusVisual"
IsHitTestVisible="False"
Opacity="0"
StrokeThickness="2"
Stroke="{ThemeResource ListViewItemFocusBorderThemeBrush}" />
<Rectangle x:Name="SelectionBackground"
Margin="4"
Fill="White"
Opacity="0" />
<Border x:Name="ContentBorder"
Background="White"
BorderBrush="Blue"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="4">
<Grid>
<ContentPresenter x:Name="contentPresenter"
      ContentTransitions="{TemplateBinding ContentTransitions}"
      ContentTemplate="{TemplateBinding ContentTemplate}"
      Content="{TemplateBinding Content}"
      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
      Margin="{TemplateBinding Padding}" />
<!-- 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>
</Border>
<Rectangle x:Name="SelectedBorder"
IsHitTestVisible="False"
Opacity="0"
Stroke="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
StrokeThickness="{ThemeResource ListViewItemSelectedBorderThemeThickness}"
Margin="4" />
<Border x:Name="SelectedCheckMarkOuter"
IsHitTestVisible="False"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="4">
<Grid x:Name="SelectedCheckMark" Opacity="0" Height="40" Width="40">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z"  Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
<Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
</Grid>
</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>
</Border>