Binding List of user controls to flipview?

Question

I am planning to implement horizontal list of user controls, which i want to add it to the flip view during runtime, I tried the following code:

<FlipView Grid.Row="2" Name="SlideFlipView"
              ItemsSource="{x:Bind SlideViews}"
              SelectionChanged="SlideFlipView_SelectionChanged"
              Background="AliceBlue">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <Frame Name="MenuDetailFrame" SourcePageType="{Binding}"/>
            </DataTemplate>
        </FlipView.ItemTemplate>
</FlipView>

Class looks like the following code:

 public sealed partial class MenuDetailPage : Page
 {
    private List<object> SlideViews;

    public MenuDetailPage()
    {
        this.InitializeComponent();
        LoadInitials();
    }

    private void LoadInitials()
    {
        SlideViews = new List<object>
        {
            typeof(TopImageBottomTextControl),
            typeof(TopTextBottomImageControl)
        };
    }
 }

but the user control doesn't appear in the flip when I run the program. Let me know if I am missing something here

Answer 1

According to the "Frame Class" :

SourcePageType can be set in XAML, using string-to-type conversion that's interpreted using XAML namespace mappings, but that's rarely done. It's a better practice to have code at the app level that tracks activation and whether a suspended app is resuming, which then uses Frame.Navigate to set the current page.

For your requirement, you could bind the user control object to the Content of Frame.

private void LoadInitials()
{
    SlideViews = new List<object>
 {
    new TopImageBottomTextControl(),
    new TopImageBottomTextControl()
 };
}

Usage

<FlipView Name="SlideFlipView"
          ItemsSource="{x:Bind SlideViews}"
          SelectionChanged="SlideFlipView_SelectionChanged"
          Background="AliceBlue">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Frame Name="MenuDetailFram"  Content="{Binding}" />
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Answer 2

following code without datatemplate worked for me:

<FlipView Grid.Row="2" 
          Name="SlideFlipView" 
          ItemsSource="{x:Bind SlideViews}"
          SelectionChanged="SlideFlipView_SelectionChanged"
          Background="AliceBlue">
</FlipView>

initialization of slideviews object in Class looks like

private void LoadInitials()
{
  SlideViews = new List<object>
  {
    new UserControl1(),
    new UserControl2()
  };
}