Home/ Questions/Q 6336021
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T18:58:09+00:00

The root element of the window is a Grid which extends outside the boundary

  • 0

The root element of the window is a Grid which extends outside the boundary of the Window both horizontally and vertically.

I would like to be able to animate it such that I can display different parts of the grid in the Window.

See here for a great illustration of what I want to accomplish: http://www.japf.fr/2008/07/8/comment-page-1/

The difference in my approach from the link above is that I want to be able to pan vertically and horizontally and I do not care if everything is pre-rendered and kept in memory as there won’t be many pages.

So far I have a grid with two rows equal to the window height:

<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>

And a button to run the animation by translating the grid in the Y-coord by the height of the window:

<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>

The problem is that the second row is not showing during and after the animation.

So it appears that the Grid is sized to the size of the window on startup and doesn’t change after that.

How can I pan across the grid to achieve the desired effect?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Put the Grid within a Canvas. The Grid is culling the contents that are offscreen.
    Here’s an example –

    If you take away the canvas the part of the rectangle that is offscreen will be culled.

    <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>
    • 0