0

我正在创建一个将滑动 2 个面板（从一侧到另一侧）的过渡效果。

我的计划是通过 data-binding 将窗口的宽度乘以 2 的 Grid，将其除以 2 以获得 2 个面板，然后将 Grids 放入其中（所以我将有 2 个面板与它们自己的面板平分网格，您一次只能看到其中一个。现在只需使用动画移动根网格以创建过渡效果）。

所以我试图将 Grid 的宽度数据绑定到窗口的宽度乘以 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 Column 设置为“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 回答