XAML-如何将图像添加到<TabControl>标记

Question

我正在为我的应用程序开发一个“选项卡式”GUI，使用XAML向用户呈现GUI。

我目前正在显示几个选项卡，并在每个选项卡上显示应用程序的不同方面。

我有两个图标显示应用程序到远程服务器的“连接状态”（即，如果应用程序连接到服务器，则显示一个图像，如果没有连接，则显示另一个图像）。这些图像目前显示在其中一个选项卡式显示器中，但我想将它们移动到“选项卡”栏（位于应用程序窗口的最右侧），以便它们始终可见，无论选项卡是用户正在查看。

我XAML是目前的结构是这样的：

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

基本上，显示在<Image>标签图像中的一个，以指示该应用程序连接到服务器，并且被显示在其它图像，以指示该应用程序未连接到服务器。它们都被放置在应用程序中的相同位置，并且有一种方法检查应用程序是否连接到服务器，并根据方法返回的值显示适当的图像。

我想要做的，就是将这些<Image>标签到主<TabControl>标签，让这些影像可以在“选项卡菜单”上显示，而是在窗口的最右边（如各种标签用户可用显示在最左侧）。这意味着无论用户当前正在查看哪个标签，都会显示这些图像。

有没有办法可以做到这一点？我试图直接在<TabControl>标签中添加<Image>标签，但是当我运行我的应用程序时，图像不显示...任何人有任何建议可以实现我在这里要做的事情？

Answer 1

要添加虚的TabBar，你应该在TabControlTemplate创造新RowDefinition。让我举个例子：

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