在WinRT中使用FlipView和DataTemplateSelector动态显示项目

Question

我正在使用FlipView和DataTemplateSelector来确定在运行时应该应用哪个DataTemplate来显示控件中的项。

我有两个DataTemplate，一个是静态的，另一个可以被不确定数量的项使用。

当前

我的第一个视图显示：

• "这是一个测试 - 内容"

接下来有18个其他视图，看起来像这样：

• "http://www.google.com/ 0"
• "http://www.google.com/ 1"
• "http://www.google.com/ 2"
• 以此类推，直到17

我想要

将"http://www.google.com/"的项目分组为3个在一个视图上。

例如，第二个视图将显示：

• "http://www.google.com/ 0，http://www.google.com/ 1，http://www.google.com/ 2"

第三个视图将显示：

• "http://www.google.com/ 3，http://www.google.com/ 4，http://www.google.com/ 5"

以此类推。

下面是我的代码:

FlipViewDemo.xaml

<Page.Resources>
    <DataTemplate x:Key="FirstDataTemplate">
        <Grid>
            <TextBlock Text="{Binding Content}" Margin="10,0,18,18"></TextBlock>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="SecondDataTemplate">
        <TextBox Text="{Binding Url}"></TextBox>
    </DataTemplate>
    <local:MyDataTemplateSelector x:Key="MyDataTemplateSelector"
                FirstTextTemplate="{StaticResource FirstDataTemplate}"
                SecondTextTemplate="{StaticResource SecondDataTemplate}">
    </local:MyDataTemplateSelector>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <FlipView x:Name="itemGridView" ItemTemplateSelector="{StaticResource MyDataTemplateSelector}" 
    Margin="265,220,284,162">
    </FlipView>
</Grid>

FlipViewDemo.xaml.cs

public sealed partial class FlipViewDemo : Page
{
    public FlipViewDemo()
    {
        this.InitializeComponent();

        var items = new List<BaseClass>();

        items.Add(new FirstItem
        {
            Content="This is a test - Content"
        });

        for (int i = 0; i < 18; i++)
        {
            items.Add(new SecondItem
            {
                Url = "http://www.google.com/ " + i.ToString() 
            });
        }
        itemGridView.ItemsSource = items;
    }
}
public class BaseClass
{
}

public class FirstItem : BaseClass
{
    public string Content { get; set; }
}

public class SecondItem : BaseClass
{
    public string Url { get; set; }
}

public class MyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate FirstTextTemplate { get; set; }
    public DataTemplate SecondTextTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item,
                                                       DependencyObject container)
    {
        if (item is FirstItem)
            return FirstTextTemplate;
        if (item is SecondItem)
            return SecondTextTemplate;

        return base.SelectTemplateCore(item, container);
    }
}

我认为可以通过分组和列表视图来实现这一目标，但我不确定如何操作。

可能这是一个愚蠢的问题，但在谷歌上我找不到答案。同时英语不是我的母语，请原谅打字错误。

- Gerald Hughes

Answer 1

我认为实现你想要的方式是以更好地展示你想要显示的数据的方式来公开数据。然后，您可以使用嵌套控件来显示它。我刚刚把这个东西拼在一起（使用我的自己的测试数据）。这可能不完全是你想要的，但它应该有助于你弄清楚事情。

ViewModel 这里我编写了一个帮助方法来构建包含每个子集合有3个项目的子集合的集合。

class FlipViewDemo
{
    private List<object> mData;

    public IEnumerable<object> Data
    {
        get { return mData; }
    }

    public FlipViewDemo()
    {
        mData = new List<object>();
        mData.Add("Test String");
        for (int i = 0; i < 18; ++i)
        {
            AddData("Test Data " + i.ToString());
        }
    }

    private void AddData(object data)
    {
        List<object> current = mData.LastOrDefault() as List<object>;
        if (current == null || current.Count == 3)
        {
            current = new List<object>();
            mData.Add(current);
        }
        current.Add(data);
    }
}

