XAML- How to add images to a <TabControl> tag

Question

I am developing a 'tabbed' GUI for my application, using XAML to present the GUI to the user.

I am currently displaying a few tabs, with a different aspect of the application displayed on each one.

I have a couple of icons that display the 'connectivity status' of the application to a remote server (ie one image is displayed if the application is connect to the server, and another image is displayed if it's not connected). These images are currently displayed inside one of the tabbed displays, but I want to move them onto the 'tab' bar (on the far right hand side of the application window), so that they will always be visible, no matter what tab the user is currently viewing.

My XAML is currently structured like this:

<Grid>
    <TabControl ...>
        <TabItem>
            ...
        </TabItem>
        <TabItem ...>
            <StackPanel>
                <Grid>
                    ...
                    <Image ... />
                    <Image ... />
                </Grid>
            </StackPanel>
        </TabItem>
    </TabControl>
</Grid>

Basically, one of the images in the <Image> tags is displayed to indicate that the application is connected to the server, and the other image is displayed to indicate that the application is not connected to the server. They have both been placed in the same location inside the application, and there is a method that checks whether the application is connected to the server or not, and displays the appropriate image based on the value that the method returns.

What I want to do, is move these <Image> tags into the main <TabControl> tag, so that these images can be displayed on the 'tab menu', but on the far right hand side of the window (as the various tabs available to the user are displayed on the far left). This would then mean that those images are displayed no matter what tab the user is currently viewing.

Is there a way that I can do this? I have tried adding the <Image> tags directly inside the <TabControl> tags, but the images are not displayed when I run my application... Anyone have any suggestions for how I can achieve what I'm looking to do here?

Answer 1

To add imaginary TabBar , you should create new RowDefinition in Template of TabControl . Let me show an example:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="WpfApplication2.MainWindow"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/>
    <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
    <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
        <Setter Property="Padding" Value="2"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="ColumnDefinition0"/>
                            <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                            <RowDefinition x:Name="RowDefinition2" Height="0.1*"/>
                            <RowDefinition x:Name="RowDefinition1" Height="*"/>
                        </Grid.RowDefinitions>
                        <TabPanel x:Name="headerPanel" Background="Yellow" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                        <StackPanel Grid.Row="1" Orientation="Horizontal" FlowDirection="RightToLeft">
                            <Image Source="/Images/1.png" />
                            <Image Source="/Images/2.png" />
                            <Image Source="/Images/3.png" />                                
                        </StackPanel>
                        <Border x:Name="contentPanel" BorderBrush="Green" BorderThickness="5" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="2" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                            <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/>
                            <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                            <Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                            <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="headerPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="contentPanel" Value="1"/>
                            <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                            <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                            <Setter Property="Margin" TargetName="headerPanel" Value="2,2,0,2"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                            <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                            <Setter Property="Grid.Column" TargetName="headerPanel" Value="1"/>
                            <Setter Property="Grid.Column" TargetName="contentPanel" Value="0"/>
                            <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
                            <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
                            <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                            <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                            <Setter Property="Margin" TargetName="headerPanel" Value="0,2,2,2"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="FooTabControl" TargetType="{x:Type TabControl}">
        <!--This style is intended to be empty just for show that you can declare as many styles as you want-->
    </Style>
    <Style x:Key="FooButton"  TargetType="{x:Type Button}">
        <!--This style is intended to be empty just for show that you can declare as many styles as you want-->
    </Style>
</Window.Resources>
<Grid Name="grid">
    <TabControl Style="{DynamicResource TabControlStyle1}">
        <TabItem Header="1">1</TabItem>
        <TabItem Header="2">2</TabItem>
        <TabItem Header="3">3</TabItem>
    </TabControl>
</Grid>
</Window>