WPF tab control with grid and shared content

Question

I have a wpf tab control in which I would like to have two columns. One column would always show a graph control that will be used to display data depending on the tab selected - but it will always be the same graph control.

Unfortunately, due to the design of the graph control, it is not possible to have more than one graph control mainly because the performance is dismal. I have tried that and it does not work properly.

The other column would show items like combo boxes, radio buttons, etc., that are specific to the selected tab - an example is below

I have also had the tab control in the right-hand column, but the layout of the individual tabs is congested in the right-hand column making for a less than ideal user experience.

Right now, I have the tab control hosted in a grid that has two columns with the column span set to two. For the right-hand pane, I have various group boxes and I control the visibility of those group boxes with triggers using the IsSelected property of the corresponding tab item. This, however, is causing other problems that I have traced to the visibility of the problematic controls.

What I would like to do is modify the template of the control so that I can host all the present controls within the tab control so that the graph control always displays on the left, and that the content of the right-hand tab is controlled by the selected tab.

I figure that doing this will involve either the control template or another template for the tab control, however, I have been unable to find anything like this so far. Is there a way to do something like this and if so, is there a guide to doing so or some hints as to how I might accomplish this?

Thanks.

Answer 1

The way I would approach this requirement would be something like below. And I would apply a template/style to buttons so that they have a look of a TabHeader.

 <Grid Name="MainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal">
            <StackPanel.Resources>
                <ControlTemplate x:Key="ButtonTemplate">
                    <!--Template style-->
                </ControlTemplate>
            </StackPanel.Resources>

            <Button>Root bending</Button>
            <Button>S-N curve bending</Button>
            <Button>S-N curve contact</Button>
        </StackPanel>

        <Grid Grid.Row="1" Grid.Column="0">
            <!--Your graph control goes here-->
        </Grid>

        <Grid Grid.Row="1" Grid.Column="1">
            <!--Show/hide these based on buttons-->
            <!--Control 1 with combo boxes, radio buttons, etc.-->
            <!--Control 2 with combo boxes, radio buttons, etc.-->
            <!--Control 3 with combo boxes, radio buttons, etc.-->
        </Grid>
    </Grid>

Answer 2

you can declare ChartControl as a Resource and use it in every Tab.

To confirm that ChartControl is the same, type something in TextBox and then select another Tab. Text stays the same. Initialization time shown in TextBlock stays the same.

<Window x:Class="XamlApp.Window6"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        Title="TabsWindow" 
        Height="480" Width="640">
    <Window.Resources>

        <Grid x:Key="IamChartControl" Background="Khaki">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <TextBlock Text="{Binding Source={x:Static system:DateTime.Now}}" Margin="5"/>

            <TextBox Text="hello" Grid.Row="1" Margin="5"/>
        </Grid>

    </Window.Resources>

    <Grid>
        <TabControl ItemsSource="{Binding Source='12345'}">
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="2*"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>

                        <ContentControl Content="{StaticResource IamChartControl}"/>

                        <TextBlock Grid.Column="1" Text="{Binding}"/>
                    </Grid>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

Answer 3

Thanks for the suggestions. Given there is a large amount of existing code and since the graph control is not entirely WPF MVVM compliant, the better answer in this case would be the answer posted by Ritesh. Putting the chart in a resource would have required more of a rewrite of the code than I presently have time to do.

However, I figured out the problem that I was seeing - which was some controls were not showing bold text when I thought that they should be. This was entirely my fault.

On each tab for each field, I had multiple different labels that were made visible depending on the result set that the user chooses. It has been a long time since I visited this code, and what I was doing was adding the bold fontweight because it makes the values stand out better.

Embarrassingly, I forgot that I had implemented it this way.

Instead of the multiple different labels approach, I am going use a single label for each field and set the appropriate content binding in a multidata trigger as that will make the somewhat cleaner. Its a pretty complicated app.

I was going to delete this, but others have asked a similar question, however, I think Ritesh's answer is different than the other cases.