【萬里征程——Windows App開發】ListView&GridView之新增資料

ListView採用垂直堆疊得方式顯示資料，而GridView則採用水平堆疊得方式。

長相的話嘛，它們都差不多啦。

    <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>

當然啦，也可以在後臺程式碼上新增哦。我只是為了將它們放在一起比較而已哦，這些程式碼堆一起肯定是很醜的。

            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);           

如果只是像上面這樣來新增內容會不會比較麻煩呢，我們也可以把這些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);

這樣一來所顯示的ListView就是兩行，非常簡陋，完全不能夠滿足要求。那麼我們可以用它的ItemTemplate屬性來再裡面新增一些東西，如下所示，我們可以在Grid中寫一個Image繫結頭像，用TextBlock繫結使用者的ID，再來一個TextBlock繫結使用者的訊息，還可以來寫邊框呀什麼的。而這些亂七八糟的Binding啥的，以後我們也會一起講的哦，現在只要它們是資料繫結就好啦。

    <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>

還可以像下面這樣哦，通過WrapGrid來決定這些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>

當然啦，對於ListView和GridView而言，知道使用者選擇了哪一項是很重要的。SelectionMode屬性決定了ListView和GridView的選擇模式：單個、多個、無、擴充套件。下面這個函式將選擇的項給了selectedItems啦。我們還可以通過IsItemClickEnabled來啟用ListView和GridView的點選事件，但是務必要注意將SelectionMode設定為None噢。

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

有點晚了，剩下的明天再補上啦，感謝大家的支援，下篇見！

為使本文得到斧正和提問，轉載請註明出處：
http://blog.csdn.net/nomasp