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> 

그리고 버튼 :

은 지금까지 나는 창 높이와 동일한 두 개의 행 격자가

<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

그리드를 캔버스에 넣습니다. 그리드는 화면 밖의 내용을 제거합니다. 여기에 예제가 있습니다 -

캔버스를 제거하면, 오프 스크린 인 사각형 부분이 제거됩니다.

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