2

コントロールをアニメーション化して、可視性を可視に設定し、不透明度を 0 から 1 にアニメーション化しようとしています。

ただし、何も起こらず、1秒後にコントロールが不透明度1で表示されます...何が間違っているのかわかりません

これは私が試したコードです

<Grid x:Name="layout_root" Margin="10">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="Filtering">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1">
                    <VisualTransition.GeneratedEasingFunction>
                        <ElasticEase EasingMode="EaseInOut"/>
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
            </VisualStateGroup.Transitions>

            <VisualState x:Name="Disabled"/>
            <VisualState x:Name="Enabled">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Duration="0:0:0" Storyboard.TargetName="filter_control" Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimation Storyboard.TargetName="filter_control" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <TextBox x:Name="filter_control" Margin="0,0,0,10" Text="Filtering" Visibility="Collapsed" Opacity="0"/>

    <ListView Grid.Row="1" ItemsSource="{Binding Posts}">
        <ListView.View>
            <GridView>
                <GridViewColumn Width="100" Header="Date" DisplayMemberBinding="{Binding Date, StringFormat={}{0:dd/MM/yyyy}}"/>
                <GridViewColumn Width="100" Header="Text" DisplayMemberBinding="{Binding Text}"/>
                <GridViewColumn Width="100" Header="Value" DisplayMemberBinding="{Binding Value, StringFormat=F2}"/>
            </GridView>
        </ListView.View>
    </ListView>

    <Button Grid.Row="1" Content="v" FontFamily="Marlett" FontSize="14" VerticalAlignment="Top" HorizontalAlignment="Left" Click="ShowFilterClick"/>
</Grid>
4

2 に答える 2

3

何が間違っているのか、またはなぜそのような動作が見られるのかという質問については、有効状態のストーリーボードは、VSGroup がその状態にあるときに VSM が使用するストーリーボードです。ただし、グループの遷移ストーリーボードを指定すると、状態間の遷移時に VSM がそれを適用します。そのため、VSGroup を有効状態にすると、VSM は最初に遷移ストーリーボードを再生し、次に有効状態に指定した定常状態のストーリーボードを使用します。トランジション ストーリーボードは 1 秒なので、1 秒の遅延とポップが表示されます。

次のようなものがおそらくあなたが望むものです。遷移ストーリーボードは必要なアクション/アニメーションを実行し、状態ストーリーボードはアニメーション化されたプロパティを保持する必要がある最終的な値を示すだけであることに注意してください。また、イージング関数を VisualTransition 全体ではなく、ダブル アニメーションに適用します。イージング関数で Visibility を補間しようとしても意味がありません。

<VisualStateGroup x:Name="Filtering">
    <VisualStateGroup.Transitions>
        <VisualTransition From="Disabled" To="Enabled" GeneratedDuration="0:0:1">
            <Storyboard>
               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="filter_control" Storyboard.TargetProperty="(UIElement.Visibility)">
                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
               </ObjectAnimationUsingKeyFrames>
               <DoubleAnimation Duration="0:0:1" Storyboard.TargetName="filter_control" Storyboard.TargetProperty="(UIElement.Opacity)" To="1">
                  <DoubleAnimation.EasingFunction>
                     <ElasticEase EasingMode="EaseInOut"/>
                  </DoubleAnimation.EasingFunction>
               </DoubleAnimation>
           </Storyboard>
       </VisualTransition>
       <!-- you could also have a transition from Enabled to Disabled -->
    </VisualStateGroup.Transitions>

    <VisualState x:Name="Disabled">
            <Storyboard>
               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="filter_control" Storyboard.TargetProperty="(UIElement.Visibility)">
                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"/>
               </ObjectAnimationUsingKeyFrames>
               <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="filter_control" Storyboard.TargetProperty="(UIElement.Opacity)" To="0"/>
           </Storyboard>
    </VisualState>
    <VisualState x:Name="Enabled">
            <Storyboard>
               <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="filter_control" Storyboard.TargetProperty="(UIElement.Visibility)">
                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
               </ObjectAnimationUsingKeyFrames>
               <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="filter_control" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
           </Storyboard>
    </VisualState>
</VisualStateGroup>
于 2012-09-06T17:28:01.800 に答える
1

Visibility 列挙型は、本質的にアニメート可能なプロパティではありません。WPF はキーフレーム間のスペースを埋めることができるため、通常、実際にアニメーション化できるのは数値プロパティのみです。たとえば、値 0 と 1 の中間の不透明度は 0.5 であることがわかっています。現在の時刻に基づいて、可能なすべての値を認識します。

Visibility.Collapsed から Visibility.Visible に 1 秒以上アニメーション化すると、0.5 秒のマークまたはその間のその他のポイントで何をすべきかわかりません。列挙型をある値から別の値に変更していることだけを知っています。遷移時間が 1 秒の場合、その秒が経過するまで待機してから値を変更するため、不透明アニメーションが発生することはありません。

FluidLayout を使用してみることができます。次のように有効にします。

<VisualStateGroup x:Name="Filtering" ei:ExtendedVisualStateManager.UseFluidLayout="True">

Blend UI のトグルを使用して有効にすることもできます。

FluidLayout は、レイアウトの変更をアニメーション化します。要素を折りたたんだり展開したりするとレイアウトに影響するため、それらのレイアウトの変更を自動的にアニメーション化できます。

于 2012-09-06T14:53:14.170 に答える