【萬裡征程——Windows App開發】ListView&GridView【修補中】

標籤：app開發   顯示   name   windows   wp8   

就我而言，List之類都是超難的，這一節我們就來逐個擊破啦！

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

（未完待續，並且修補中）

【萬裡征程——Windows App開發】ListView&GridView【修補中】