Collapsible
以自然高度配合弹簧动画展开内容的头部。
示例可交互
Live demo unavailable
<!-- The class reveal animates the content's height; without it the content appears at once. -->
<Expander Theme="{StaticResource UIKitCollapsible}" Classes="reveal" IsExpanded="True" Width="320" HorizontalAlignment="Left">
<Expander.Header>
<DockPanel>
<PathIcon DockPanel.Dock="Right" Data="{StaticResource UIKit.Icon.ChevronsUpDown}" Width="14" Height="14"
Foreground="{DynamicResource UIKit.MutedForeground}" />
<TextBlock Text="Order details" FontWeight="Medium" VerticalAlignment="Center" />
</DockPanel>
</Expander.Header>
<Border Margin="0,8,0,0" Padding="12" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="2 items · Ships tomorrow" />
</Border>
</Expander>用法
为 Expander 指定命名主题：Theme="{StaticResource UIKitCollapsible}"。它本身没有装饰：头部就是触发器，内容则是应用放入的任何东西。使用 reveal 样式类时，内容按自然高度通过 UIKit.Spring.Control 弹簧动画展开和收起，在动画中途切换也能平滑反向；不加该样式类时则立即出现和消失。ExpandDirection="Up" 会把内容放在触发器之前。
示例
ExpandDirection="Up" 会在触发器上方展开内容。
Live demo unavailable
<!-- ExpandDirection Up puts the content before the trigger. -->
<Expander Theme="{StaticResource UIKitCollapsible}" Classes="reveal" ExpandDirection="Up" IsExpanded="True" Width="320" HorizontalAlignment="Left">
<Expander.Header>
<DockPanel>
<PathIcon DockPanel.Dock="Right" Data="{StaticResource UIKit.Icon.ChevronsUpDown}" Width="14" Height="14"
Foreground="{DynamicResource UIKit.MutedForeground}" />
<TextBlock Text="Show less" FontWeight="Medium" VerticalAlignment="Center" />
</DockPanel>
</Expander.Header>
<Border Margin="0,0,0,8" Padding="12" CornerRadius="5.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
Background="{DynamicResource UIKit.Muted}" BorderBrush="{DynamicResource UIKit.Border}">
<TextBlock Text="Revealed above the trigger." />
</Border>
</Expander>