WPFのウィンドウ境界外に広がるグリッドを横切るパンウィンドウ

Question

ウィンドウのルート要素は、ウィンドウの境界の外側に水平および垂直方向に延びるグリッドです。

グリッドのさまざまな部分をウィンドウに表示できるようにアニメーション化したいと思います。

私が達成したいものの偉大な説明のためにここを参照してください：上記のリンクから私のアプローチでhttp://www.japf.fr/2008/07/8/comment-page-1/

違いは、私は垂直方向と水平方向にパンできるようにしたいと、すべてならば、私は気にしないということです多数のページがないので、事前レンダリングされ、メモリに保持されます。窓の高さでY-COORDでグリッドを翻訳することによって、アニメーションを実行するために

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

そしてボタン：

は、これまでのところ私は、ウィンドウの高さに等しい2行のグリッドを持って

問題は、アニメーションの実行中と実行後に2行目が表示されないことです。

したがって、グリッドは起動時にウィンドウのサイズに合わせてサイズ変更され、その後は変更されないようです。

希望の効果を得るには、グリッドをどのようにパンすることができますか？

Answer 1

グリッドをキャンバスに配置します。グリッドは、オフスクリーンのコンテンツを削除しています。 例 -

キャンバスを取り除くと、オフスクリーンの四角形の一部が切り抜かれます。

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