WPF 入门教程Expander控件

技术社区

该扩展控制将为您提供的能力，以隐藏/显示一块内容。这通常是一段文本，但由于 WPF 的灵活性，它可以用于任何类型的混合内容，如文本、图像甚至其他 WPF 控件。为了了解我在说什么，这里有一个例子：

请注意箭头部分 - 一旦您单击它，Expander 控件将展开并显示其内容：

它的代码当然非常简单：

<Expander>  
    <TextBlock TextWrapping="Wrap" FontSize="18">  
    Here we can have text which can be hidden/shown using the built-in functionality of the Expander control.  
    </TextBlock>  
</Expander>

默认情况下，扩展器不会展开，因此看起来就像在第一个屏幕截图中一样。用户可以通过单击它来展开它，或者您可以使用 IsExpanded 属性使其最初展开：

<Expander IsExpanded="True">

如果您需要了解 Expander 控件的当前状态，您当然也可以在运行时读取此属性。

进阶内容

扩展器的内容只能是一个控件，就像在我们使用 TextBlock 控件的第一个示例中一样，但没有什么可以阻止您制作它，例如面板，然后它可以容纳任意数量的子控件。这允许您在扩展器中托管丰富的内容，从文本和图像到例如 ListView 或任何其他 WPF 控件。

下面是一个更高级的内容示例，其中我们使用了多个面板、文本和图像，甚至是一个 TextBox 控件：

<Expander Margin="10">
    <StackPanel Margin="10">
    <DockPanel>
        <Image Source="/WpfTutorialSamples;component/Images/question32.png" Width="32" Height="32" DockPanel.Dock="Right" Margin="10"></Image>
        <TextBlock TextWrapping="Wrap" FontSize="18">
            Did you know that WPF is really awesome? Just enter your e-mail address below and we'll send you updates:
        </TextBlock>
    </DockPanel>
    <TextBox Margin="10">john@doe.org</TextBox>
    </StackPanel>
</Expander>

展开方向

默认情况下，Expander 控件将占用其容器控件内的所有可用空间，然后根据 ExpandDirection 属性的值展开，该属性默认设置为 Down 。您可以在上面的屏幕截图中看到这一点，因为箭头位于控件的顶部，它根据控件是否已展开而向上或向下指向。

如果更改 ExpandDirection 属性的值，它将影响 Expander 控件的行为和外观。例如，如果您将值更改为 Right ，则箭头将放置在左侧并指向左/右而不是上/下。下面是一个例子：

<Expander Margin="10" ExpandDirection="Right">
    <TextBlock TextWrapping="Wrap" FontSize="18">
        Here we can have text which can be hidden/shown using the built-in functionality of the Expander control.
    </TextBlock>
</Expander>

您当然也可以将此属性设置为 Up 或 Left - 如果这样做，按钮将放置在底部或右侧。

自定义标题

在到目前为止的所有示例中，Expander 控件几乎没有外观，除了用于显示/隐藏内容的按钮 - 它被绘制为内部带有箭头的圆形按钮。不过，您可以使用 Header 属性轻松自定义控件的标题区域。这是我们使用此属性在按钮旁边添加说明文本的示例：

<Expander Margin="10" Header="Click to show/hide content...">
    <TextBlock TextWrapping="Wrap" FontSize="18">
        Here we can have text which can be hidden/shown using the built-in functionality of the Expander control.
    </TextBlock>
</Expander>

但是您不必满足于一段简单的文本 - Header 属性将允许您向其添加控件，以创建更加自定义的外观：

<Expander Margin="10">
    <Expander.Header>
    <DockPanel VerticalAlignment="Stretch">
        <Image Source="/WpfTutorialSamples;component/Images/bullet_green.png" Height="16" DockPanel.Dock="Left" />
        <TextBlock FontStyle="Italic" Foreground="Green">Click to show/hide content...</TextBlock>