0

我制作了一个用户控件以在单击时展开，其中有 7 个在带有列的网格中。当我单击最后一个时，它会退出屏幕。我想制作动画，如果它展开，那么它应该移动到 grid.column 1，然后当它折叠时它会回到它自己的网格。

代码：

 <Grid x:Name="GrdVwSearchResults" Grid.Row="2" Margin="120,70,0,0" >
        <Grid.Resources>
            <Storyboard x:Name="moveBackAnimation" >
                <DoubleAnimation x:Name="moveBackDoubleAnimation" EnableDependentAnimation="True" Storyboard.TargetName="usrFlight5" Storyboard.TargetProperty="Col" From="4" To="1" Duration="0:0:0.5"/>
            </Storyboard>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <usercontrol:Top3SearchResultDisplay  x:Name="usrFlight1" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <usercontrol:Top3SearchResultDisplay  x:Name="usrFlight2" Grid.Column="1" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
        <usercontrol:Top3SearchResultDisplay  x:Name="usrFlight3" Grid.Column="2" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
        <usercontrol:Top3SearchResultDisplay  x:Name="usrFlight4" Grid.Column="3" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
        <usercontrol:Top3SearchResultDisplay  x:Name="usrFlight5" Grid.Column="4" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
        <usercontrol:Top3SearchResultDisplay  x:Name="usrFlight6" Grid.Column="5" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
        <usercontrol:Top3SearchResultDisplay  x:Name="usrFlight7" Grid.Column="6" Height="440" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"/>
    </Grid>
4

2 回答 2

0

如果您想在 Grid 中对元素的行或列的更改进行动画处理，最好的方法是使用 VisualStateManager。您可以启用 FluidLayout 来动画布局更改，例如行、网格等。这可以在 Expression Blend 中轻松完成。

这是一个包含 6 列的网格的 XAML 的简短示例，最后一列中有一个按钮，当您单击它时，它将动画到第一列。对于更高级的状态更改，您可能希望更改代码中的状态，但这是使用一种行为来更改 XAML 中的状态：

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        x:Class="TestingWPF.MainWindow"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Grid x:Name="LayoutRoot">
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup" ei:ExtendedVisualStateManager.UseFluidLayout="True">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Default"/>
                <VisualState x:Name="Expanded">
                    <Storyboard>
                        <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="button">
                            <EasingInt32KeyFrame KeyTime="0" Value="0"/>
                        </Int32AnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="button" Content="Button" Grid.Column="5">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:GoToStateAction StateName="Expanded"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</Window>
于 2012-09-07T13:37:05.960 回答
0

我不确定你是如何使用它的，但这里有一个动画，可以为对象提供“弹出”外观和感觉。

    <Storyboard x:Name="PopupFlight">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="usrFlight7">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <x:Int32>7</x:Int32>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="usrFlight7">
            <EasingDoubleKeyFrame KeyTime="0" Value="200"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="500"/>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.ZIndex)" Storyboard.TargetName="usrFlight7">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <x:Int32>10</x:Int32>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="usrFlight7">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <x:Int32>3</x:Int32>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
于 2012-09-07T17:50:19.010 回答