보기 상자 내부에 사각형 캔버스의 절반을 표시하는 방법

Question

너비가 1400 픽셀이고 높이가 750 픽셀 인 Canvas 요소가 있습니다. 이 Canvas에는 대칭이고 수직 축을 따라 나란히 배치 된 2 개의 Path 요소가 있습니다.

이 캔버스는 사용자가 캔버스를 소유 한 ContentControl의 크기를 조정할 수 있고 캔버스의 크기를 조정할 수 있기 때문에 ViewBox 내에 있습니다.

지금은 ViewBox에서 두 경로를 모두 볼 수 있습니다.

내가하고 싶은데,이 절반은 정확하게 크기가 조정 된 상태로 캔버스의 왼쪽 절반 만 ViewBox에 표시하고, 캔버스의 오른쪽 절반을 캔버스, 스토리 보드 및 속성 트리거 사용.

나는 애니메이션 부분에 대처할 수 있다고 생각하지만, 이제는 디스플레이와 어려움을 겪고 있습니다.

XAML을 어떻게 작성하여 원하는대로 만들 수 있습니까? 사전에

덕분에

마이클

Answer 1

난 그냥 그렇게하는 방법을 발견했습니다

내가 ((700)에 충실하고 폭으로 설정 속성 ClipToBounds와 그리드의 캔버스를 넣어 필요 캔버스 너비의 절반), 그리드를 뷰 박스에 놓습니다.

여기에 너무 애니메이션 부분, 전체 XAML 코드 :

<UserControl x:Class="TestsCaliburn.Views.ChildView" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
      xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
      xmlns:Media="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" 
      Background="Green"> 
    <UserControl.Resources> 
     <Storyboard x:Key="MoveField"> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="BackgroundCanvas"> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="{Binding XTransform}"> 
        <EasingDoubleKeyFrame.EasingFunction> 
         <ExponentialEase EasingMode="EaseOut"/> 
        </EasingDoubleKeyFrame.EasingFunction> 
       </EasingDoubleKeyFrame> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </UserControl.Resources> 

    <i:Interaction.Triggers> 
     <ei:DataTrigger Binding="{Binding XTransform}" Comparison="NotEqual" Value="1"> 
      <Media:ControlStoryboardAction Storyboard="{StaticResource MoveField}"/> 
     </ei:DataTrigger> 
    </i:Interaction.Triggers> 

    <Viewbox> 
     <Grid ClipToBounds="True" Width="750"> 
      <Canvas Background="Yellow" Width="1400" Height="750" x:Name="BackgroundCanvas" RenderTransformOrigin="0.5,0.5"> 
       <Canvas.RenderTransform> 
        <TransformGroup> 
         <ScaleTransform/> 
         <SkewTransform/> 
         <RotateTransform/> 
         <TranslateTransform/> 
        </TransformGroup> 
       </Canvas.RenderTransform> 
       <Canvas.Style> 
        <Style> 
         <Style.Triggers> 
          <DataTrigger Binding="{Binding CanUse}" Value="false"> 
           <Setter Property="FrameworkElement.Cursor" Value="No" /> 
          </DataTrigger> 
         </Style.Triggers> 
        </Style> 
       </Canvas.Style> 
       <Path Stretch="Fill" Stroke="Blue" StrokeThickness="2" Fill="Transparent" x:Name="Background" Data="M700,0 L1400,0 L1400,750 L700,750 L700,0 L0,0 L0,750 L700,750 z"/> 
       <Path Stretch="Fill" Stroke="Red" StrokeThickness="2" Canvas.Top="45" x:Name="Inside3PointsLeft" Fill="Transparent" Data="M0,0 L150,0 A1,1,0,0,1,150,660 L0,660 z"/> 
       <Path Stretch="Fill" Stroke="Red" StrokeThickness="2" RenderTransformOrigin="0.5,0.5" Canvas.Top="45" Canvas.Right="0" x:Name="Inside3PointsRight" Fill="Transparent" Data="M0,0 L150,0 A1,1,0,0,1,150,660 L0,660 z"> 
        <Path.RenderTransform> 
         <TransformGroup> 
          <ScaleTransform/> 
          <SkewTransform/> 
          <RotateTransform Angle="180"/> 
          <TranslateTransform/> 
         </TransformGroup> 
        </Path.RenderTransform> 
       </Path> 
      </Canvas> 
     </Grid> 
    </Viewbox> 
</UserControl> 

나는 이것이 VisualStateManager를 사용하는 경우 다른 사람 :