天天看點

Windows Phone 8.1 清單控件(1):基本

說到 List 控件,Windows Phone 8.1 上推薦使用的是 ListView 和 GridView。

而這兩個控件實在太多東西可講了,于是分成三篇來講:

(1)基本

(2)分組資料

(3)多資料呈現

ListView 和 GridView 的最大差别就是:ListView 是一條條依序排列的,而 GridView 則是一塊塊依序排列的,是以 ListView 中的一項就會占據整整一行或者一列,而 GridView 的一項隻會占據它應有的大小,一行或一列中可以放置多項。

而兩者在其它方面上基本一緻,是以下文隻對 ListView 進行介紹,GridView 其實也一樣的。

Template

(1)ItemsPanelTemplate

ItemsPanel,也就是裝載項(Items)的那個框框,可以自定義它的各項屬性,比如可以讓項橫着排列:

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <ItemsStackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</ListView.ItemsPanel>      

(2)HeaderTemplate、FooterTemplate

自定義清單的頭與尾,例如在清單底部增加一個按鈕點選加載更多資料之類的:

<ListView.HeaderTemplate>
    <DataTemplate>
        <TextBlock Text="HeaderTemplate"
                   Style="{StaticResource ControlHeaderTextBlockStyle}"
                   FontSize="20"/>
    </DataTemplate>
</ListView.HeaderTemplate>

<ListView.FooterTemplate>
    <DataTemplate>
        <TextBlock Text="FooterTemplate"
                   Style="{StaticResource ControlHeaderTextBlockStyle}"
                   FontSize="20"/>
    </DataTemplate>
</ListView.FooterTemplate>      

(3)ItemTemplate

自定義項(Item)的呈現,非常重要:

<ListView.ItemTemplate>
    <DataTemplate>
        <StackPanel>
            <TextBlock Text="{Binding Title}"
                       Style="{StaticResource ListViewItemSubheaderTextBlockStyle}"/>
            <Image Source="{Binding Image}"/>
            <TextBlock Text="{Binding Content}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
        </StackPanel>
    </DataTemplate>
</ListView.ItemTemplate>      

(4)ItemContainerStyle

定義控件在不同狀态下的行為與呈現,可以使用 SDK 自帶的 Blend 輕松實作。

2個屬性

(1)多選

通過 XAML 更改 SelectionMode 實作多選:

SelectionMode="Multiple"      

也可通過 C# 代碼實作:

private void multipleButton_Click(object sender, RoutedEventArgs e)
{
    if( myListView.SelectionMode == ListViewSelectionMode.Single )
        myListView.SelectionMode = ListViewSelectionMode.Multiple;
    else
        myListView.SelectionMode = ListViewSelectionMode.Single;
}      

(2)排序

通過 XAML 更改 ReorderMode 開啟排序狀态:

ReorderMode="Enabled"      

也可通過 C# 代碼實作:

private void myListView_Holding(object sender, HoldingRoutedEventArgs e)
{
    if( e.HoldingState == HoldingState.Started )
        myListView.ReorderMode = ListViewReorderMode.Enabled;
}      

要注意的是,下一篇要講的 分組資料(GroupingData)不能排序。