WPF Empty TabControl Content

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.

Answer 2

You can add a background to the tab control. The XAML looks something like this:

<TabControl Height="290" HorizontalAlignment="Left" Margin="12,350,0,0" Name="TabControl" VerticalAlignment="Top" Width="481" TabIndex="200">
    <TabControl.Background>
        <ImageBrush ImageSource="/EffectsViewer;component/res/someimage.png" />
    </TabControl.Background>
</TabControl>

Just be sure the image you use is in your resources. Its not to hard to add using the GUI in visual studio. As for adding controls, that might be a little more complicated. I think to do that you would need to either hide the control behind something while its empty, OR derive from it and implement it yourself.