UWP開發必備：常用數據列表控件匯總比較

本文轉載自查看原文 2016-08-28 20:21 3480 ItemsControl/ FlipView/ 比較/ ListView/ SplitView/ UWP探討/ Pivot/ GridView/ ListBox/ UWP

今天是想通過實例將UWP開發常用的數據列表做匯總比較，作為以后項目開發參考。UWP開發必備知識點總結請參照【UWP開發必備以及常用知識點總結】。

本次主要討論以下控件：

GridView：用於顯示數據項的水平網格控件
ListView：用於顯示數據項的垂直列表控件
ListBox：可選項列表控件
ItemsControl：用於顯示數據項的列表控件。是其他控件的父類。
Pivot：應用內部標簽導航控件
FlipView：每次只顯示一個數據項的控件，通過滑動切換數據項
SplitView：包含主視圖和導航試圖的控件，主視圖顯示內容，導航試圖包含導航命令或者數據

1，GridView

由於圖片比較大，水平效果變成垂直了，把圖片去掉再試試：

xaml設置如下：

<Page
    x:Class="ListDemo.Views.GridViewPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListDemo.Views"
    xmlns:data="using:ListDemo.Model"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />
        <TextBlock Grid.Row="0" Text="GridView" HorizontalAlignment="Center"/>
        <GridView Grid.Row="1" x:Name="pageList">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="data:PageItem" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />
                        <!--<Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />-->
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Grid>
</Page>

第二張圖明顯可以看出效果了，從左到右水平布局數據項，空間不足時換行顯示。記得在Win8.1開發模板中有一個網格模板，產生的頁面就是用的GridView，不過在UWP開發中這個模板已經被刪除了。

2，ListView

ListView就是這樣垂直顯示的控件。它繼承自ListBox，一樣可以設置SelectionMode來定義是單項選擇還是多項選擇，同時還支持數據依賴屬性。

xaml設置如下：

<Page
    x:Class="ListDemo.Views.ListViewPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListDemo.Views"
    xmlns:data="using:ListDemo.Model"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />
        <TextBlock Grid.Row="0" Text="ListView" HorizontalAlignment="Center"/>
        <ListView Grid.Row="1" x:Name="pageList">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="data:PageItem" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />
                        <!--<Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />-->
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

3，ListBox

表面看上去和ListView沒區別，仔細看在項目被選中時是沒有動畫效果的。雖然是ItemsControl的子類控件，但是添加了選擇功能。可以設置SelectionMode來定義是單項選擇還是多項選擇。

xaml設置如下：

<Page
    x:Class="ListDemo.Views.ListBoxPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListDemo.Views"
    xmlns:data="using:ListDemo.Model"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />
        <TextBlock Grid.Row="0" Text="ListBox" HorizontalAlignment="Center"/>
        <ListBox Grid.Row="1" x:Name="pageList">
            <ListBox.ItemTemplate>
                <DataTemplate x:DataType="data:PageItem" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />
                        <!--<Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />-->
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Page>

4，ItemsControl

xaml設置如下：

<Page
    x:Class="ListDemo.Views.ItemscontrolPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListDemo.Views"
    xmlns:data="using:ListDemo.Model"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />
        <TextBlock Grid.Row="0" Text="ItemsControl" HorizontalAlignment="Center"/>
        <ScrollViewer Grid.Row="1">
            <ItemsControl x:Name="pageList" >
                <ItemsControl.ItemTemplate>
                    <DataTemplate x:DataType="data:PageItem" >
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />
                            <!--<Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />-->
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Page>

從中可以看出，作為列表控件的父類ItemsControl列表數據默認是不帶滾動條的，必須手動添加ScrollViewer控件。而且項目沒有選擇與未選擇區分，使用ItemsPresenter顯示數據項，以及數據項沒有任何位置設置，從坐標（0，0）開始。

5，Pivot

xaml設置如下：

<Page
    x:Class="ListDemo.Views.PivotPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListDemo.Views"
    xmlns:data="using:ListDemo.Model"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />
        <TextBlock Grid.Row="0" Text="Pivot" HorizontalAlignment="Center"/>
        <Pivot Grid.Row="1" x:Name="pageList">
            <Pivot.ItemTemplate>
                <DataTemplate x:DataType="data:PageItem">
                    <Image Source="{x:Bind ImgUrl,Mode=OneWay}" />
                </DataTemplate>
            </Pivot.ItemTemplate>
            <Pivot.HeaderTemplate>
                <DataTemplate x:DataType="data:PageItem">
                    <TextBlock Text="{x:Bind Title,Mode=OneWay}" />
                </DataTemplate>
            </Pivot.HeaderTemplate>
        </Pivot>
    </Grid>
</Page>

