Windows 8.1 selection mode in gridview

Question

In a Windows Store app, I have a GridView in XAML. I've set the SelectionMode="Extended" and I can select items without any kind of problem. However, I want to achieve Windows 8.1's selection mode. In Windows 8.1's touch version when you hold your finger on an item in Start Screen, the whole screen goes to some sort of "Management Mode" in which tapping on an item will select it, tapping anywhere on the screen or quickly on items will deselect all of them and tapping on anywhere when nothing is selected moves out of this mode. Here's a picture of that mode:

I can achieve something like this if I try to implement it myself. However I just wonder if there's already something like this out there.

Answer 1

You can use default styles provided by Microsoft for listview with few tweaks to make selected items background as is. Due to space limit, I'm including changes made on original ListViewItem style for ready reference:

    <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>