class TemplateSelector : DataTemplateSelector
{
    public DataTemplate ListTemplate { get; set; }
    public DataTemplate ObjectTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item is List<object>) return ListTemplate;
        return ObjectTemplate;
    }
}

Xaml
这里我使用了一个ItemsControl来垂直堆叠数据中的项。每个项都是三个对象的列表或单个对象。我对每个三个对象的列表使用FlipView，对单个对象则使用简单的ContentPresenter。

<Page.Resources>
    <DataTemplate x:Key="ListTemplate">
        <FlipView
            ItemsSource="{Binding}">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <ContentPresenter
                        Margin="0 0 10 0"
                        Content="{Binding}" />
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </DataTemplate>
    <DataTemplate x:Key="ObjectTemplate">
        <ContentPresenter
            Margin="0 0 10 0"
            Content="{Binding}" />
    </DataTemplate>
    <local:TemplateSelector
        x:Key="TemplateSelector"
        ListTemplate="{StaticResource ListTemplate}"
        ObjectTemplate="{StaticResource ObjectTemplate}" />
</Page.Resources>

<ItemsControl
    ItemsSource="{Binding Data}"
    ItemTemplateSelector="{StaticResource TemplateSelector}" />

注意：通常情况下，您不需要像这样使用模板选择器，但由于您需要在List<T>和Object之间进行选择，我不知道是否有办法仅使用Xaml中的DataTemplate.TargetType属性来识别差异，因为List<t>是一个泛型类型。（我尝试过{x:Type collections:List`1}，但它没有起作用。）

- Xavier

---

嗨Xavier，非常感谢。我尝试在模拟器中运行它，但是什么也没有，只有一个黑屏。这对你有效吗？ - Gerald Hughes

它对我起作用了，但我将其设置与您的原始设置略有不同。我将FlipViewDemo设置为单独的类，并将其设置为视图上的数据上下文，而不是将代码放在代码后面。此外，我将其作为常规的Windows WPF应用程序运行，而不是WinRT（因为我没有设置）。我只打算让代码成为参考，而不是一个可以直接运行的示例。我主要想强调解决您特定问题的区域。 - Xavier

Answer 2

你需要在视图模型中对项目进行分组，并将ItemsSource数据绑定到这些分组。在flipview的itemtemplate中，你需要按照组来显示项目。

public class PageGroup : PageBase {
    public ObservableColection<BaseClass> Items { get; set; }
}

public ObservableCollection<PageBase> Pages { get; set; }

<FlipView ItemsSource="{Binding Pages}">
     <FlipView.ItemTemplate>
         <DataTemplate DataType="local:PageGroup">
             <ItemsControl ItemsSource="{Binding Items}"
                           ItemTemplateSelector="{StaticResource MyDataTemplateSelector}" />
         </DataTemplate>
     </FlipView.ItemTemplate>
 </FlipView>

为了使第一页与其他页面不同而显示不同的内容：

public class FirstPage : PageBase {
    public string Title { get; }
}

Pages.Insert(0, new FirstPage());

你需要在FlipView中使用另一个datatemplaeselector或隐式datatemplates来区分FirstPage和PageGroup。

<FlipView ItemsSource="{Binding Pages}" 
          ItemTemplateSelector="{StaticResource PageTemplateSelector}" />

- Liero

Answer 3

您无需担心根据类别选择适当的模板，您可以在DataTemplate中直接定义类。

<DataTemplate TargetType="{x:Type myNamespace:FirstItem}">
   ...
</DataTemplate>

您需要在页面顶部添加命名空间来指定类的位置：

xmlns:myNamespace="clr-namespace:MyApp.MyNamespace"

- Mike Eason

---

嗨，Mike，谢谢你的回答。我不明白这怎么能帮助我每个视图显示3个项目而不是1个。 - Gerald Hughes

我认为他只是在说您可以删除模板选择器，并更新数据模板本身，以便在它们上定义TargetType。这将简化您现有的代码，但并没有回答您实际的问题。 - Xavier