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

グリッド内の要素の行または列の変更をアニメーション化する場合は、VisualStateManagerを使用するのが最善の方法です。FluidLayoutを有効にして、行、グリッドなどのレイアウト変更をアニメーション化できます。これは、ExpressionBlendで非常に簡単に実行できます。

これは、最後の列にボタンがある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 に答える