Modalità di selezione di Windows 8.1 in griglia

Question

In un'app di Windows Store, ho un GridView in XAML. Ho impostato il SelectionMode="Extended" e posso selezionare elementi senza alcun tipo di problema. Tuttavia, voglio ottenere la modalità di selezione di Windows 8.1. Nella versione touch di Windows 8.1 quando si tiene il dito su un elemento nella schermata Start, l'intero schermo passa a una sorta di "Modalità di gestione" in cui toccando un elemento si selezionerà, toccando in qualsiasi punto dello schermo o rapidamente sugli elementi deselezionerà tutti loro e toccando ovunque quando nulla è selezionato esce da questa modalità. Ecco una foto di quel modo:

posso realizzare qualcosa di simile se provo per la sua attuazione me stesso. Comunque mi chiedo se c'è già qualcosa di simile là fuori.

Answer 1

È possibile utilizzare gli stili predefiniti forniti da Microsoft per la visualizzazione elenco con alcune modifiche per rendere lo sfondo degli elementi selezionati così com'è. A causa del limite di spazio, sto includendo le modifiche apportate allo stile ListViewItem originale per riferimento immediato:

<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

È possibile ottenere qualcosa del genere da soli, lo so perché dovevo farlo per un'app che stavo scrivendo per un cliente.

Quello che ho funziona, ma non è molto elegante. Forse potrei metterlo su GitHub e poi gli altri possono aggiustare i bordi grezzi e renderlo più elegante.

Se non riesci ad aspettare, allora posso almeno indirizzarti nella giusta direzione.

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

Questo è un buon inizio per ottenere il drag and drop di lavoro all'interno di gruppi e la creazione di nuovi gruppi.

Sarà necessario personalizzare alcuni ContainerStyles sia per il gruppo che per gli elementi, nonché per gli stili di intestazione.

L'implementazione che ho non è stata scritta per essere riutilizzata in modo che sia in qualche modo accoppiata alla mia app. Scollegarlo e metterlo in un controllo che può essere riutilizzato da altri richiederà del tempo.

Se si è in difficoltà con esso, ciò che potrebbe essere più tempestivo è se si invia alcuni snippet di codice per gli stili e alcuni del codice.