Windows 8實用竅門系列：20.Windows 8中的GridView使用(二)和DataTemplateSelector

標籤：pre   name   點擊   margin   網吧   htm   block   工作   繼承   

在本文中所講述內容的執行個體仍然沿用於上篇文章，有什麼疑惑可以參考上篇文章。

　　一 GroupStyle 在GridView控制項中我們可以對資料進行分組顯示，通過對GridView的GroupStyle進行控制，分別設定GroupStyle.HeaderTemplate和GroupStyle.Panel。如下代碼：

            <GridView.GroupStyle>                <GroupStyle>                    <GroupStyle.HeaderTemplate>                        <DataTemplate>                            <Grid Margin="1,0,0,6">                                <Button                                    AutomationProperties.Name="組名稱"                                    Content="{Binding GroupTitle}"/>                            </Grid>                        </DataTemplate>                    </GroupStyle.HeaderTemplate>                    <GroupStyle.Panel>                        <ItemsPanelTemplate>                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0"/>                        </ItemsPanelTemplate>                    </GroupStyle.Panel>                </GroupStyle>            </GridView.GroupStyle>

　　二 DataTemplateSelector 在不同的組之間我們想使用不同的樣式進行顯示，在這裡我們可以繼承重寫DataTemplateSelector類編寫並且根據後台資料選擇相應的樣式模版進行呈現。

　　在之前代碼的基礎上我們需要做以下工作：

