1

作为一个完整的新手(但学习速度很快),我一直在通过 Elmish.wpf 进行学习,但我不清楚如何管理放置在另一个 TabControl 的 TabItem 上的 TabControl。例如,在 Xaml 中,顶级窗口是:

<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# 中的 Top Most 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。但是如果我这样做了,那么如何重写顶部窗口的绑定呢?这怎么做最好?

感谢您对此的任何帮助。

TIA

4

1 回答 1

1

OP 交叉发布在这个 GitHub 问题中,我在这个评论中回答了他们的问题。

于 2020-09-09T04:10:13.013 回答