gridview中的Windows 8.1選擇模式

在Windows應用商店應用中，我在XAML中有一個GridView。我已經設置了SelectionMode="Extended"，我可以選擇沒有任何問題的項目。但是，我想實現Windows 8.1的選擇模式。在Windows 8.1的觸摸版本中，當您將手指放在開始屏幕中的某個項目上時，整個屏幕會進入某種「管理模式」，在該模式下點擊某個項目將選中它，在屏幕上的任意位置點擊或快速點擊項目將取消選擇所有這些選項，並在沒有選擇任何內容的任何地方點擊此模式。下面是模式的一個畫面：gridview中的Windows 8.1選擇模式

Windows 8.1 selection mode

我能做到這樣的事情，如果我試圖實現它自己。不過，我只是想知道是否已經有這樣的東西。

來源

2014-04-08 Alireza Noori

不幸的是，我不相信這是內置功能。你可能必須實現一個自定義的'GridView'。 –

如果你自己實現它，一個github鏈接將會非常非常好。 ;） –

@Dänu我在想它。我認爲在當前和這個實施之間做一些事情就足夠了。最後，我會將它發佈到博客上，並在Github準備就緒時發佈它。 –

您可以使用Microsoft提供的默認樣式作爲listview，只需稍作調整即可使選定項目保持原樣。由於空間限制，我包括對原始ListViewItem風格作出的更改以供參考：

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

來源

2015-02-24 03:46:06 Vishal

謝謝。我沒有測試過，但會盡快。現在我選擇它作爲答案。 –

你可以自己做到這樣的事情，我知道，因爲我必須爲我爲客戶寫的應用程序做這件事。

我有作品，但不是很優雅。也許我可以把它放在GitHub上，然後其他人可以修復粗糙的邊緣並使其更加優雅。

如果你不能等待，那麼我可以至少指出你在正確的方向。

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

這是一個良好的開端讓拖放組內工作，並創建新的羣組。

您將需要爲組和項目以及標題樣式自定義ContainerStyles。

我的實現沒有被寫入重用，所以它有點耦合到我的應用程序。將其解耦並將其放入可供其他人重用的控件中需要一些時間。

如果您正在爲此付出努力，那麼如果我向您發送一些樣式代碼片段和一些代碼，可能會更及時。

來源

2014-05-01 06:31:59 schnitty

gridview中的Windows 8.1選擇模式

回答

相關問題