程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> Windows 8 Store Apps學習(11) ListView控件和 GridView控件

Windows 8 Store Apps學習(11) ListView控件和 GridView控件

編輯：關於.NET

介紹

重新想象 Windows 8 Store Apps 之 ListView 和 GridView

ListView - 列表控件

GridView - 網格控件

示例

1、ListView 的 Demo

ListViewDemo.xaml

<Page
    x:Class="XamlDemo.Controls.ListViewDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    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="ListViewItem">
            <Setter Property="Width" Value="292" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Padding" Value="0" />
            <!--
                即使將 Margin 設置為“0”，也無法去掉 item 之間的 margin
                如果想要去掉 item 之間的 margin，請將此 Margin 屬性設置為“-4”
            -->
            <Setter Property="Margin" Value="0" />
            <Setter Property="Background" Value="Blue" />
        </Style>
    </Page.Resources>
    
    <Grid Background="Transparent">
        <Grid Margin="120 0 0 0">
    
            <TextBlock Name="lblMsg" FontSize="14.667" />
    
            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0 30 0 0">
                <CheckBox Name="chkIsSwipeEnabled" Content="IsSwipeEnabled" />
                <CheckBox Name="chkIsItemClickEnabled" Content="IsItemClickEnabled" Margin="10 0 0 0" />
            </StackPanel>
    
            <!--後台綁定方式為 ListView 提供數據-->
            <ListView x:Name="listView" Width="300" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0 60 10 10" BorderThickness="1" BorderBrush="Red" 

Background="LightBlue"
                      ItemTemplate="{StaticResource ItemTemplate}"
                      ItemContainerStyle="{StaticResource ItemContainerStyle}"
                      ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"
                      SelectionMode="Single"
                      SelectionChanged="listView_SelectionChanged_1"
                      IsSwipeEnabled="{Binding IsChecked, ElementName=chkIsSwipeEnabled}"
                      IsItemClickEnabled="{Binding IsChecked, ElementName=chkIsItemClickEnabled}"
                      ItemClick="listView_ItemClick_1">
            </ListView>
    
            <!--
                xaml 方式為 ListView 添加內容
                <ListView>
                    <ListView.Items>
                        <ListViewItem>
                            ...
                        </ListViewItem>
                        <ListViewItem>
                            ...
                        </ListViewItem>
                        ...
                    </ListView.Items>
                </ListView>
            -->
        </Grid>
    </Grid>
</Page>

ListViewDemo.xaml.cs

/*
 * ListView - 列表控件
 *     IsItemClickEnabled - item 是否可被點擊
 *     IsSwipeEnabled - 是否支持 swipe 操作（對於 ListView 來說，左右猛擊 item 稱之為 swipe）
 *     SelectionMode - item 的選中模式（Windows.UI.Xaml.Controls.ListViewSelectionMode 枚舉）
 *         None - 不能被選中
 *         Single - 只能單選
 *         Multiple - 僅通過鼠標多選
 *         Extended - 通過鼠標和輔助鍵多選（ctrl 或 shift）
 *     SelectedItems - 被選中的 items 集合
 *     ItemClick - item 被單擊時觸發的事件
 *     SelectAll() - 選中全部 items
 *     ScrollIntoView(object item, ScrollIntoViewAlignment alignment) - 滾動到指定的 item
 *         ScrollIntoViewAlignment.Default - 與該 item 的最近邊緣對齊
 *         ScrollIntoViewAlignment.Leading - 與該 item 的前邊緣對齊
 *         
 * 
 * 注：
 * IsItemClickEnabled == false && IsSwipeEnabled == false 無法響應單擊事件，單擊則意味著選中，無法 swipe
 * IsItemClickEnabled == true && IsSwipeEnabled == false 可以響應單擊事件，無法響應選中事件，無法 swipe
 * IsItemClickEnabled == false && IsSwipeEnabled == true 無法響應單擊事件，單擊和 swipe 均意味著選中
 * IsItemClickEnabled == true && IsSwipeEnabled == true 可以響應單擊事件，swipe 則意味著選中
 * 
 * 關於 SemanticZoom, item的拖動, item的尺寸可變等之後通過 GridView 來介紹
 * 
 * 關於分頁加載內容在“數據綁定”一節做介紹
 */
    
using System.Collections.Generic;
using Windows.UI.Xaml.Controls;
using XamlDemo.Model;
    
namespace XamlDemo.Controls
{
    public sealed partial class ListViewDemo : Page
    {
        public ListViewDemo()
        {
            this.InitializeComponent();
    
            // 綁定數據
            List<Employee> dataSource = TestData.GetEmployees();
            listView.ItemsSource = dataSource;
        }
    
