Question

I am using a TabControl to host workspaces, with the method outlined in This amazing article by John Smith. I was wondering if there is a way to add content, like an image, to the tab control when it has no tabs. Sort of a default or empty behavior. I would like to have the application logo, or maybe some helpful arrows a-la Chrome’s first time use tab.

Edit: This might be a little more complicated. I tried Chad’s solution below on a standard tabcontrol at it displayed. However, the tabcontrol I am using for the workspaces is being rendered by a content control using a datatemplate, and I couldn’t get his solution working with it. HB’s solution worked with some changes.

<DataTemplate x:Key="WorkspacesTemplate">
    <Grid>
        <Image Name="image1" Stretch="Uniform" Source="/Affinity;component/Images/affinity_logo.png" Margin="20"/>
        <TabControl IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding}" 
                ItemTemplate="{StaticResource ClosableTabItemTemplate}" Margin="4">
            <TabControl.Style>
                <Style TargetType="TabControl">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
                        Value="0">
                            <Setter Property="Visibility" Value="Hidden" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TabControl.Style>
        <TabControl.Template>
            <ControlTemplate TargetType="TabControl">
                <Grid Background="White">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto"  VerticalScrollBarVisibility="Hidden" >
                        <StackPanel x:Name="HeaderPanel"
                            Orientation="Horizontal"
                            Panel.ZIndex ="1" 
                            KeyboardNavigation.TabIndex="1"
                            Grid.Column="0"
                            Grid.Row="0"
                            Margin="2,2,2,0"
                            IsItemsHost="true"/>
                    </ScrollViewer>
                        <ContentPresenter x:Name="PART_SelectedContentHost" Grid.Row="1" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          Margin="{TemplateBinding Padding}"
                                          ContentSource="SelectedContent"/>
                </Grid>
            </ControlTemplate>
        </TabControl.Template>
    </TabControl>
    </Grid>
</DataTemplate>

Answer 1

You could overlay the TabControl on your Image and hide it if there are no items in it, e.g.

<Grid>
    <Image />
    <TabControl>
        <TabControl.Style>
            <Style TargetType="TabControl">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
                            Value="0">
                        <Setter Property="Visibility" Value="Hidden" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TabControl.Style>
    </TabControl>
</Grid>

Or you could swap the content of a ContentControl, also using Triggers, as in the above method both contols affect the layout. e.g.

<ContentControl>
    <ContentControl.Resources>
        <Image x:Key="Image"/>
        <TabControl x:Key="TabControl" ItemsSource="{Binding Data}" />
    </ContentControl.Resources>
    <ContentControl.Style>
        <Style TargetType="ContentControl">
            <Setter Property="Content" Value="{StaticResource TabControl}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Data.Count}"
                        Value="0">
                    <Setter Property="Content" Value="{StaticResource Image}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>

Note that here the DataTrigger should bind directly to the same collection used in the TabControl. This is because if you bind to the TabControl.Items.Count this binding will break the moment the trigger fires as the TabControl will be unloaded.