WPF 控件专题 TabControl控件详解

article/2025/10/10 23:27:32

1、TabControl 介绍

TabControl 表示包含多个项的控件，这些项共享屏幕上的同一空间，每个区域都可以通过单击通常位于控件顶部的选项卡标题来访问。也叫选项卡控件。

**************************************************************************************************************

2、常用属性介绍

   FontFamily：字体系列；   FontSize：字体大小；   FontStretch：字体在屏幕上紧缩或加宽的程度；FontWeight：字体粗细；

   Background：背景；   BorderBrush：边框颜色；   BorderThickness：边框宽度；   Foreground：前景色；

   Width/Height：宽度/高度；   Name：元素标识名称；   IsEnabled：使能，是否可用；   Margin：外边距；

   Opacity：透明度；   Visibility：可见性；   IsVisible：是否可见；   FlowDirection：其子元素的流动方向；

   LayoutTransform：在执行布局时应该应用于此元素的图形转换方式。   RenderTransform：元素的呈现位置的转换信息；

   RenderTransformOrigin：由RenderTransform声明的任何可能呈现转换的中心点，相对于元素的边界。

   HorizontalAlignment/VerticalAlignment：在父元素中组合此元素时所应用的水平对齐特征/垂直对齐特征。

    HorizontalContentAlignment/VerticalContentAlignment：控件内容的水平对齐方式/垂直对齐方式。

   Items：获取用于生成 ItemsControl 的内容的集合。ItemTemplate：获取或设置用来显示每个项的 DataTemplate。

   ItemsPanel：获取或设置模板，该模板定义对项的布局进行控制的面板。

   ItemsSource：获取或设置用于生成 ItemsControl 的内容的集合。

   SnapsToDevicePixels：获取或设置一个值，该值确定在呈现过程中，此元素的呈现是否应使用特定于设备的像素设置。

   SelectedContent：获取当前选择的 TabItem 的内容。

   SelectedIndex：获取或设置当前选择中第一项的索引，如果选择为空，则返回负一(-1)。

SelectedItem：获取或设置当前选择中的第一项，或者，如果选择为空，则返回 null。

SelectedValue：获取或设置通过使用 SelectedItem 而获取的 SelectedValuePath 的值。

SelectedValuePath：获取或设置用于从 SelectedValue 获取 SelectedItem 的路径。

**************************************************************************************************************

3、具体示例代码

<WrapPanel><TabControl Width="250" Height="200" Background="#555a64"><TabItem x:Name="TabItem1"><TabItem.Header><StackPanel Orientation="Horizontal"><Ellipse Width="10" Height="10" Fill="DarkGray"/><TextBlock>Tab 1</TextBlock></StackPanel></TabItem.Header><StackPanel><TextBlock >Enter some text</TextBlock><TextBox Name="textBox1" Width="150" Height="30"/></StackPanel></TabItem><TabItem  x:Name="TabItem2" Header="Tab 2"><TextBlock Text="{Binding ElementName=textBox1, Path=Text}"/></TabItem></TabControl><TabControl TabStripPlacement="Left" Width="250" Height="200" Margin="20"><TabItem Header="General"><Label Content="Content goes here1..." /></TabItem><TabItem Header="Security" ><StackPanel Background="#f1ef9f"><Label Content="Content goes here2..." /><Label Content="Content goes here2..." /><Button Content="Security" Width="150" Height="35"/></StackPanel></TabItem><TabItem Header="Details" ><Border Background="#f0c01f" ></Border></TabItem></TabControl>
</WrapPanel>

**************************************************************************************************************

4、效果图