為 ListView 和 GridView 添加數(shù)據(jù)

為 ListView 和 GridView 添加數(shù)據(jù)

ListView 采用垂直堆疊得方式顯示數(shù)據(jù)，而 GridView 則采用水平堆疊得方式。

長(zhǎng)相的話嘛，它們都差不多。

    <Grid Name="grid1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView x:Name="listView1" SelectionChanged="listView1_SelectionChanged">
            <x:String>Item 1</x:String>
            <x:String>Item 2</x:String>
        </ListView>
        <GridView x:Name="gridView1" SelectionChanged="gridView1_SelectionChanged">
            <x:String>Item 1</x:String>
            <x:String>Item 2</x:String>
        </GridView>
    </Grid>

當(dāng)然，也可以在后臺(tái)代碼上添加。我只是為了將它們放在一起比較而已，這些代碼堆一起肯定是很丑的。

ListView listView1 = new ListView();
listView1.Items.Add("Item 1");
listView1.Items.Add("Item 2");
listView1.Items.Add("Item 3");
listView1.SelectionChanged += listView1_SelectionChanged;           
grid1.Children.Add(listView1);        

GridView gridView1 = new GridView();
gridView1.Items.Add("Item 1");
gridView1.Items.Add("Item 2");
gridView1.SelectionChanged += gridView1_SelectionChanged;                                                                                                                        
grid1.Children.Add(gridView1);               

如果只是像上面這樣來(lái)添加內(nèi)容會(huì)不會(huì)比較麻煩呢，我們也可以把這些 Item 1、Item 2 之類的全部放在 List 中。

List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");
ListView listView1 = new ListView();
listView1.ItemsSource = itemsList;
listView1.SelectionChanged += listView1_SelectionChanged;
grid1.Children.Add(listView1);

這樣一來(lái)所顯示的 ListView 就是兩行，非常簡(jiǎn)陋，完全不能夠滿足要求。那么我們可以用它的 ItemTemplate 屬性來(lái)再里面添加一些東西，如下所示，我們可以在 Grid 中寫一個(gè) Image 綁定頭像，用 TextBlock 綁定用戶的ID，再來(lái)一個(gè) TextBlock 綁定用戶的消息，還可以來(lái)寫邊框呀什么的。而這些亂七八糟的 Binding 之類的，以后我們也會(huì)一起講的哦，現(xiàn)在只要它們是數(shù)據(jù)綁定就好。

<Page.Resources>
    <CollectionViewSource x:Name="collectionVS" Source="{Binding Items}"/>
</Page.Resources> 
<Grid Name="grid1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView x:Name="listView1"  ItemsSource="{Binding Source={StaticResource collectionVS}}"
      SelectionChanged="listView1_SelectionChanged">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>      
</Grid>

還可以像下面這樣哦，通過(guò) WrapGrid 來(lái)決定這些 Item 的擺放方式。

<Grid Name="grid1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   <ListView VerticalAlignment="Bottom">          
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <Rectangle Height="100" Width="100" Fill="Wheat" />
        <Rectangle Height="100" Width="100" Fill="White" />
        <Rectangle Height="100" Width="100" Fill="Gainsboro" />
        <Rectangle Height="100" Width="100" Fill="Violet" />
        <Rectangle Height="100" Width="100" Fill="DarkBlue" />
        <Rectangle Height="100" Width="100" Fill="RosyBrown" />
        <Rectangle Height="100" Width="100" Fill="SaddleBrown" />
        <Rectangle Height="100" Width="100" Fill="AliceBlue" />
        <Rectangle Height="100" Width="100" Fill="Fuchsia" />
        <Rectangle Height="100" Width="100" Fill="Aqua" />
        <Rectangle Height="100" Width="100" Fill="Tan" />
    </ListView>
</Grid>

當(dāng)然啦，對(duì)于 ListView 和 GridView 而言，知道用戶選擇了哪一項(xiàng)是很重要的。SelectionMode 屬性決定了 ListView 和 GridView 的選擇模式：?jiǎn)蝹€(gè)、多個(gè)、無(wú)、擴(kuò)展。

下面這個(gè)函數(shù)將選擇的項(xiàng)給了 selectedItems 啦。我們還可以通過(guò) IsItemClickEnabled 來(lái)啟用 ListView 和 GridView 的點(diǎn)擊事件，但是務(wù)必要注意將 SelectionMode 設(shè)置為 None。

private void listView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
     selectedItems = (List<object>)e.AddedItems;   
}