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
