Question

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

Windows 8.1 selection mode

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

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>

Answer 2

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

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

如果你不能等待，那我至少可以指出你正确的方向。

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

这是在群组中拖放工作并创建新群组的良好开端。

您需要为组和项目以及标题样式自定义ContainerStyles。

我的编写实现还没有被重新使用，所以它有点与我的应用程序相关联。将它解耦并将其置于可被其他人重用的控件中需要一些时间。

如果您正在努力解决这个问题，那么可能更为及时的是，如果我向您发送一些代码片段以及某些代码。

gridview中的Windows 8.1选择模式

2 个答案: