Окно панорамирования через сетку, которая выходит за границы окна в WPF

Question

Корневым элементом окна является сетка, которая выходит за границы окна как по горизонтали, так и по вертикали.

Я бы хотела иметь возможность анимировать ее так, чтобы я могла отображать различные части сеткив окне.

См. здесь великолепную иллюстрацию того, чего я хочу достичь: 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-координате на высоту окна:

<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

Положите решетку на холст.Сетка отбирает содержимое вне экрана.Вот пример -

Если вы уберете холст, часть прямоугольника, которая находится за пределами экрана, будет отбракована.