In Elmish.WPF (F#), how is the Binding written to support a tabcontrol within another tabcontrol with different models?

Question

As a complete newbie (but learning fast), I've been studying through Elmish.wpf but it is unclear to me how to manage a TabControl placed on a TabItem of another TabControl. For example, in Xaml, the top level window is:

<Window x:Class="FrontOffice.MainWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:FrontOffice"
             xmlns:doctor="clr-namespace:Doctor"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    
    <Window.Resources>
        <DataTemplate x:Key="DoctorViewTemplate">
            <doctor:DoctorView />
        </DataTemplate>
        <DataTemplate x:Key="NurseViewTemplate">
            <local:NurseView/>
        </DataTemplate>
        <DataTemplate x:Key="MedicalRecordsViewTemplate">
            <local:MedicalRecordsView/>
        </DataTemplate>
        <DataTemplate x:Key="PatientViewTemplate">
            <local:PatientView/>
        </DataTemplate>
        <DataTemplate x:Key="ProvidersViewTemplate">
            <local:ProvidersView/>
        </DataTemplate>
        <local:PropertyDataTemplateSelector x:Key="templateSelector"
                    DoctorViewTemplate="{StaticResource DoctorViewTemplate}"
                    NurseViewTemplate="{StaticResource NurseViewTemplate}" 
                    MedicalRecordsViewTemplate="{StaticResource MedicalRecordsViewTemplate}"
                    PatientViewTemplate="{StaticResource PatientViewTemplate}"
                    ProvidersViewTemplate="{StaticResource ProvidersViewTemplate}"/>                        
    </Window.Resources>
    <Grid>
        <TabControl ItemsSource="{Binding Tabs}" ContentTemplateSelector="{StaticResource templateSelector}">
            <TabControl.ItemContainerStyle>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Header" Value="{Binding Header}" />
                </Style>
            </TabControl.ItemContainerStyle>
        </TabControl>
    </Grid>
</Window>

Each of the views: DoctorView, NurseView, MedicalRecordsView, etc.., have thier own tab control similar to this (but with different views and properties):

<UserControl x:Class="Doctor.DoctorView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Doctor"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <DataTemplate x:Key="AppointmentsViewTemplate">
            <local:AppointmentsView />
        </DataTemplate>
        <DataTemplate x:Key="ChartStatusViewTemplate">
            <local:ChartStatusView/>
        </DataTemplate>
        <DataTemplate x:Key="CheckInViewTemplate">
            <local:CheckInView/>
        </DataTemplate>
       
        <local:PropertyDataTemplateSelector x:Key="templateSelector"
                    AppointmentsViewTemplate="{StaticResource AppointmentsViewTemplate}"
                    ChartStatusViewTemplate="{StaticResource ChartStatusViewTemplate}" 
                    CheckInViewTemplate="{StaticResource CheckInViewTemplate}"/>
    </UserControl.Resources>
    <Grid>
        <TabControl ItemsSource="{Binding Tabs}" ContentTemplateSelector="{StaticResource templateSelector}">
            <TabControl.ItemContainerStyle>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Header" Value="{Binding Header}" />
                </Style>
            </TabControl.ItemContainerStyle>
        </TabControl>
    </Grid>
</UserControl>

The Top Most Window in F# is currently defined as:

namespace FrontOfficeModels

open Elmish.WPF
open Elmish

module FrontOffice =

    type DetailType =
        | DoctorView
        | NurseView
        | MedicalRecordsView
        | PatientView
        | ProviderView

    type Tab = { Id: int;  Header: string; Type: DetailType }

   
    type Model =
        { Tabs: Tab list
          Selected: int option }

   
    type Msg =
        | Select of int option
    
    let init () =
           { Tabs = [{Id=0;  Header="Doctor View";              Type=DoctorView} 
                     {Id=1;  Header="Nurse View";               Type=NurseView} 
                     {Id=2;  Header="Medical Records View";     Type=MedicalRecordsView} 
                     {Id=3;  Header="Patient View";             Type=PatientView} 
                     {Id=4;  Header="Provider View";            Type=ProviderView }
                    ]
             Selected = Some 3 }

    let update msg m =
        match msg with
        | Select entityId -> { m with Selected = entityId }

    let bindings () : Binding<Model, Msg> list = [
        "Tabs" |> Binding.oneWay (fun m -> m.Tabs)
    ]

    let designVm = ViewModel.designInstance (init ()) (bindings ())

    let main window =
        Program.mkSimpleWpf init update bindings
        |> Program.withConsoleTrace
        |> Program.runWindowWithConfig
          { ElmConfig.Default with LogConsole = true; Measure = true }
          window

Now, I'm thinking I need to change DoctorView, NurseView, etc... in the DetailType to be separate models -- since each will now have its own tab control and completely different properties for data entry,

type DetailType =
        | DoctorView
        | NurseView
        | MedicalRecordsView
        | PatientView
        | ProviderView

and I'm thinking that I need to use Elmish.WPF Bindings.SubModel. But if I do so, how then is the Binding for the top window rewritten? How is this best done?

Thanks for any help with this.

TIA

Answer 1

OP cross posted in this GitHub issue and I answered their question in this comment.