【问题标题】:Windows StoreApp XAML: Changing ItemTemplate in GridView based on Data typeWindows StoreApp XAML:根据数据类型更改 GridView 中的 ItemTemplate
【发布时间】:2013-07-15 15:55:59
【问题描述】:

我正在使用 C#/XAML 开发 Windows 应用商店应用程序。我主要在 iOS 和 Android 应用程序开发方面有经验,但对 C#/XAML 世界还不太熟悉。

这是我在基于 GridView 的页面中的问题(基于 VS2012 生成的漂亮模板)。

我有一个gridview,它的集合绑定到从网络检索的数据,它工作正常。 但我想根据数据更改网格项。 例如:我有一些文件和文件夹,我想使用不同的网格视图项来显示它们。

我的问题:如何根据数据为 ItemTemplate 使用不同的 DataTemplate?例如,对于“文件夹”,我将只有一个垂直居中的文本块,而对于文件,我将有 2 个文本块,并且在视觉上有所不同。

我是走在正确的道路上还是应该做完全不同的事情?

XAML 部分是

<GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Grid.RowSpan="3"
            Padding="116,137,40,46"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource FileEntriesTemplate}"
            ItemClick="ItemView_ItemClick"
            IsItemClickEnabled="True"
            SelectionMode="None"
            IsSwipeEnabled="false">

模板是

<DataTemplate x:Key="FileEntriesTemplate">
<Grid HorizontalAlignment="Left" Width="400" Height="80" Background="Beige">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="80"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Image Source="{Binding Image}" Stretch="Uniform" Grid.Column="0" Margin="10,0,0,0" AutomationProperties.Name="{Binding Title}"/>

    <StackPanel Orientation="Vertical" Grid.Column="1" Background="Transparent">
        <TextBlock Text="{Binding Title}" Foreground="Black" Style="{StaticResource LargeTitleTextStyle}" Margin="20,20,10,0"/>
        <TextBlock Text="{Binding Subtitle}" Foreground="gray" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="20,10,0,30"/>
    </StackPanel>
</Grid>

【问题讨论】:

    标签: xaml windows-store-apps


    【解决方案1】:

    GridView 通过 ItemTemplateSelector 属性公开这一点,您可以创建一个继承自 DataTemplateSelector 的类。一个例子是我有一个 GridView,它绑定了问题和存储库,并希望为每个使用不同的数据模板。

    我的数据模板选择器如下所示:

    public class IssueSummaryTemplateSelector : DataTemplateSelector
    {
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            return item is IssueGroupViewModel ? IssueTemplate : RepositoryTemplate;
        }
    
        public DataTemplate RepositoryTemplate
        {
            get;
            set;
        }
    
        public DataTemplate IssueTemplate
        {
            get;
            set;
        }
    }
    

    然后我将选择器声明为 xaml 中的资源,分配我想用于存储库和问题的两个模板。

    <selectors:IssueSummaryTemplateSelector x:Key="IssueSummarySelector"
                                            IssueTemplate="{StaticResource IssueGridZoomedOutTemplate}"
                                            RepositoryTemplate="{StaticResource IssueGridRepositoryZoomedOutTemplate}"/>
    

    然后您可以在 GridView 上使用它。

    <GridView ItemTemplateSelector="{StaticResource IssueSummarySelector}" />
    

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-11-09
    • 1970-01-01
    • 1970-01-01
    • 2013-09-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-31
    相关资源
    最近更新 更多