Динамическое отображение элементов с использованием FlipView и DataTemplateSelector в WinRT

Ответ 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, я не знаю, как распознать разницу, используя только DataTemplate.TargetType свойство из Xaml, поскольку List<T> является общим типом. (Я пробовал {x:Type collections:List`1}, и он не работал.)

Ответ 2

Вам нужно сгруппировать элементы в viewmodel и databind 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());

и вам нужно использовать другой Datatemplaeselector или нечетные datatemplates в FlipView, чтобы различать FirstPage и PageGroup

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

Ответ 3

Вам не нужно беспокоиться о выборе соответствующего шаблона на основе типа класса, вы можете просто определить класс в самом DataTemplate.

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

Вам нужно указать, где находится класс, добавив пространство имен в верхней части страницы:

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