Question

I show several movie items in an ObservableCollection using a typical listbox+datatemplate view.
However, I want, in the same page, to be able to quickly change the view to what I define a posterview (i.e. only the posterimages in a wrappanel).

The xaml-page uses a viewmodel as datacontext.

Is there a way to basically replace part of the XAML content with another?
And still keep as little code as possible in the codebehind of the view.

I’ve seen WPF examples that for example use a DataTrigger bound to a viewmodelproperty which is very clean,
such as this article
… but Windows Phone does not have a DataTriggers, correct?

I’m trying to go for an MVVM-ish approach, so as little code as possible in the view code-behind is required.

So I want to change this:

<ContentControl DataContext="{Binding CinemaShowsOverview }" Template="{StaticResource ListView}" />

To:

<ContentControl DataContext="{Binding CinemaShowsOverview }" Template="{StaticResource PosterView}" />

Answer 1

DataTemplates with a DataTemplateSelector would be the way to go around this problem.

Base Data Template Selector:

public class DataTemplateSelector : ContentControl
{
    public virtual DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        throw new NotImplementedException();
    }

    protected override void OnContentChanged(object oldContent, object newContent)
    {
        base.OnContentChanged(oldContent, newContent);

        ContentTemplate = SelectTemplate(newContent, this);
    }
}

Specialized Template Selector for your CinemaShowsOverview

public class CinemaShowsTemplateSelector : DataTemplateSelector
{
    public DataTemplate ListTemplate
    {
        get;
        set;
    }

    public DataTemplate PosterTemplate
    {
        get;
        set;
    }

    public DataTemplate DefaultTemplate
    {
        get;
        set;
    }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item == null)
            return DefaultTemplate;

        var viewModel = item as CinemaShowsOverview;
        if (viewModel != null)
            return viewModel.IsPoster ? PowerTemplate : ListTemplate;
        else
            return DefaultTemplate;
    }
}

And then in XAML (replacing your current ContentControl):

<assets:CinemaShowsTemplateSelector PosterTemplate="{StaticResource PosterView}"
                                    ListTemplate="{StaticResource ListView}"
                                    Content="{Binding CinemaShowsOverview}">