0

2 つのパネルを (左右に) スライドさせるトランジション効果を作成しています。

私の計画は、data-binding を介してウィンドウの幅を 2 ​​倍したグリッドを作成し、それを 2 で割って 2 つのパネルを作成し、そこにグリッドを配置することです (2 つのパネルを独自のパネルで均等に分割します)。一度に表示できるのは 1 つだけです。あとは、ルート グリッドをアニメーションで移動してトランジション効果を作成するだけです)。

そのため、グリッドの幅をウィンドウの幅に 2 を掛けた値にデータ バインドしようとしています (上で太字で書いたように) が、データ バインドを変更する方法がわかりません。 . 可能であれば、どのようにしますか？

(他の .NET アプリケーションと同じように) イベントを使ってそれを行うこともできると思いますが、それではバグが発生して悪化する可能性が高くなります (つまり、見逃してしまうイベント)。そのため、適切でクリーンなソリューションを本当に感謝しています。

ところで、移行を行うためのより良い方法があれば、コメントでお知らせください。私の心はまだアイデアに対してオープンです。 ありがとう！

4

1 に答える 1

1

やりました。次のようでした。

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="0" />

<Grid x:Name="Panel1" />
<Grid x:Name="Panel2"/>
</Grid>

さて、これは横スクロールですが、ポイントは同じです。RenderTransform.TranslateTransform アニメーションを Panel2 に適用するだけです。X を 0 から Panel2 の幅にアニメーション化すると、基本的には完全にオフになり、その後、Panel2 の列を「1」に設定するだけです。

明日はちょっとしたコード例も紹介できますが、すぐに始められます。

ユーザーがボタンを切り替えたときに、slide2slide アニメーションを処理する Xaml を次に示します。

    <Grid.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="workingPlanButton">
<BeginStoryboard>
<Storyboard Completed="Storyboard_Completed">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:0.1"
                              Duration="0:0:00.5"
                              Storyboard.TargetName="lsView"
                              Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)"
                              Timeline.DesiredFrameRate="30">
<LinearDoubleKeyFrame KeyTime="00:00:00.3" Value="{Binding ElementName=bodyGrid, Path=ActualHeight}" />
</DoubleAnimationUsingKeyFrames>


<!--  Hide the panel  -->
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0.5"
                              Storyboard.TargetName="lsView"
                              Storyboard.TargetProperty="Visibility"
                              Timeline.DesiredFrameRate="30">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>

実際のグリッド:

<Grid x:Name="bodyGrid" Grid.Row="1">

<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<StudyPlan:StudyPlanControl />
<local:LessonControl x:Name="lsView />
<local:LessonControl.RenderTransform>
<TranslateTransform Y="0" />
</local:LessonControl.RenderTransform>

</local:LessonControl>
</Grid>
于 2012-10-20T21:48:55.163 に答える