gridview中的Windows 8.1选择模式

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

Windows 8.1 selection mode

我能做到这样的事情，如果我试图实现它自己。不过，我只是想知道是否已经有这样的东西。

来源

2014-04-08 Alireza Noori

不幸的是，我不相信这是内置功能。你可能必须实现一个自定义的'GridView'。 –

如果你自己实现它，一个github链接将会非常非常好。 ;） –

@Dänu我在想它。我认为在当前和这个实施之间做一些事情就足够了。最后，我会将它发布到博客上，并在Github准备就绪时发布它。 –

您可以使用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>

来源

2015-02-24 03:46:06 Vishal

谢谢。我没有测试过，但会尽快。现在我选择它作为答案。 –

你可以自己做到这样的事情，我知道，因为我必须为我为客户写的应用程序做这件事。

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

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

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

这是一个良好的开端让拖放组内工作，并创建新的群组。

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

我的实现没有被写入重用，所以它有点耦合到我的应用程序。将其解耦并将其放入可供其他人重用的控件中需要一些时间。

如果您正在为此付出努力，那么如果我向您发送一些样式代码片段和一些代码，可能会更及时。

来源

2014-05-01 06:31:59 schnitty

gridview中的Windows 8.1选择模式

回答

相关问题