Metro之GridView控件的使用-绑定不同的模板样式显示

最终实现的效果如下：

添加MenuDataSource.cs，字段ImageStyle是用来标识套用的样式

public class MenuGroup
    {
        public string GroupTitle { get; set; }
        public ObservableCollection<MenuItem> ItemContent { get; set; }
    }
    
    public class MenuItem
    {
        public string ImageUrl { get; set; }
        public string SubTitle { get; set; }
        public string ImageStyle { get; set; }
    }

    public class MenuDataSource
    {
        private ObservableCollection<MenuGroup> _Sourcedata;
        public ObservableCollection<MenuGroup> Sourcedata
        {
            get { return _Sourcedata; }
            set { _Sourcedata = value; }
        }

        public MenuDataSource()
        {
            Sourcedata = GetDataGroup();
        }

        public ObservableCollection<MenuGroup> GetDataGroup()
        {
            return new ObservableCollection<MenuGroup>()
                {
                    new MenuGroup
                        {
                            GroupTitle = "您的订阅",
                            ItemContent = new ObservableCollection<MenuItem>
                                {
                                    new MenuItem {ImageUrl = "Image/hot-read.png", SubTitle = "工程投资趋势分析",ImageStyle = "style1"},
                                    new MenuItem {ImageUrl = "Image/hot-read.png", SubTitle = "工程投资趋势分析",ImageStyle = "style1"},
                                    new MenuItem {ImageUrl = "Image/hot-read.png", SubTitle = "工程投资趋势分析",ImageStyle = "style1"},
                                    new MenuItem {ImageUrl = "Image/hot-read.png", SubTitle = "工程投资趋势分析",ImageStyle = "style1"},
                                    new MenuItem {ImageUrl = "Image/hot-read.png", SubTitle = "工程投资趋势分析",ImageStyle = "style1"},
                                    new MenuItem {ImageUrl = "Image/hot-read.png", SubTitle = "工程投资趋势分析",ImageStyle = "style1"}
                                }
                        },
                    new MenuGroup
                        {
                            GroupTitle = "工程投资",
                            ItemContent = new ObservableCollection<MenuItem>
                                {
                                    new MenuItem {ImageUrl = "Image/工程投资.png", SubTitle = "工程投资",ImageStyle = "style2"},
                                    new MenuItem {ImageUrl = "Image/任务维度总表.png", SubTitle = "任务维度总表",ImageStyle = "style2"},
                                    new MenuItem {ImageUrl = "Image/趋势分析.png", SubTitle = "趋势分析",ImageStyle = "style2"},
                                    new MenuItem {ImageUrl = "Image/使用情况统计.png", SubTitle = "使用情况统计",ImageStyle = "style2"},
                                    new MenuItem {ImageUrl = "Image/工程规模.png", SubTitle = "工程规模",ImageStyle = "style2"},
                                    new MenuItem {ImageUrl = "Image/合作单位维度总表.png", SubTitle = "合作单位维度总表",ImageStyle = "style2"},
                                }
                        },
                    new MenuGroup
                        {
                            GroupTitle = "工程进度",
                            ItemContent = new ObservableCollection<MenuItem>
                                {
                                    new MenuItem {ImageUrl = "Image/项目维度总表.png", SubTitle = "项目维度总表",ImageStyle = "style2"},
                                    new MenuItem {ImageUrl = "Image/工程质量.png", SubTitle = "工程质量",ImageStyle = "style2"},
                                    new MenuItem {ImageUrl = "Image/工程物资.png", SubTitle = "工程物资",ImageStyle = "style2"},
                                    new MenuItem {ImageUrl = "Image/工程份额.png", SubTitle = "工程份额",ImageStyle = "style2"},
                                    new MenuItem {ImageUrl = "Image/工程施工进度.png", SubTitle = "工程施工进度",ImageStyle = "style2"},
                                    new MenuItem {ImageUrl = "Image/统计分析.png", SubTitle = "统计分析",ImageStyle = "style2"},
                                }
                        }
                };
        }
    }

添加TemplateSelector.cs，用作模块选择器

    /// <summary>
    /// 模板选择器
    /// </summary>
    public class TemplateSelector : DataTemplateSelector
    {
        /// <summary>
        /// 第一种文本显示模版
        /// </summary>
        public DataTemplate ImageTemplate1 { get; set; }
        /// <summary>
        /// 第二种图片为主显示模版
        /// </summary>
        public DataTemplate ImageTemplate2 { get; set; }
        /// <summary>
        /// 核心方法：根据不同的数据源类型返回给前台不同的样式模版
        /// </summary>
        /// <param name="item"></param>
        /// <param name="container"></param>
        /// <returns></returns>
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            MenuItem model = item as MenuItem;
            string typeName = model.ImageStyle;
            if (typeName == "style1")//根据数据源设置的数据显示模式返回前台样式模版
            {
                return ImageTemplate1;
            }
            if (typeName == "style2")
            {
                return ImageTemplate2;
            }
            return null;
        }
    }

添加页面：menu.xaml，在GridView中自定两种样式

        <Grid.Resources>
            <CollectionViewSource x:Name="itemcollectSource" Source="{Binding Sourcedata}" 
                                    IsSourceGrouped="true" ItemsPath="ItemContent" />
            <!--样式1-->
            <DataTemplate x:Key="imageStyle1">
                <Grid Width="320" Height="160" Background="#33CCCCCC">
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" >
                        <Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
                    </Border>
                    <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                        <TextBlock Foreground="White" Text="{Binding SubTitle}"
                                   FontSize="14" Margin="15,0,15,10"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
            <!--样式2-->
            <DataTemplate x:Key="imageStyle2">
                <Grid Width="160" Height="160">
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" >
                        <Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
                    </Border>
                    <StackPanel VerticalAlignment="Bottom">
                        <TextBlock Foreground="White" Text="{Binding SubTitle}"
                                   FontSize="14" TextAlignment="Center" Margin="0,0,40,0"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Grid.Resources>

GirdViw中根据ImageStyle值套用不同的样式

        <GridView Name="gv_Item" SelectionMode="Single"   Grid.RowSpan="2" 
                  ItemsSource="{Binding Source={StaticResource itemcollectSource}}" 
                    SelectedItem="{Binding ItemContent, Mode=TwoWay}"
                  IsItemClickEnabled="True" Margin="120,140,20,20" ItemClick="ItemView_ItemClick">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            
            <GridView.ItemTemplateSelector>
                <dataModel:TemplateSelector ImageTemplate1="{StaticResource imageStyle1}" 
                                        ImageTemplate2="{StaticResource imageStyle2}">
                </dataModel:TemplateSelector>
            </GridView.ItemTemplateSelector>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>    
                        <DataTemplate>
                            <Grid Margin="1,0,0,6">
                                <TextBlock
                                    AutomationProperties.Name="组名称"
                                    Text="{Binding GroupTitle}" FontSize="20" Foreground="White"/>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0"/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>

最后在menu.xaml.cs绑定数据源

public menu()
        {
            this.InitializeComponent();

            this.DataContext = new MenuDataSource();
        
        }