[英]XAML- How to add images to a <TabControl> tag
我正在为我的应用程序开发一个“选项卡式”GUI,使用XAML向用户呈现GUI。
我目前正在显示一些选项卡,每个选项卡上都显示应用程序的不同方面。
我有几个图标显示应用程序与远程服务器的“连接状态”(即,如果应用程序连接到服务器,则显示一个图像,如果未连接,则显示另一个图像)。 这些图像当前显示在其中一个选项卡式显示中,但是我想将它们移动到“选项卡”栏上(位于应用程序窗口的最右侧),这样它们将始终可见,无论哪个选项卡用户目前正在查看。
我的XAML目前的结构如下:
<Grid>
<TabControl ...>
<TabItem>
...
</TabItem>
<TabItem ...>
<StackPanel>
<Grid>
...
<Image ... />
<Image ... />
</Grid>
</StackPanel>
</TabItem>
</TabControl>
</Grid>
基本上,显示<Image>
标签中的一个图像以指示应用程序连接到服务器,并显示另一个图像以指示应用程序未连接到服务器。 它们都被放置在应用程序内的相同位置,并且有一种方法可以检查应用程序是否连接到服务器,并根据方法返回的值显示相应的图像。
我想要做的是将这些<Image>
标签移动到主<TabControl>
标签中,以便这些图像可以显示在“标签菜单”上,但是在窗口的最右侧(作为各种标签)用户可用的信息显示在最左侧)。 这意味着无论用户当前正在查看哪个标签,都会显示这些图像。
有没有办法可以做到这一点? 我已经尝试在<TabControl>
标签内直接添加<Image>
标签,但是当我运行我的应用程序时,图像不会显示...任何人对我如何实现我在这里要做的事情有任何建议?
要添加虚构的TabBar ,您应该在TabControl
Template
中创建新的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.