Windows 8.1 Auswahlmodus in gridview

Question

In einer Windows Store App habe ich eine GridView in XAML. Ich habe die SelectionMode="Extended" eingestellt und ich kann Elemente ohne irgendein Problem auswählen. Ich möchte jedoch den Auswahlmodus von Windows 8.1 erreichen. In der Touch-Version von Windows 8.1, wenn Sie einen Finger auf einen Gegenstand im Startbildschirm halten, geht der gesamte Bildschirm in einen "Management-Modus" über, in dem Sie auf einen Gegenstand tippen, ihn irgendwo auf dem Bildschirm oder schnell auf Gegenstände tippen wird alle abwählen und auf eine beliebige Stelle tippen, wenn nichts ausgewählt ist, verlässt diesen Modus. Hier ist ein Bild von diesem Modus:

ich so etwas wie dies erreichen kann, wenn ich versuche, es mir selbst zu implementieren. Ich frage mich jedoch, ob es da draußen schon so etwas gibt.

Answer 1

Sie können Standardstile verwenden, die von Microsoft für Listview mit einigen Optimierungen zur Verfügung gestellt werden, um ausgewählte Objekte im Hintergrund zu erhalten. Aufgrund der Speicherplatzbeschränkung schließe ich Änderungen an der ursprünglichen ListViewItem-Stil für die Referenz bereit:

<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

Sie können so etwas selbst erreichen, ich weiß, weil ich es für eine App tun musste, die ich für einen Kunden schrieb.

Was ich habe funktioniert, aber ist nicht sehr elegant. Vielleicht könnte ich es auf GitHub aufsetzen und dann können andere die Ecken und Kanten korrigieren und es eleganter machen.

Wenn Sie nicht darauf warten können, dann kann ich Ihnen zumindest in die richtige Richtung zeigen.

beginnen mit: http://www.codeproject.com/Articles/536519/Extending-GridView-with-Drag-and-Drop-for-Grouping

, dass ein guter Start ist per Drag & Drop bekommen innerhalb von Gruppen zu arbeiten und neue Gruppen zu schaffen.

Sie müssen einige ContainerStyles sowohl für die Gruppe und die Elemente als auch für die Header-Stile anpassen.

Die Implementierung, die ich habe, wurde nicht geschrieben, um wieder verwendet zu werden, so dass es etwas mit meiner App gekoppelt ist. Das Entkoppeln und das Einsetzen in ein Steuerelement, das von anderen wiederverwendet werden kann, dauert einige Zeit.

Wenn Sie damit zu kämpfen haben, dann ist es vielleicht zeitgemäßer, wenn ich Ihnen Code-Snippets für die Stile und einen Teil des Codes zusende.