2

検索フォームと項目を表示するためのカスタム UC の 2 つの要素を含むグリッドがあります。ページが読み込まれると、ビューア コントロールが非表示になります。検索フォームのボタンがクリックされたときにストーリーボードでアニメーション化するのはアリです。私はTo=...アニメーションの部分で立ち往生しています。親コンテナの高さまでアニメートして、下から上にスライドさせたいです。これは可能ですか？

参考までに、これは私のツリー構造です：

ページのリソース:

<Storyboard x:Name="animateViewSlide" Storyboard.TargetName="SearchForm" >
        <DoubleAnimation  Storyboard.TargetProperty="Height" To="???" Duration="100"/>
</Storyboard>

制御本体:

<Grid x:Name="LayoutRoot">
    <Grid x:Name="SearchForm" Margin="6,6,6,70">
    <uc:AwesomeViewer x:Name="awesomeView" Awesomeness="{Binding SelectedAwesomeThing}" Visibility="Collapsed"/>
</Grid>
4

1 に答える 1

1

アップデート

マージンを使用してアニメーションをステップ実行する代わりに、Y軸を同じようにアニメーション化するだけで、これを行うためのもう少し良い方法を見つけましたTranslateTransform。

<Grid x:Name="ItemToMove" 
            Visibility="{Binding Condition, Converter={StaticResource boolVisConv}}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="30,0,0,-32" Opacity="0">
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="notified" Y="40" />
                </Grid.RenderTransform>
                    <Grid.Triggers>
                    <EventTrigger RoutedEvent="Grid.Loaded">
                        <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="notified" Storyboard.TargetProperty="Y">
                                        <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ItemToMove" Storyboard.TargetProperty="Opacity">
                                        <SplineDoubleKeyFrame KeyTime="0:0:1.55" Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>

更新を終了

あなたの問題は、自動的に計算された値（）をアニメーション化しようとすることから生じるHeightので、親/子でハードコードされたサイズ値を使用したい場合や、たとえばアプリがポートレートモードに制限されている場合を想定しない限り、そのアイデアを破棄しますのみ....その場合、「To」の値は800pxです。ただし、これはあなたが探しているものではないと思います。

さて、あなたは通常、レンダリングされたサイズを「To」値にフィードできることを望んでいますTo="{Binding ActualHeight, ElementName=LayoutRootOROTHERParentContainer}"か？それでもいや、それもうまくいきません...

したがって、他の誰かがより良い方法を持っているかもしれませんが、私が見つけた唯一の方法は、代わりに自動計算されたサイズをそのままにして、その代わりにオブジェクトのステッピングをアニメーション化することMarginです。プロセスに多数の追加のXAMLを追加することを除いて、すばらしいです。ですから、コンセプトとしては、このようなものを試してみるかもしれません（ただし、より良い解決策に出会ったら、それも知りたいと思います。生活のデザイナーとして、私は比較的頻繁にこれに遭遇します）。ObjectAnimationUsingKeyFramesOpacityDoubleAnimationUsingKeyFrames

コンセプト例;

（ストーリーボード）

<Storyboard x:Name="Kaboom">
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="border">
        <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,750,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,600,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,550,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.4">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,500,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,450,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.6">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,400,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.7">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,350,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.8">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,300,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.9">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,250,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:1">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,200,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:1.1">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,150,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:1.2">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,100,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:1.3">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,50,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:1.4">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
        <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.01"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

実行中の概念の簡単なアドホックな例。

<Grid Height="800" Width="480" x:Name="ParentContainer">
            <!-- Your SearchForm thingy with its funky margins already set like your example -->
            <Rectangle Margin="6,6,6,70" Fill="Green" />
            <Button Height="100" Width="100" Content="Click Me!" HorizontalAlignment="Left" VerticalAlignment="Top">
                 <!-- Quick button to show it in action -->
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <ei:ControlStoryboardAction Storyboard="{StaticResource Kaboom}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
            </Button>
            <!-- Your Awesomeness -->
            <Border x:Name="border" Width="300" Background="Blue" HorizontalAlignment="Right" Margin="0,800,0,0" Opacity="0">
                <TextBlock x:Name="textBlock" Text="OH&#10;&#10;SNAP!!!&#10;&#10;Say&#10;&#10;WHAAA??" 
                            TextAlignment="Center" VerticalAlignment="Center"
                            FontSize="40" FontWeight="Bold" Foreground="White"/>
            </Border>
        </Grid>

とにかく、おそらくあなたが望んでいるものとは正確には一致しませんが、特に私が言ったように、オブジェクトサイズをハードコーディングして「To」値を...に設定するために実行可能なものがない限り、少し調整することで効果的な代替手段です。これは、標準の800x480ポートレートモードに制限されている電話の場合、あなただけが望むかもしれません。ただし、そのオプションがない場合は、代わりにこの方法を使用して、かなり気の利いたデザインをいくつか作成しました。

これがお役に立てば幸いです。

于 2013-03-08T22:25:49.220 に答える