Tryb wyboru systemu Windows 8.1 w widoku siatki

Question

W aplikacji sklepu Windows mam GridView w XAML. Ustawiłem SelectionMode="Extended" i mogę wybierać elementy bez żadnego problemu. Jednak chcę osiągnąć tryb wyboru systemu Windows 8.1. W wersji dotykowej systemu Windows 8.1, gdy trzymasz palec na przedmiocie na ekranie startowym, cały ekran przechodzi do jakiegoś "trybu zarządzania", w którym naciskanie elementu powoduje jego zaznaczenie, stuknięcie w dowolnym miejscu na ekranie lub szybkie umieszczenie elementów na ekranie odznaczy wszystkie i naciśnie w dowolnym miejscu, gdy nic nie zostanie wybrane, wychodzi z tego trybu. Oto zdjęcie tego trybu:

mogę osiągnąć coś takiego, gdy próbuję wdrożyć go samodzielnie. Zastanawiam się jednak, czy istnieje już coś takiego.

Answer 1

Można użyć domyślnych stylów udostępnianych przez firmę Microsoft do przeglądania list z kilkoma dodatkami, aby wybrane elementy były w niezmienionym stanie. Ze względu na limit miejsca uwzględniam zmiany wprowadzone w oryginalnym stylu ListViewItem w celu uzyskania gotowego numeru:

<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

Możesz osiągnąć coś takiego sam, wiem, ponieważ musiałem zrobić to dla aplikacji, którą pisałem dla klienta.

Co mam działa, ale nie jest zbyt eleganckie. Może mógłbym umieścić go na GitHub, a inni naprawią ostre krawędzie i sprawią, że będzie bardziej elegancki.

Jeśli nie możesz na to czekać, mogę przynajmniej wskazać ci właściwy kierunek.

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

To jest dobry początek, aby uzyskać przeciągnij i upuść pracy w grupach i tworzenia nowych grup.

Będziesz musiał wykonać pewne dostosowywanie właściwości ContainerStyles zarówno dla grupy i elementów, jak i dla stylów nagłówka.

Implementacja, którą mam, nie została napisana do ponownego wykorzystania, więc jest w pewnym stopniu powiązana z moją aplikacją. Oddzielenie go i umieszczenie go w formancie, który może zostać ponownie wykorzystany przez innych zajmie trochę czasu.

Jeśli zmagasz się z tym, to co może być bardziej aktualne, jeśli wyślę ci kilka fragmentów kodu dla stylów i trochę kodu.