WPF学习之路（十二）控件（HeaderedContent控件）-优快云博客

本文介绍了WPF中的GroupBox和Expander控件的使用方法，包括如何自定义它们的外观和行为。通过实例展示了如何在用户界面上组织和展示数据，提供了丰富的控件定制技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GroupBox

用来组织多种控件的常见控件，因为是内容空间，只能直接包含一项，需要使用面板一类的中间空间。

Header和Content可以是任意元素

<GroupBox>
    <GroupBox.Header>
        <WrapPanel Margin="5">
            <Image Source=".\Image\icon.png"></Image>
            <TextBlock Text="Database List: " FontSize="20" />
        </WrapPanel>
    </GroupBox.Header>
    <GroupBox.Content>
        <StackPanel TextBlock.FontSize="20" Margin="5">
            <TextBlock Text="DB001" />
            <TextBlock Text="DB002" />
            <TextBlock Text="DB003" />
            <TextBlock Text="DB004" />
            <TextBlock Text="DB005" />
        </StackPanel>
    </GroupBox.Content>
</GroupBox>

更多内容

http://www.dotnetperls.com/groupbox-wpf

https://msdn.microsoft.com/en-us/library/system.windows.controls.groupbox(v=vs.110).aspx

Expander

类似GroupBox，包含一个按钮可以展开或折叠内容

<StackPanel Margin="5">
    <Expander>
        <Expander.Header>
            <WrapPanel Margin="2">
                <Image Source=".\Image\icon.png" Height="20" ></Image>
                <TextBlock Text="Database List: "></TextBlock>
            </WrapPanel>
        </Expander.Header>
        <Expander.Content>
            <StackPanel TextBlock.FontSize="15">
                <TextBlock Text="DB001" />
                <TextBlock Text="DB002" />
                <TextBlock Text="DB003" />
                <TextBlock Text="DB004" />
            </StackPanel>
        </Expander.Content>
    </Expander>
    <Expander ExpandDirection="Left">
        <Expander.Header>
            <WrapPanel Margin="2">
                <Image Source=".\Image\icon.png" Height="20" ></Image>
                <TextBlock Text="Database List: "></TextBlock>
            </WrapPanel>
        </Expander.Header>
        <Expander.Content>
            <StackPanel TextBlock.FontSize="15">
                <TextBlock Text="DB001" />
                <TextBlock Text="DB002" />
            </StackPanel>
        </Expander.Content>
    </Expander>
    <Expander ExpandDirection="Right">
        <Expander.Header>
            <WrapPanel Margin="2">
                <Image Source=".\Image\icon.png" Height="20" ></Image>
                <TextBlock Text="Database List: "></TextBlock>
            </WrapPanel>
        </Expander.Header>
        <Expander.Content>
            <StackPanel TextBlock.FontSize="15">
                <TextBlock Text="DB001" />
                <TextBlock Text="DB002" />
            </StackPanel>
        </Expander.Content>
    </Expander>
    <Expander ExpandDirection="Up">
        <Expander.Header>
            <WrapPanel Margin="2">
                <Image Source=".\Image\icon.png" Height="20" ></Image>
                <TextBlock Text="Database List: "></TextBlock>
            </WrapPanel>
        </Expander.Header>
        <Expander.Content>
            <StackPanel TextBlock.FontSize="15">
                <TextBlock Text="DB001" />
                <TextBlock Text="DB002" />
            </StackPanel>
        </Expander.Content>
    </Expander>
</StackPanel>

View Code

简化代码

创建一个ExpanderDemo类

public partial class ExpanderDemo : Expander
{
    public ExpanderDemo()
    {
        InitializeComponent();
    }
}

<Expander x:Class="Alex_WPFControl.ExpanderDemo"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            >

    <Expander.Header>
        <WrapPanel Margin="2">
            <Image Source=".\Image\icon.png" Height="20" ></Image>
            <TextBlock Text="Database List: "></TextBlock>
        </WrapPanel>
    </Expander.Header>
    <Expander.Content>
        <StackPanel TextBlock.FontSize="15">
            <TextBlock Text="DB001" />
            <TextBlock Text="DB002" />
　　　　　　　　...
        </StackPanel>
    </Expander.Content>
</Expander>

Window.xaml

<StackPanel>
    <local:ExpanderDemo />
    <local:ExpanderDemo ExpandDirection="Left" />
    <local:ExpanderDemo ExpandDirection="Right" />
    <local:ExpanderDemo ExpandDirection="Up" />
</StackPanel>