WPF学习笔记——14）带标题的内容控件

带标题的内容控件指的是同时有一个内容属性和一个标题属性的控件。

常见的带标题的内容控件有GroupBox、TableItem、Expander。

1、GroupBox

GroupBox是比较简单的一个控件，显示为一个带标题的方框。

方框内可以添加一个内容，我们一般加入布局容器，这样就可以放置很多元素到布局容器。

标题的设置我们通过属性特性Header来设置

2、TabItem

TabItem是选项卡组件，一般是作为TabControl的一个元素。

一个TabControl可以有很多TabItem，每一个选项卡可以显示不同的内容，也可以通过设置TabItem的IsSelected方法来代码调节显示选项卡。

        <TabControl Margin="5" Name="tabControl1" TabStripPlacement="Top">
            <TabItem Header="tabItem1" Name="tabItem1">
                <Grid>
                    <StackPanel>
                        <TextBlock Margin="5" Height="200" Name="textBlock1" Text="这里是选项卡1" />
                        <Button Margin="5" Height="20" Name="button1" Click="button1_Click">跳转到选项卡2</Button>
                        <Button Margin="5" Height="20" Name="button2" Click="button2_Click">跳转到选项卡3</Button>
                    </StackPanel>
                </Grid>
            </TabItem>
            <TabItem Header="tabItem2" Name="tabItem2">
                <TextBlock Margin="5" Name="textBlock2" Text="这里是选项卡2" />
            </TabItem>
            <TabItem Header="tabItem3" Name="tabItem3">
                <TextBlock Margin="5" Name="textBlock3" Text="这里是选项卡3" />
            </TabItem>
        </TabControl>

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            this.tabItem2.IsSelected = true;
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            this.tabItem3.IsSelected = true;
        }

下面是效果：

3、Expander

Expander控件是一个比较有意思的带标题内容控件，它可以通过某个箭头按钮来显示或者隐藏空间里面的内容，为用户的操作带来的便利。

        <StackPanel Margin="5">
            <Expander Header="expander1" Height="82" Name="expander1">
                <TextBlock TextWrapping="Wrap" FontSize="40">内容1</TextBlock>
            </Expander>
            <Expander Header="expander2" Height="89" Name="expander2">
                <TextBlock TextWrapping="Wrap" FontSize="40">内容2</TextBlock>
            </Expander>
            <Expander Header="expander3" Height="87" Name="expander3">
                <TextBlock TextWrapping="Wrap" FontSize="40">内容3</TextBlock>
            </Expander>
        </StackPanel>

 下面是效果：