Question

单击“显示详细信息”/“隐藏详细信息”按钮时，尝试在高度上切换动画，然后再次单击该按钮时返回其初始值。

我有一个DataControls：具有预定义样式的DataForm，我希望“Height”属性在单击按钮时设置为更大的值。

DataControl：Dataform看起来像这样。

<DataControls:DataForm x:Name="DataEdit"
                           Grid.Row="1"
                           ItemsSource="{Binding}"
                           Style="{DynamicResource CommonDataFormStyle}"
                           ContentLoaded="OnContentLoaded" 
                           Height="150">

按钮本身就像DataForm一样。

<DataControls:DataForm.ReadOnlyTemplate>
     <DataTemplate>          
         <Grid>
            <Grid.RowDefinitions>...
               <StackPanel Grid.Column="0" Grid.Row="0">            
                  <Button Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.ToggleDetailsCommand, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" x:Name="ToggleDetailsButton"                                      
                             Content="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.ToggleDetailsButtonText}"/> 
...

我只是通过一个名为“显示详细信息”的标签和一个标签上的RoutedEvent =“Label.MouseLeftButtonDown”的eventtrigger来扩展细节。然后再使用另一个名为“隐藏详细信息”的标签来重新设置动画。

我已经尝试将此样式放在按钮上，并且数据触发器试图切换动画。但是，这只会为按钮的高度设置动画，而不管StoryBoard.Target =“{Binding ElementName = DataEdit}”属性。

<Style TargetType="{x:Type Button}" x:Key="ExpandDetailsStyle" >            
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.IsOpened}" Value="true">
                <DataTrigger.EnterActions>
                    <StopStoryboard BeginStoryboardName="EndAnimation" />
                    <BeginStoryboard Name="NewAnimation">
                        <Storyboard>
                            <DoubleAnimation Storyboard.Target="{Binding ElementName=DataEdit}" Storyboard.TargetProperty="Height" From="150" To="300" Duration="0:0:0.1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>

                </DataTrigger.ExitActions>

            </DataTrigger>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.IsOpened}" Value="false">
                <DataTrigger.EnterActions>
                    <StopStoryboard BeginStoryboardName="NewAnimation" />
                    <BeginStoryboard Name="EndAnimation">
                        <Storyboard>
                            <DoubleAnimation Storyboard.Target="{Binding ElementName=DataEdit}" Storyboard.TargetProperty="Height" From="300" To="150" Duration="0:0:0.1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>

        </Style.Triggers>
    </Style>

我也是WPF的新手，所以如果我在这里留下一些东西，请原谅我。我无法在DataForm上添加新的自定义样式，因为它已经使用了通用样式，它不会让我使用“BasedOn”属性。

我最接近的是按钮高度的动画，如果我只能让它为DataForm height属性设置动画。

提前致谢

Answer 1

经过几个小时的环顾四周，我发现了一个简单的解决方案，我认为，复杂的问题。

<UserControl.Resources>
    <Storyboard x:Key="ExpandDetails">
        <DoubleAnimation Storyboard.TargetProperty="Height"                                                     
                                                    Storyboard.TargetName="DataEdit"
                                                    From="120" To="230" Duration="0:0:0.05" />
    </Storyboard>
    <Storyboard x:Key="CollapsDetails">
        <DoubleAnimation Storyboard.TargetProperty="Height"                                                     
                                                Storyboard.TargetName="DataEdit"
                                                From="230" To="120" Duration="0:0:0.05" />
    </Storyboard>                
    <Style TargetType="{x:Type ToggleButton}" x:Key="ToggleButtonStyle">
        <Setter Property="Content" Value="Show Details"/>
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="true">
                <Setter Property="Content" Value="Hide Details"/>
            </Trigger>
        </Style.Triggers>
    </Style>    
</UserControl.Resources>


<UserControl.Triggers>
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="DetailsToggleButton">
        <BeginStoryboard Storyboard="{StaticResource ExpandDetails}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="DetailsToggleButton">
        <BeginStoryboard Storyboard="{StaticResource CollapsDetails}"/>
    </EventTrigger>
</UserControl.Triggers>

在这种情况下，我无法弄清楚如何在数据表单中包含按钮，因为它无法使用我的任何已知绑定技术找到“DataEdit”数据表。

所以这必须放在DataForm之外。

<ToggleButton x:Name="DetailsToggleButton" Style="{StaticResource ToggleButtonStyle}" />

我解决方案的来源：
WPF: how to fire an EventTrigger (or Animation) when binding changes?
WPF - Changing the content of a ToggleButton when checked

切换时触发大小动画

1 个答案: