2021-08-19 WPF控件专题 TabControl 控件详解

Posted 2021-09-08 微软MVP Eleven

1.TabControl 控件介绍

Winform TabControl 选项卡控件

Wpf TabControl 选项卡集合的控件：在屏幕上多个选项卡共享相同的空间

Selector — ItemsControl：条目控件 ListBox ComboBox

SelectedValue SelectedItem SelectedValuePath DisplayValuePath

选项卡项：TabItem — HeaderedContentControl Header

SelectedContent SelectedItem:当前选择的TabItem对象

TabItem IsSelected 设置或获取选项卡的是否选中

多页面切换

2.具体案例

<Window x:Class="WpfAppTest.TabControlWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAppTest"
        mc:Ignorable="d"
        Title="TabControlWindow" Height="450" Width="800">
        <Grid>
                <!--TabStripPlacement top 选项卡标题栏显示位置-->
                <TabControl Name="tabSystem" HorizontalAlignment="Left" Height="244" Margin="141,90,0,0" VerticalAlignment="Top" Width="398" TabStripPlacement="Top">
                        <TabItem Header="用户信息" >
                                <StackPanel Background="YellowGreen">
                                        <StackPanel Orientation="Horizontal">
                                                <Label Content="用户名"/>
                                                <TextBox Text="admin" Width="100"/>
                                        </StackPanel>
                                        <StackPanel  Orientation="Horizontal" Margin="0,10,0,0">
                                                <Label Content="电话   "/>
                                                <TextBox Text="14756890876" Width="100"/>
                                        </StackPanel>
                                        <Button Content="Button"/>
                                </StackPanel>
                        </TabItem>
                        <TabItem Header="角色信息" IsSelected="True">
                                <Grid Background="LightBlue">
                                       
                                </Grid>
                        </TabItem>
                        <TabItem Header="权限设置">
                                <Grid Background="SeaGreen"/>
                        </TabItem>
                </TabControl>
                <Button Content="获取" HorizontalAlignment="Left" Margin="601,142,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
                <Button Name="btnChange" Content="切换" HorizontalAlignment="Left" Margin="620,208,0,0" VerticalAlignment="Top" Width="75" Click="BtnChange_Click"/>


        </Grid>
</Window>

private void Button_Click(object sender, RoutedEventArgs e)
{
        object content = tabSystem.SelectedContent;//选项的选项卡的Content对象   StackPanel
        object tabItem = tabSystem.SelectedItem;
}

/// <summary>
/// 依次切换的效果
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void BtnChange_Click(object sender, RoutedEventArgs e)
{
        // tabSystem.SelectedItem = tabSystem.Items[2];
        if (tabSystem.SelectedIndex < tabSystem.Items.Count - 1)
                tabSystem.SelectedIndex += 1;
        else
                tabSystem.SelectedIndex =0;
}