Question

窗口的根元素是一个Grid，它水平和垂直地延伸到Window的边界之外。

我希望能够为它设置动画，以便我可以在窗口中显示网格的不同部分。

请参阅此处，了解我想要完成的工作：http://www.japf.fr/2008/07/8/comment-page-1/

我的方法与上面的链接的区别在于我希望能够垂直和水平平移，我不在乎是否所有内容都预先渲染并保存在内存中，因为页面不会很多。

到目前为止，我有一个网格，其中两行等于窗口高度：

<Grid x:Name="Container" Background="#D4E8F2" VerticalAlignment="Top"
        d:DataContext="{Binding Source={StaticResource ItemDataSource}}" RenderTransformOrigin="0.5,0.5" >
    <Grid.RowDefinitions>
      <RowDefinition Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=ActualHeight}" />
      <RowDefinition Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=ActualHeight}" />
    </Grid.RowDefinitions>

    <Grid.RenderTransform>
      <TranslateTransform X="0" Y="0" />
    </Grid.RenderTransform>

      ...

</Grid>

一个按钮，通过将Y-coord中的网格转换为窗口的高度来运行动画：

<Button Click="Button_Click" Content="Slide">
    <Button.Triggers>
      <EventTrigger RoutedEvent="Button.Click">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Duration="0:0:1" To="200"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                Storyboard.TargetName="Container" d:IsOptimized="True" />
            <DoubleAnimation Duration="0:0:1"
                To="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=ActualHeight, Converter={StaticResource negateConvert}}"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                Storyboard.TargetName="Container" d:IsOptimized="True">
              <DoubleAnimation.EasingFunction>
                <QuadraticEase EasingMode="EaseInOut" />
              </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Button.Triggers>
  </Button>

问题是动画期间和之后没有显示第二行。

因此看起来网格在启动时的大小与窗口大小相同，之后不会改变。

如何平移网格以达到预期效果？

Answer 1

将网格放入画布中。 Grid正在剔除屏幕外的内容。这是一个例子 -

如果你拿走画布，那么屏幕外的矩形部分将被剔除。

<Window x:Class="testOffscreenRenderTransform.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Canvas>
        <Grid Margin="0,200,0,0">
        <Rectangle x:Name="testRect" Fill="Red" Width="200" Height="200" Margin="0,0,0,0">
            <Rectangle.Style>
                <Style TargetType="{x:Type Rectangle}">
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)"  To="-200" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </Rectangle.Style>
            <Rectangle.RenderTransform>
                <TranslateTransform X="0" Y="0" />
            </Rectangle.RenderTransform>
        </Rectangle>
        </Grid>
        </Canvas>
    </Grid>
</Window>

在WPF中延伸到窗口边界外的网格中平移窗口

1 个答案: