WPF C# Hide TabControl Items on Application Startup

Question

I've created a start page that loads when the application is run but it is also showing my tabcontrol (two tabitems for editing & diagraming).

How do I hide my tabcontrol items on startup and only show it when a user selects file -> new?

Many thanks!

Xaml:

<TabControl Height="Auto" Name="tabControl1" Width="Auto">
            <TabItem Header="Diagram" Name="DiagramTab"></TabItem>
            <TabItem Header="Rulebase" Name="RuleTab" >
              <Grid>
               <TextBox Height="Auto" Name="RuleText" Width="Auto" Text="" AcceptsTab="True" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" GotFocus="FocusChanged" KeyDown="ContentChanged" HorizontalScrollBarVisibility="Visible" />
              </Grid>
           </TabItem>
        </TabControl>

Here's my file -> new menu item:

 private void NewItem(object sender, RoutedEventArgs e)
    {
        ProcessNewCommand();
    }

private void ProcessNewCommand()
    {
        if (dataChanged)
        {
            string sf = SaveFirst();
            if (sf != "Cancel")
            {
                ClearState();                    
            }
        }
        else
        {
            ClearState();
        }
    }

Style:

<Style TargetType="TabItem" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Grid>
                        <Border 
                            Name="Border"
                            Background="LightBlue"
                            BorderBrush="Black" 
                            BorderThickness="0" 
                            CornerRadius="6,6,0,0" >
                 <ContentPresenter x:Name="ContentSite"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            ContentSource="Header"
                            Margin="12,2,12,2"/>
                        </Border>
                   </Grid>
         <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="LightBlue" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter TargetName="Border" Property="Background" Value="LightGray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

In these scenarios I usually have a ProjectViewModel (or ProjectModel) that gets added as the DataContext of the containing Window. The TabControl could have those tabs bound to the items on the data context.

public class ProjectViewModel : YourViewModelBase
{
    public EditingViewModel Editor { ... }

    public DiagramingViewModel Diagram { ... }
}

So when the NewCommand fires you would say this.DataContext = new ProjectViewModel(). The style below will take care of the rest.

<Window.Resources>
    <Style x:Key="HideWithoutDataContext">
        <Setter Property="UIElement.Visibility" Value="Visible" />
        <Style.Triggers>
            <DataTrigger Binding="{Binding}" Value="{x:Null}">
                <Setter Property="UIElement.Visibility" Value="Collapsed" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<TabControl>
    <TabItem Header="Start Page">
       ...
    </TabItem>
    <TabItem Header="Editor"
             DataContext="{Binding Editor}"
             Style="{DynamicResource HideWithoutDataContext}"/>
    <TabItem Header="Diagram"
             DataContext="{Binding Diagram}"
             Style="{DynamicResource HideWithoutDataContext}"/>
</TabControl>

Answer 2

You could bind the Tab's Visibility property to your application class or whatever you have so you only show the tabs once the user presses New.