网格视图中的 Windows 8.1 选择模式答案

【问题标题】：Windows 8.1 selection mode in gridview网格视图中的 Windows 8.1 选择模式
【发布时间】：2014-04-08 11:52:25
【问题描述】：

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

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

【问题讨论】：

不幸的是，我不相信这是内置功能。您可能必须实现自定义GridView。
如果你自己实现它，一个 github 链接会非常非常好。 ;)
@Dänu 我正在考虑。我认为在当前和这个实现之间做点什么就足够了。最后，我会在博客上介绍它，并在它准备好时将它放在 Github 上。

标签： c# gridview windows-runtime windows-store-apps winrt-xaml

【解决方案1】：

您可以使用 Microsoft 为列表视图提供的默认样式，只需稍作调整即可使所选项目保持原样。由于篇幅限制，我将包括对原始 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>

【讨论】：

谢谢。我没有对此进行测试，但会尽快进行。现在我选择它作为答案。

【解决方案2】：

您可以自己实现类似的目标，我知道，因为我必须为我为客户编写的应用程序这样做。

我有什么作品，但不是很优雅。也许我可以把它放在 GitHub 上，然后其他人可以修复粗糙的边缘并使其更优雅。

如果你等不及了，那么我至少可以为你指明正确的方向。

开头：http://www.codeproject.com/Articles/536519/Extending-GridView-with-Drag-and-Drop-for-Grouping

这是在组内进行拖放操作和创建新组的良好开端。

您需要对组和项目以及标题样式的 ContainerStyles 进行一些自定义。

我的实现并未被编写为可重复使用，因此它在某种程度上与我的应用程序耦合。将其解耦并放入可以被其他人重用的控件中需要一些时间。

如果您正在为此苦苦挣扎，那么更及时的方法是，如果我向您发送一些样式的代码 sn-ps 和一些代码。

【讨论】：