Windows 8 Store Apps学习（12） GridView控件特性

Windows 8 Store Apps学习（12） GridView控件特性2013-12-04 cnblogs webabcdGridView控件特性: 拖动项, 项尺寸可变, 分组显示

介绍

重新想象 Windows 8 Store Apps 之 GridView

拖动项 - 在 GridView 内拖动 item 以对 item 排序, 拖动 item 到 GridView 外的指定位置以删除 item

项尺寸可变 - 指定 GirdView 中每个 item 所占尺寸

分组显示 - 分组显示集合数据

示例

1、演示如何在 GridView 内拖动 item 以对 item 排序，以及如何拖动 item 到 GridView 外的指定位置以删除 item

GridView/DragItem.xaml

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