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>

Answer 2

You can achieve something like that yourself, I know because I had to do it for an app I was writing for a client.

What I have works, but is not very elegant. Maybe I could put it up on GitHub and then others can fix the rough edges and make it more elegant.

If you can't wait for that then I can at least point you in the right direction.

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

That is a good start to get drag and drop working within groups and creating new groups.

You will need to do some customising of the ContainerStyles for both the group and items as well as the header styles.

The implementation I have hasn't been written to be re-used so it somewhat coupled to my app. Decoupling it and putting it into a control that can be reused by others will take some time.

If you are struggling with it then what might be more timely is if I send you some code snippets for the styles and some of the code.