WPF TabControl基本功能的使用

     因为遇到了一个需求，需要将3个不同的模组的功能整合到一起，当时使用GridSplit将一个界面分隔为3个列，每个列中的内容很多，导致UI不美观。也使用Region的方式去折叠，感觉还是使用TabControl的方式更佳。所以就测试了一下该控件的基本功能，了解了这些基本功能后，就可以很好的使用这个控件了。

基本结构如下：

 

1. TabItem的创建

        <TabControl>
            <TabItem Header="Tab 1">xyz</TabItem>
            <TabItem Header="Tab 2">abc</TabItem>
        </TabControl>

效果如下：

2. TabStripPlacement 属性 Header 位置，默认Top，可定义为Left, Right,Bottom

IsSelected 属性 设置TabItem是否处在选中，设置为 true 为选中的状态。

 <TabControl Name="Tabs1" TabStripPlacement="Bottom" Background="LightGray" BorderBrush="Blue"  >

      <TabItem Header="Name" IsSelected="True" Background="Gray">
                 <TextBlock Height="150" Width="200" Margin="0,10,120,0">  
                            <Bold>Purushottam Rathore</Bold>
                 </TextBlock>
        </TabItem>

Name 默认设置选中，设置为Bottom属性效果如下

     <TabItem Header="Image" Background="Gray">
           <Image Source="z.jpg" Height="150" Width="200" />
     </TabItem>

包含图片的效果：

3. 创建 菜单

        <TabControl>
            <TabItem Name="ColorTabItem" Header="Color Tab">
                <TabItem.ContextMenu>
                    <ContextMenu MenuItem.Click="ContextMenuClickEventHandler">
                        <MenuItem Header="Red" Name="RedMenuItem" />
                        <MenuItem Header="Blue" Name="BlueMenuItem" />
                        <MenuItem Header="Orange" Name="OrangeMenuItem" />
                        <MenuItem Header="Test"></MenuItem>
                    </ContextMenu>
                </TabItem.ContextMenu>
                
                <TabItem.Content>Tab Item data here</TabItem.Content>
            </TabItem>
            
            <TabItem Name="ShapeTabItem" Header="Shape Tab"></TabItem>
        </TabControl>

效果如下：

后台响应菜单的指令将字体颜色设置为红色

4. SelectedIndex和SelectedItem 属性。SelectedItem 当前选择TabItem名称，SelectedIndex索引 下一个或者上一个TabItem的代码选择

        <DockPanel>
            <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" Margin="2,5">
                <Button Name="btnPreviousTab" Click="btnPreviousTab_Click">Prev.</Button>
                <Button Name="btnNextTab" Click="btnNextTab_Click">Next</Button>
                <Button Name="btnSelectedTab" Click="btnSelectedTab_Click">Selected</Button>
            </StackPanel>
            <TabControl Name="tcSample">
                <TabItem Header="General">
                    <Label Content="Content goes here..." />
                </TabItem>
                <TabItem Header="Security" />
                <TabItem Header="Details" />
            </TabControl>

        </DockPanel>

 

后台代码：

        private void btnPreviousTab_Click(object sender, RoutedEventArgs e)
        {
            int newIndex = tcSample.SelectedIndex - 1;
            if (newIndex < 0)
                newIndex = tcSample.Items.Count - 1;
            tcSample.SelectedIndex = newIndex;
        }

        private void btnNextTab_Click(object sender, RoutedEventArgs e)
        {
            int newIndex = tcSample.SelectedIndex + 1;
            if (newIndex >= tcSample.Items.Count)
                newIndex = 0;
            tcSample.SelectedIndex = newIndex;
        }

        private void btnSelectedTab_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Selected tab: " + (tcSample.SelectedItem as TabItem).Header);
        }

这样TabControl的基本功能都实现了，可以运用在自己的项目中展示，个人觉得这个控件在多个不同类别的功能中使用很方便。