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

介紹

重新想象 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>