　　1.編寫一個類繼承於DataTemplateSelector

    public class TemplateSelector : DataTemplateSelector    {        /// <summary>        /// 第一種文本顯示模版        /// </summary>        public DataTemplate TextBoxTemplate { get; set; }        /// <summary>        /// 第二種圖片為主顯示模版        /// </summary>        public DataTemplate ImageTemplate { get; set; }        /// <summary>        /// 核心方法：根據不同的資料來源類型返回給前台不同的樣式模版        /// </summary>        /// <param name="item"></param>        /// <param name="container"></param>        /// <returns></returns>        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)        {            DataModel model = item as DataModel;             string typeName = model.MainModel.Name;            if (typeName == typeof(TextBox).Name)//根據資料來源設定的資料顯示模式返回前台樣式模版            {                return TextBoxTemplate;            }            if (typeName == typeof(Image).Name)            {                return ImageTemplate;            }            return null;        }    }

　　2.將背景DataTemplateSelector綁定到前台，並且設定不同的樣式資源

            <GridView.ItemTemplateSelector>                <local:TemplateSelector TextBoxTemplate="{StaticResource textboxTemp}"                                         ImageTemplate="{StaticResource imageTemp}">                </local:TemplateSelector>            </GridView.ItemTemplateSelector>

　　3.定義文本顯示模式樣式和圖片為主模式

            <!--圖片為主模式-->            <DataTemplate x:Key="imageTemp">                <Grid Width="250" Height="200" Background="#33CCCCCC">                    <Grid.ColumnDefinitions>                        <ColumnDefinition Width="110"></ColumnDefinition>                        <ColumnDefinition></ColumnDefinition>                    </Grid.ColumnDefinitions>                    <Image Grid.Column="0" Margin="5,0,0,0" Source="{Binding ImageUrl}" Stretch="None"></Image>                    <TextBlock Grid.Column="1" Margin="15,15,0,0" Foreground="Black" Text="{Binding txtTitle}"                                    FontWeight="Bold" FontSize="16" TextWrapping="Wrap"/>                    <TextBlock Grid.Column="1" Margin="15,40,0,0" Foreground="Black" Text="{Binding txtContent}"                                    FontWeight="Light" FontSize="14" TextWrapping="Wrap"/>                </Grid>            </DataTemplate>            <!--文本顯示模式樣式-->            <DataTemplate x:Key="textboxTemp">                <Grid Width="250" Height="200" Background="#33CCCCCC">                    <Grid.ColumnDefinitions>                        <ColumnDefinition Width="110"></ColumnDefinition>                        <ColumnDefinition></ColumnDefinition>                    </Grid.ColumnDefinitions>                    <Image Grid.Column="0" Margin="5,0,0,0" Source="{Binding ImageUrl}" Width="50" Height="80" Stretch="Fill"></Image>                    <TextBlock Grid.Column="1" Margin="15,15,0,0" Foreground="White" Text="{Binding txtTitle}"                                    FontWeight="Light" FontSize="14" TextWrapping="Wrap"/>                    <TextBlock Grid.Column="1" Margin="15,40,0,0" Foreground="White" Text="{Binding txtContent}"                                    FontWeight="Light" FontSize="12" TextWrapping="Wrap"/>                </Grid>            </DataTemplate>

　　4.資料來源增加顯示模式區別欄位，然後設定資料，請見下方紅色部分。

        public class DataModel        {            public string txtTitle { get; set; }            public string txtContent { get; set; }            public string ImageUrl { get; set; }            /// <summary>            /// 主要顯示模式 TextBox文字主要顯示模式，Image：以圖片為主要顯示模式            /// </summary>            public Type MainModel { get; set; }        }        public ObservableCollection<DataGroupModel> GetDataGroup()        {            return new ObservableCollection<DataGroupModel>(){                new DataGroupModel(){ GroupTitle="玄幻小說",                     ItemContent=new ObservableCollection<DataModel>(){                        new DataModel(){ MainModel=typeof(Image), txtTitle="盤龍",txtContent="大小的血睛鬃毛獅，力大無窮的紫睛金毛猿，毀天滅地的九頭蛇皇，攜帶著毀滅雷電的恐怖雷龍……這裡無奇不有，這是一個廣博的魔幻世界。", ImageUrl="http://image.qidian.com/books/1017141/1017141.jpg" },                        new DataModel(){ MainModel=typeof(Image), txtTitle="縱橫輪迴",txtContent="李沐然，本為身懷諸子百家所長的大神通者，在收取世間最後一顆神雷珠之時和神雷珠一道重生異世。    神雷之力，刑罰天下", ImageUrl="http://image.qidian.com/books/1.jpg" },                        new DataModel(){ MainModel=typeof(Image), txtTitle="巫師世界",txtContent="穿越到異世界成為普通的小家族子弟，帶著具有分析能力的生物晶片開始強大之旅..... ", ImageUrl="http://image.qidian.com/books/2443169/2443169.jpg" },                        new DataModel(){ MainModel=typeof(Image), txtTitle="殺神",txtContent="在這個人吃人的瘋狂世界，神已無力回天，就讓我踏著漫天諸神的累累屍骨來普渡這芸芸眾生……", ImageUrl="http://image.qidian.com/books/1911245/1911245.jpg" }                    }                },                new DataGroupModel(){ GroupTitle="網遊小說",                     ItemContent=new ObservableCollection<DataModel>(){                        new DataModel(){ MainModel=typeof(TextBox), txtTitle="全職高手",txtContent="網遊榮耀中被譽為教科書層級的頂尖高手，因為種種原因遭到俱樂部的驅逐，離開職業圈的他寄身於一家網吧成了一個小小的網管， ", ImageUrl="http://image.qidian.com/books/1887208/1887208.jpg" },                        new DataModel(){ MainModel=typeof(TextBox), txtTitle="重生之賊行天下",txtContent="孤寂的行者，追逐陰影的腳步，這是盜賊的讚歌。 帶著一個一百八十級的大盜賊的記憶，回到了十年前，命運給聶言開了一個玩笑", ImageUrl="http://image.qidian.com/books/1693876/1693876.jpg" },                        new DataModel(){ MainModel=typeof(TextBox), txtTitle="琥珀之劍",txtContent="命運在我眼前分開成兩條互不相關筆直的線，一條通向火焰中熊熊燃燒的宮殿與城池，王國傾覆，大地承載苦難，生靈在這火中忍受煎熬", ImageUrl="http://image.qidian.com/books/1784765/1784765.jpg" },                        new DataModel(){ MainModel=typeof(TextBox), txtTitle="獨裁之劍",txtContent="來自銀耀天堂的智慧之光，自然之力的守護者， 這是阿克蒙斯神位德魯伊的王者傳奇。", ImageUrl="http://image.qidian.com/books/2172318/2172318.jpg" }                    }                }            };        }

　　最後我們看效果如下，左邊是圖片為主顯示模式的黑色字型和大圖，右邊是文本為主顯示模式的白色字型和小圖。如需源碼請點擊 Win8Gridview2.rar 下載。

http://www.cnblogs.com/chengxingliang/archive/2013/03/11/2940191.html

 

Windows 8實用竅門系列：20.Windows 8中的GridView使用(二)和DataTemplateSelector