0

Google で調べたり、解決策を見つけたりする方法がわからないアニメーションの問題があります。基本的にラッピングマーキーを作成しようとしています。これを行うには、キャンバス内に次のものを配置します。

|---セクションA---|---セクションB---|セクションC---|

アニメーションは、画面右側のセクション B の左側から始まり、セクション B の右側が画面の左側に当たると終了します。セクション A と C はセクション B のミラー イメージであり、「ラップ アラウンド」効果を生み出します。アニメーションが終了したら、セクション B の正確な幅だけすべてを右に移動します。ユーザーには、何も起こっていないように見えます。

問題はこれです...マーキー内のアイテムの一部が非表示になったり、サイズが変更されたりする可能性があります。したがって、アイテムを非表示にすると、そのアイテムは 3 つのセクションすべてから非表示になります。セクション A では物が隠され、すべてのセクションのサイズが動的に変更されるため、マーキー全体が左に移動します。

項目がセクション A に隠されているときに、セクション B と C がスライドしないように、セクション B の途中などの場所にアニメーションを「固定」する方法はありますか? 代わりに、セクション A を右に移動してスペースを埋めます。

編集：言い換えてみましょう...これは紛らわしいので。

さらに 3 つのスタック パネルを含むスタック パネルを含むキャンバスがあります。これら 3 つのスタック パネルは、実際には同じ情報のコピーであり、アニメーション化するとマーキーが回り込むように見えます。マーキーでアイテムが追加/削除されると、スタック パネル内のアイテムが変更され、スタック パネルの全体のサイズが調整され、キャンバスのサイズが調整されます。私が知りたいのは、スタックパネル内の特定の場所を「固定」できるかどうかです。2 番目のスタックパネル コピーの最初のアイテムを「固定」できますか?

4

3 に答える 3

1

主な質問と思われるものに答えるには：

Canvas.Leftプロパティ以外のものを使用してキャンバスの位置をアニメーション化する方法はありますか？

RenderTransformのプロパティCanvasをaに設定し、プロパティをTranslateTransformアニメーション化しTranslateTransform.Xます。

<Canvas x:Name="myCanvas" RenderTransformOrigin="0.5,0.5">
    <Canvas.RenderTransform>
        <TranslateTransform X="0"/>
    </Canvas.RenderTransform>  
</Canvas>

次にコードで：

編集：このメソッド呼び出しの2番目のパラメーターは、タイプDoubleAnimationではなく、タイプである必要がありDurationます。これをタイプしたとき、私は自分の机で寝ていたに違いありません。ごめん。

(TranslateTransform)MyCanvas.RenderTransform.BeginAnimation(TranslateTransform.XProperty, new Duration(TimeSpan.FromSeconds(3)));

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

于 2012-12-04T19:53:30.603 に答える
1

私の他の答えは、あなたが望む行動について詳しく説明するにつれて時代遅れになっているので、2番目の投稿を許してください。上記の回答に対する私の後者のコメントに基づいて、次の例を検討してください。

<Canvas x:Name="LayoutRoot">

    <Grid x:Name="MarqueePanels">

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Rectangle Grid.Column="0" Height="{Binding ElementName=PrimaryMarquee, Path=ActualHeight}" Width="{Binding ElementName=PrimaryMarquee, Path=ActualWidth}">
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding ElementName=PrimaryMarquee}"/>
            </Rectangle.Fill>
        </Rectangle>

        <StackPanel Grid.Column="1" x:Name="PrimaryMarquee">
            <TextBlock Text="Marquee Item 1"/>
            <TextBlock Text="Marquee Item 2"/>
            <TextBlock Text="Marquee Item 3"/>
        </StackPanel>

        <Rectangle Grid.Column="2" Height="{Binding ElementName=PrimaryMarquee, Path=ActualHeight}" Width="{Binding ElementName=PrimaryMarquee, Path=ActualWidth}">
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding ElementName=PrimaryMarquee}"/>
            </Rectangle.Fill>
        </Rectangle>

    </Grid>

</Canvas>

上で述べたようにVisibility、TextBox要素の を に設定しても親のサイズは変更されHiddenませんが、WILLを使用すると親パネルのパスが強制されます。したがって、本当に a を使用して視覚要素を含める必要がある場合は、上記のコメントに基づいて の代わりに使用することをお勧めします。StackPanelVisibility.CollapsedArrangeStackPanelVisibility.HiddenVisibility.Collapsed

VisualBrushまた、マーキー コンテンツを複製するために を使用していることにも注意してください。Rectangleこれにより、コードが簡素化され、3 つのビジュアルすべてが常に一致することが保証されます (ただし、 を格納するオブジェクトに適用する配置や変換は例外ですVisualBrush)。

さらに、子要素の絶対配置には の方がはるかに適しているため、個人的には の代わりに を使用します。これが質問の理由ですCanvas。StackPanelCanvas

クレイグ、これがお役に立てば幸いです。私は（ここにいるほとんどの人と同じように）できる限り助けようとします. 幸運を！

于 2012-12-05T14:58:41.820 に答える
0

とった。

マージンを -(theControl.ActualWidth / 2) に設定しました。私のコードはすべて、補償するためにすべてを同じ量だけ元に戻します。

次に、この値を設定するコントロールに SizeChanged のイベント ハンドラーを用意します。コントロールのサイズが変更されると、余白が更新され、すべてがコントロールの中央に集中します。コントロール内にアニメーションの中心にしたい特定のポイントがある場合は、上記の中間ポイントの代わりにそのポイントを使用します。

于 2012-12-05T22:43:02.473 に答える