在UWP開發中是沒有Tab控件的，Pivot就是Tab控件的替代，點擊每個標簽可以切換試圖。

6，FlipView

xaml設置如下：

<Page
    x:Class="ListDemo.Views.FlipViewPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListDemo.Views"
    xmlns:data="using:ListDemo.Model"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" x:Name="goBack" Content="Back" Click="goBack_Click" />
        <TextBlock Grid.Row="0" Text="FlipView" HorizontalAlignment="Center"/>
        <FlipView Grid.Row="1" x:Name="pageList">
            <FlipView.ItemTemplate>
                <DataTemplate x:DataType="data:PageItem" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />
                        <Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>
</Page>

FlipView通過左右滑動切換數據項，每次只能顯示一個數據項，並且自帶左右切換按鈕。與Pivot很像每次操作只顯示一個試圖。

7，SplitView

xaml設置如下：

<Page
    x:Class="ListDemo.Views.SplitViewPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListDemo.Views"
    xmlns:data="using:ListDemo.Model"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="48"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" HorizontalAlignment="Right" x:Name="goBack" Content="Back" Click="goBack_Click" />
        <TextBlock Grid.Row="0" Text="SplitView" HorizontalAlignment="Center"/>
        <ToggleButton x:Name="HumberButton"
                      Width="48"
                      HorizontalAlignment="Left"
                      VerticalAlignment="Stretch">
            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" />
        </ToggleButton>
        <SplitView Grid.Row="1" DisplayMode="Overlay"
                   CompactPaneLength="48"
                   IsPaneOpen="{Binding ElementName=HumberButton,Path=IsChecked,Mode=OneWay}">
            <SplitView.Pane>
                <ListView x:Name="pageList">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="data:PageItem" >
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="50"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <TextBlock Grid.Row="0" Text="{x:Bind Title,Mode=OneWay}" />
                                <Image Grid.Row="1" Source="{x:Bind ImgUrl,Mode=OneWay}" />
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </SplitView.Pane>
        </SplitView>
    </Grid>
</Page>

SplitView實際不是列表控件，只是試圖顯示控件。在主視圖的基礎上彈出顯示另外一個試圖（比如導航菜單），這也是常見需求。特別是UWP開發中一定會有的漢堡式菜單就是SplitView應用。

匯總

水平顯示：GridView，Pivot，FlipView
垂直顯示：ListView，ListBox，ItemsControl
ItemsControl以列表數據項內容全顯示優先，可能會超范圍顯示，而且不會隨着窗口大小變化自動調整大小。
ListBox與ListView數據項顯示大小依賴於父容器大小，而且會隨着窗口大小變化自動調整數據項大小。
ItemsControl沒有滾動條，ListBox帶水平垂直滾動條，ListView帶垂直滾動條。

如何選擇這些控件

如果不想讓數據項具備選擇功能，可以考慮ItemsControl。
如果每次只想顯示一個數據項，可以考慮使用Pivot，FlipView。
如果想顯示數據項詳情，可以考慮GridView，ListView。
如果需要導航時考慮SplitView。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 MySQL 中間件匯總比較 UWP開發必備以及常用知識點總結 UWP開發隨筆——UWP新控件！AutoSuggestBox！ UWP開發之控件：用WebView做聊天框 Java常用英語匯總(面試必備) Python列表常用方法及匯總 postman常用功能匯總（基礎必備）常用的CSS屬性列表匯總跨終端開發必備概念匯總 .NET各大平台數據列表控件綁定原理及比較（WebForm、Winform、WPF）

UWP開發必備：常用數據列表控件匯總比較

GridView：用於顯示數據項的水平網格控件

ListView：用於顯示數據項的垂直列表控件

ListBox：可選項列表控件

ItemsControl：用於顯示數據項的列表控件。是其他控件的父類。

Pivot：應用內部標簽導航控件

FlipView：每次只顯示一個數據項的控件，通過滑動切換數據項

SplitView：包含主視圖和導航試圖的控件，主視圖顯示內容，導航試圖包含導航命令或者數據

水平顯示：GridView，Pivot，FlipView

垂直顯示：ListView，ListBox，ItemsControl

ItemsControl以列表數據項內容全顯示優先，可能會超范圍顯示，而且不會隨着窗口大小變化自動調整大小。

ListBox與ListView數據項顯示大小依賴於父容器大小，而且會隨着窗口大小變化自動調整數據項大小。

ItemsControl沒有滾動條，ListBox帶水平垂直滾動條，ListView帶垂直滾動條。

如果不想讓數據項具備選擇功能，可以考慮ItemsControl。

如果每次只想顯示一個數據項，可以考慮使用Pivot，FlipView。

如果想顯示數據項詳情，可以考慮GridView，ListView。

如果需要導航時考慮SplitView。

免責聲明！