DataTemplate in FlipView having 2 UserControls, one at a time

Question

I'm building a picture viewing app. In landscape, it opens like an open book showing 2 consecutive images. In portrait, it shows an individual image. I'm thinking of using a UserControl for each of these 2 ViewState inside the DataTemplate of my FlipView. And then change their Visibility in the Current_SizeChanged event.

Here's my Xaml with only one UserControl set to the DataTemplate:

<FlipView x:Name="flipView1" SelectionChanged="flipView1_SelectionChanged">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <local:portraitControl/>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

But a DataTemplate can't contain more than one UserControl. Is there a way I can bind a local UserControl to my DataTemplate to assign to it my "portraitControl" or "landscapeControl" in the code not in Xaml?

Answer 1

What you need to do is to create two data templates, each has a user control:

<DataTemplate x:key = "portraitTemplate">
            <local:portraitControl/>
 </DataTemplate>

 <DataTemplate x:key = "landscapeTemplate">
            <local:landscapeControl/>
 </DataTemplate>

in your Current_SizeChanged event switch between templates:

flipView1.ItemTemplate = Resources["portraitTemplate"] as DataTemplate;