MaterialDesignFilledTabControl Binding Issues

[Momongaka]

I have been trying to use the TabControl style MaterialDesignFilledTabControl. When I try to use it, it results in binding issues. When I change that style to MaterialDesignNavigationRailTabControl all the binding errors go away. I am not sure exactly what is causing the issue. When I run the UI and I try to use the combo boxes within the MaterialDesignFilledTabControl tab it breaks the UI. The combo box works fine with the MaterialDesignNavigationRailTabControl.

<TabControl ItemsSource="{Binding Tabs}"
                TabStripPlacement="Left"
                Style="{StaticResource MaterialDesignFilledTabControl}"
                materialDesign:ColorZoneAssist.Mode="Standard" Loaded="TabControl_OnLoaded">
    <TabControl.ItemTemplate>
        <DataTemplate DataType="uiHelpers:TabViewModel">
            <Viewbox
                Height="Auto">
                <TextBlock Text="{Binding TabName}"/>
            </Viewbox>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate DataType="uiHelpers:TabViewModel">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Stretch"  Height="Auto">
                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Margin="10 0 10 0" VerticalAlignment="Stretch"  Height="Auto">
                    <DataGrid ItemsSource="{Binding ProjectViewModel.ParameterList}" AutoGenerateColumns="False" Background="{DynamicResource MaterialDesignBackground}">
                        <DataGrid.Resources>
                            <DataTemplate x:Key="TextBox" DataType="core:ParamViewModel">
                                <TextBox Text="{Binding SelectedValue, Mode=TwoWay}"/>
                            </DataTemplate>
                            <DataTemplate x:Key="ComboBox" DataType="core:ParamViewModel">
                                <ComboBox 
                                            ItemsSource="{Binding Options}"
                                            SelectedItem="{Binding SelectedValue, Mode=TwoWay}"
                                            Style="{StaticResource MaterialDesignOutlinedComboBox}"/>
                            </DataTemplate>
                            <local:DynamicDataTemplateSelector x:Key="DynamicDataTemplateSelector"/>
                        </DataGrid.Resources>
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="User Parameters" Binding="{Binding UserParameterName}" IsReadOnly="True"/>
                            <DataGridTemplateColumn Header="Current Value" CellTemplateSelector="{StaticResource DynamicDataTemplateSelector}"/>
                        </DataGrid.Columns>
                    </DataGrid>
                </ScrollViewer>
            </StackPanel>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

[ElieTaillard]

Is it possible to provide us a test repo with a minimal and reproducible example please ?

[Momongaka]

Is it possible to provide us a test repo with a minimal and reproducible example please ?

I can. Inside the solution find the "Test" Project. If you build that it will work. The issue is the Test project UI does not show that there are binding errors, but if you try to use the combo boxes in the UI it will break because of the binding errors. I hope that makes sense once you try it. Thank you.

Please see the attached link. DJFAutomation

[Keboo]

Issue reproduces on the test project as described

[Momongaka]

How can I help?

[Keboo]

I took a run at this on my stream last week. Unfortunately, the solution was not as straight forward as I had hoped. If you want to take a stab at a fix for it, feel free to post any additional info you find or a PR for a fix. I suspect the issue is with some of the visual tree differences between those two styles. As a first pass, it would be helpful to identify which differences are causing that behavior.

[andyste1]

This one has caught me out too, having just started using this MD toolkit today. I only needed a basic "flat" tab control, along the top of my UI, so my workaround was to copy the templates "MaterialDesignTabControlBase" & "MaterialDesignFilledTabControl" into my project and rename them. Then in the former I replaced the ScrollViewer (inside the ColorZone "PART_HeaderZone") with a TabPanel:

<TabPanel x:Name="HeaderPanel" Panel.ZIndex="1" Margin="0,0,4,-1" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" /> I also removed all of the ControlTemplate triggers. It's sufficient for my needs as I'm unlikely to want to customise the tab control behaviour/appearance beyond this, and it might help others in the absence of an official fix.

The only change to my copied and renamed "MaterialDesignFilledTabControl" template was the BasedOne=, which now references my copied/renamed/modified version of the "MaterialDesignTabControlBase" template.