在 Elmish.WPF (F#) 中，如何编写绑定以在具有不同模型的另一个 tabcontrol 中支持一个 tabcontrol？

Question

作为一个完全的新手（但学得很快），我一直在研究 Elmish.wpf 但我不清楚如何管理放置在另一个 TabControl 的 TabItem 上的 TabControl。例如在Xaml中，最顶层window是：

<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>

每个视图：DoctorView、NurseView、MedicalRecordsView 等等，都有自己的类似于此的选项卡控件（但具有不同的视图和属性）：

<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>

F# 中最重要的 Window 当前定义为：

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

现在，我想我需要将 DetailType 中的 DoctorView、NurseView 等更改为单独的模型——因为每个模型现在都有自己的选项卡控件和完全不同的数据输入属性，

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

我在想我需要使用 Elmish.WPF Bindings.SubModel。但是，如果我这样做，那么顶部 window 的绑定是如何重写的？如何做到最好？

感谢您对此的任何帮助。

TIA

Answer 1

OP 交叉张贴在 this GitHub issue and I answered their question in this comment。

在 Elmish.WPF (F#) 中，如何编写绑定以在具有不同模型的另一个 tabcontrol 中支持一个 tabcontrol？

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

f#

tabcontrol

elmish-wpf