Windows 8 Store Apps學習(12) GridView控制項特性

GridView控制項特性: 拖動項, 項尺寸可變, 分組顯示

介紹

重新想象 Windows 8 Store Apps 之 GridView

拖動項 - 在 GridView 內拖動 item 以對 item 排序, 拖動 item 到 GridView 外的指定位置以刪除 item

項尺寸可變 - 指定 GirdView 中每個 item 所佔尺寸

分組顯示 - 分組顯示集合資料

樣本

1、示範如何在 GridView 內拖動 item 以對 item 排序，以及如何拖動 item 到 GridView 外的指定位 置以刪除 item

GridView/DragItem.xaml

<Page    x:Class="XamlDemo.Controls.GridView.DragItem"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:XamlDemo.Controls.GridView"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">        <Page.Resources>        <DataTemplate x:Key="ItemTemplate">            <StackPanel Orientation="Vertical">                <TextBlock TextWrapping="Wrap" FontSize="14.667" Text="{Binding Name}" HorizontalAlignment="Left" />                <TextBlock TextWrapping="Wrap" FontSize="14.667" Text="{Binding Age}" HorizontalAlignment="Left"/>            </StackPanel>        </DataTemplate>        <Style x:Key="ItemContainerStyle"  TargetType="GridViewItem">            <Setter Property="Width" Value="292" />            <Setter Property="Height" Value="80" />            <!--                即使將 Margin 設定為“0”，也無法去掉 item 之間的 margin                如果想要去掉 item 之間的 margin，請將此 Margin 屬性設定為“-4”            -->            <Setter Property="Margin" Value="0" />            <Setter Property="Background" Value="Blue" />        </Style>        <ItemsPanelTemplate x:Key="ItemsPanel">            <!--                註：WrapGrid 繼承了 VirtualizingPanel，而 VariableSizedWrapGrid 並未繼承 VirtualizingPanel            -->            <WrapGrid MaximumRowsOrColumns="3" Orientation="Vertical" VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Left" />        </ItemsPanelTemplate>    </Page.Resources>        <Grid Background="Transparent">        <StackPanel Margin="120 0 0 0">                <TextBlock Name="lblMsg" FontSize="14.667" Text="通過拖動 GirdView 中的 Item 進行排序" />                <GridView x:Name="gridView" VerticalAlignment="Top" Margin="0 10 10 0" BorderThickness="1" BorderBrush="Red" Background="LightBlue"                      ItemTemplate="{StaticResource ItemTemplate}"                      ItemContainerStyle="{StaticResource ItemContainerStyle}"                      ItemsPanel="{StaticResource ItemsPanel}"                      IsSwipeEnabled="True" IsItemClickEnabled="True"                      CanDragItems="True" CanReorderItems="True" AllowDrop="True"                      DragItemsStarting="gridView_DragItemsStarting_1" />                <!--拖動 item 到此處以刪除 item-->            <Grid Name="gridDelete" Margin="0 10 0 0" AllowDrop="True" Drop="gridDelete_Drop_1" DragEnter="gridDelete_DragEnter_1" DragLeave="gridDelete_DragLeave_1" DragOver="gridDelete_DragOver_1">                <Rectangle Width="300" Height="100" StrokeThickness="1" StrokeDashArray="2" Stroke="Red" Fill="Blue" />                <TextBlock FontSize="26.667" Text="拖動到此處以刪除" TextAlignment="Center" VerticalAlignment="Center" />            </Grid>                        </StackPanel>    </Grid></Page>