继续聊WPF——Expander控件(1)

本文探讨了WPF中的Expander控件,强调了它在创建导航栏方面的实用性,并介绍如何通过ExpandDirection属性控制展开方向。

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

 
欢迎加入.NET技术交流群:189931386
 
Expander是一个可以展开和折叠的控件,它包含两部分——标头和内容。
标头通Header属性来设置,内容通过Conent属性设置,如下面一个简单的例子:
        <Expander ExpandDirection="Down" Width="96">
            <Expander.Header>
                <TextBlock Text="标题" FontWeight="Bold"/>
            </Expander.Header>
            <Expander.Content>
                <TextBlock TextWrapping="Wrap"  Text="这里是内容。"/>
            </Expander.Content>
        </Expander>

Expander控件的Header和Content都可以为任何对象,只要能正常显示即可。
下面就是该控件运行时的截图。
 
### 实现WPF Expander 控件的平滑折叠效果 为了使 WPF 中 `Expander` 控件具有平滑的折叠和展开动画效果,可以通过自定义控件模板并应用视觉状态管理器 (VSM) 来实现。具体来说,在 XAML 文件中定义一个基于时间轴的关键帧动画来控制高度变化。 下面是一个简单的例子展示如何创建带有过渡动画的 `Expander`: ```xml <Window.Resources> <!-- 定义样式 --> <Style TargetType="Expander"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Expander"> <DockPanel> <ToggleButton DockPanel.Dock="Top" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Content="{TemplateBinding Header}"/> <ContentPresenter Name="content" Visibility="Collapsed"/> <ControlTemplate.Triggers> <Trigger Property="IsExpanded" Value="True"> <Setter TargetName="content" Property="Visibility" Value="Visible"/> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Height)" From="0" To="{Binding ElementName=content,Path=(FrameworkElement.ActualHeight)}" Duration="0:0:0.3"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Height)" To="0" Duration="0:0:0.3"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </ControlTemplate.Triggers> </DockPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <!-- 应用样式 --> <StackPanel Margin="10"> <Expander Header="点击这里展开/收起内容"> <TextBlock TextWrapping="Wrap">这里是可折叠的内容区域。</TextBlock> </Expander> </StackPanel> ``` 上述代码片段展示了如何通过设置 `Expander` 的 `ControlTemplate` 和使用触发器配合故事板动画来达到平滑切换的效果[^4]。 #### 动画细节说明 - **进入动作 (`EnterActions`)** 当 `Expander.IsExpanded=True` 时执行此操作序列;在此处配置了当用户打开面板时发生的动画——即从零高逐渐增加至实际所需的高度。 - **退出动作 (`ExitActions`)** 对应于关闭过程中的反向处理逻辑,即将当前显示部分的高度逐步减少回零值。 这种做法不仅限于调整高度属性,还可以应用于其他任何适合做动态变换的特性上,比如宽度、颜色等。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值