        // 單擊行為的事件
        private void listView_ItemClick_1(object sender, ItemClickEventArgs e)
        {
            lblMsg.Text = "被單擊的 employee 的 name 為：" + (e.ClickedItem as Employee).Name;
        }
    
        // 選中行為的事件
        private void listView_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            if (e.AddedItems.Count > 0)
                lblMsg.Text = "此次操作被選中的 employee 的 name 為：" + (e.AddedItems[0] as Employee).Name;
            else
                lblMsg.Text = "此次操作沒有被選中的 employee";
        }
    }
}

2、GridView 的 Demo

GridView/Demo.xaml

<Page
    x:Class="XamlDemo.Controls.GridView.Demo"
    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" />
    
            <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
                <CheckBox Name="chkIsSwipeEnabled" Content="IsSwipeEnabled" />
                <CheckBox Name="chkIsItemClickEnabled" Content="IsItemClickEnabled" Margin="10 0 0 0" />
            </StackPanel>
    
            <!--後台綁定方式為 ListView 提供數據-->
            <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}"
                      ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"
                      SelectionMode="Single"
                      SelectionChanged="gridView_SelectionChanged_1"
                      IsSwipeEnabled="{Binding IsChecked, ElementName=chkIsSwipeEnabled}"
                      IsItemClickEnabled="{Binding IsChecked, ElementName=chkIsItemClickEnabled}"
                      ItemClick="gridView_ItemClick_1">
            </GridView>
    
            <!--
                xaml 方式為 ListView 添加內容
                <GridView>
                    <GridView.Items>
                        <GridViewItem>
                            ...
                        </GridViewItem>
                        <GridViewItem>
                            ...
                        </GridViewItem>
                        ...
                    </GridView.Items>
                </GridView>
            -->
        </StackPanel>
    </Grid>
</Page>

GridView/Demo.xaml.cs

/*
 * GridView - 網格控件
 *     IsItemClickEnabled - item 是否可被點擊
 *     IsSwipeEnabled - 是否支持 swipe 操作（對於 GridView 來說，上下猛擊 item 稱之為 swipe）
 *     SelectionMode - item 的選中模式（Windows.UI.Xaml.Controls.ListViewSelectionMode 枚舉）

 *         None - 不能被選中
 *         Single - 只能單選
 *         Multiple - 僅通過鼠標多選
 *         Extended - 通過鼠標和輔助鍵多選（ctrl 或 shift）
 *     SelectedItems - 被選中的 items 集合
 *     ItemClick - item 被單擊時觸發的事件
 *     SelectAll() - 選中全部 items
 *     ScrollIntoView(object item, ScrollIntoViewAlignment alignment) - 滾動到指定的 item
 *         ScrollIntoViewAlignment.Default - 與該 item 的最近邊緣對齊
 *         ScrollIntoViewAlignment.Leading - 與該 item 的前邊緣對齊
 *         
 * 
 * 注：
 * IsItemClickEnabled == false && IsSwipeEnabled == false 無法響應單擊事件，單擊則意味著選中，無法 swipe
 * IsItemClickEnabled == true && IsSwipeEnabled == false 可以響應單擊事件，無法響應選中事件，無法 swipe
 * IsItemClickEnabled == false && IsSwipeEnabled == true 無法響應單擊事件，單擊和 swipe 均意味著選中
 * IsItemClickEnabled == true && IsSwipeEnabled == true 可以響應單擊事件，swipe 則意味著選中
 */
    
using System.Collections.Generic;
using Windows.UI.Xaml.Controls;
using XamlDemo.Model;
    
namespace XamlDemo.Controls.GridView
{
    public sealed partial class Demo : Page
    {
        public Demo()
        {
            this.InitializeComponent();
    
            // 綁定數據
            List<Employee> dataSource = TestData.GetEmployees();
            gridView.ItemsSource = dataSource;
        }
    
        // 單擊行為的事件
        private void gridView_ItemClick_1(object sender, ItemClickEventArgs e)
        {
            lblMsg.Text = "被單擊的 employee 的 name 為：" + (e.ClickedItem as Employee).Name;
        }
    
        // 選中行為的事件
        private void gridView_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            if (e.AddedItems.Count > 0)
                lblMsg.Text = "此次操作被選中的 employee 的 name 為：" + (e.AddedItems[0] as Employee).Name;
            else
                lblMsg.Text = "此次操作沒有被選中的 employee";
        }
    }
}

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar