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>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索控件
， gridview
， windows store app
， item
， gridview显示不全
， 尺寸
， gridview分组显示
， 分组
， girdview
， item背景girdview
可变
，以便于您获取更多的相关知识。