WPF Contenu TabControl vide

Question

J'utilise un TabControl pour héberger des espaces de travail, avec la méthode décrite dans l'article This amazing par John Smith. Je me demandais s'il y avait un moyen d'ajouter du contenu, comme une image, au contrôle onglet quand il n'a pas d'onglets. Tri d'un comportement par défaut ou vide. Je voudrais avoir le logo de l'application, ou peut-être quelques flèches utiles a-la première utilisation de Chrome onglet.

Modifier: Cela peut être un peu plus compliqué. J'ai essayé la solution de Chad ci-dessous sur un tabcontrol standard à l'affichage. Cependant, le contrôle de tabulation que j'utilise pour les espaces de travail est rendu par un contrôle de contenu à l'aide d'un datatemplate, et je n'ai pas réussi à faire fonctionner sa solution. La solution de HB a fonctionné avec quelques changements.

<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

Vous pouvez superposer TabControl sur votre image et la masquer s'il n'y a aucun élément, par ex.

<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> 

Ou vous pouvez échanger le contenu d'un ContentControl, en utilisant également Triggers, comme dans la méthode ci-dessus les deux contols affectent la mise en page. par exemple.

<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> 

Notez que ici le DataTrigger devrait se lier directement à la même collection utilisée dans le TabControl. En effet, si vous vous liez au TabControl.Items.Count, cette liaison se rompra au moment où le déclencheur se déclenchera car le TabControl sera déchargé.

Answer 2

Vous pouvez ajouter un arrière-plan au contrôle onglet. Le XAML ressemble à ceci:

<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> 

Assurez-vous simplement que l'image que vous utilisez est dans vos ressources. Ce n'est pas difficile à ajouter en utilisant l'interface graphique en studio visuel. Quant à l'ajout de contrôles, cela pourrait être un peu plus compliqué. Je pense que pour faire cela, vous devez soit cacher le contrôle derrière quelque chose pendant qu'il est vide, soit en dériver et l'implémenter vous-même.