WPF/XAML -动画扩展器内容

Question

我正在尝试使用xaml(类似于windows 10使用的)添加扩展器动画，单击它从扩展器栏下滑动新信息(从底部滚动到顶部)(. 我想要实现的一个例子可以在Windows 10中找到:进入控制面板，电源选项，然后单击"显示其他计划"旁边的展开器。

我已经让动画工作，但如果我设置窗口属性SizeToContent="Height"(我最终想使用，以便窗口大小自动调整以适应其内容)展开的信息从顶部滚动到底部相反!如果我用手柄手动调整窗口高度(即使只是1像素)，然后再次点击展开器，那么动画就会按照我想要的方式工作(从下到上))，但随后展开的信息会滚动过窗口顶部>_<</p>

任何想法?

xaml:

<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp"
mc:Ignorable="d"
Title="MainWindow" Width="480"
SizeToContent="Height">
<StackPanel VerticalAlignment="Bottom">
<!-- --><TextBlock Margin="5 0 0 0" Height="21">TITLE</TextBlock>
<!-- First Panel -->
<StackPanel>
<!-- First Panel Style -->
<StackPanel.Resources>
<BooleanToVisibilityConverter x:Key="boolToVisibility" />
<Style TargetType="StackPanel" x:Key="StackPanelMain">
<Style.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.25" To="160" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Expander.Collapsed">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="5 5 0 0" />
<Setter Property="Width" Value="360" />
</Style>
</StackPanel.Resources>
<!-- First Panel Code -->
<StackPanel Style="{StaticResource StackPanelMain}" Height="21">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="5 0 0 0">First Panel</TextBlock>
<Separator Margin="5 0 5 0" Opacity="0.5" Width="360"/>
<Expander x:Name="FirstPanelExpander" />
</StackPanel>
<StackPanel Orientation="Vertical" Visibility="{Binding IsExpanded, ElementName=FirstPanelExpander, Converter={StaticResource boolToVisibility}}">
<TextBox />
<TextBox />
<TextBox />
<TextBox />
<TextBox />
</StackPanel>
</StackPanel>
</StackPanel>
<!-- Next Panel -->
<StackPanel Height="21">
<!-- Next Panel Code -->
<TextBlock Margin="5 0 0 0">Next Panel</TextBlock>
</StackPanel>
</StackPanel>
</Window>

Answer 1

首先，没有必要隐藏您的Textboxes。当你的对象在Expander内，他们将被隐藏，如果expander是关闭的。下面是一个接近你想要的设计的例子。

<Window.Resources>
<Style TargetType="Expander" x:Key="ExpanderMain">
<Style.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.25" From="30" To="160" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Expander.Collapsed">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.25" From="160" To="30" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="5 5 0 0" />
<Setter Property="Width" Value="360" />
</Style>
</Window.Resources>
<ScrollViewer>
<StackPanel>
<Expander Name="AnimatedExpander" Style="{StaticResource ExpanderMain}">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Panel - 1" />
<Separator Width="300" Margin="5,0,0,0"/>
</StackPanel>
</Expander.Header>
<StackPanel>
<TextBox/>
<TextBox/>
<TextBox/>
<TextBox/>
<TextBox/>
</StackPanel>
</Expander>
<Expander Name="AnimatedExpander2" Style="{StaticResource ExpanderMain}">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Panel - 2" />
<Separator Width="300" Margin="5,0,0,0"/>
</StackPanel>
</Expander.Header>
<StackPanel>
<TextBox/>
<TextBox/>
<TextBox/>
<TextBox/>
<TextBox/>
</StackPanel>
</Expander>
<Expander Name="AnimatedExpander3" Style="{StaticResource ExpanderMain}">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Panel - 3" />
<Separator Width="300" Margin="5,0,0,0"/>
</StackPanel>
</Expander.Header>
<StackPanel>
<TextBox/>
<TextBox/>
<TextBox/>
<TextBox/>
<TextBox/>
</StackPanel>
</Expander>
<Expander Name="AnimatedExpander4" Style="{StaticResource ExpanderMain}">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Panel - 4" />
<Separator Width="300" Margin="5,0,0,0"/>
</StackPanel>
</Expander.Header>
<StackPanel>
<TextBox/>
<TextBox/>
<TextBox/>
<TextBox/>
<TextBox/>
</StackPanel>
</Expander>
</StackPanel>
</ScrollViewer>