代码之家 › 专栏 › 技术社区 › Noble-Surfer

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

xaml image wpf c#

3

Noble-Surfer · 技术社区 · 10 年前

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

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

我有两个图标,显示应用程序到远程服务器的“连接状态”(即,如果应用程序连接到服务器,则显示一个图像,如果未连接,则显示另一个图像)。这些图像当前显示在一个选项卡式显示器中,但我想将它们移动到“选项卡”栏(在应用程序窗口的最右侧)上,这样无论用户当前查看的是什么选项卡,它们都将始终可见。

我的XAML当前的结构如下:

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

基本上 <Image> 将显示标记以指示应用程序已连接到服务器,并显示另一个图像以指示该应用程序未连接到服务器。它们都放在应用程序内的同一位置,有一个方法可以检查应用程序是否连接到服务器,并根据方法返回的值显示适当的图像。

我想做的是移动这些 <图像> 标签进入主管道 <TabControl> 标签,以便这些图像可以显示在“选项卡菜单”上,但在窗口的最右侧(因为用户可用的各种选项卡显示在最左侧)。这意味着无论用户当前查看的是什么选项卡,都会显示这些图像。

我有办法做到这一点吗?我已尝试添加 <图像> 标签直接位于 <选项卡控件> 标签,但当我运行应用程序时,图像不会显示……有人对我如何实现我在这里的目标有任何建议吗?

1 回复 | 直到 10 年前

1

2

StepUp 10 年前

添加假想的 选项卡栏 ,您应该创建新的 RowDefinition 在里面 Template 属于 TabControl 让我举个例子:

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