如何在視圖框內顯示一半的矩形畫布

Question

我有一個Canvas元素，其寬度爲1400像素，高度爲750像素。這個Canvas包含2個Path元素，它們是沿着一個垂直軸對稱的，並且是並排放置的。

此Canvas位於ViewBox中，因爲用戶可以調整擁有Canvas的ContentControl的大小，並且我希望Canvas被縮放。

現在，我在ViewBox中看到兩個路徑。

我想要做的是在ViewBox中只顯示畫布的左半部分（這一半被正確調整大小），並且能夠顯示右半部分的畫布，畫布，使用故事板和屬性觸發器。

我想我可以應付動畫部分，但現在我正在努力與顯示。

你會如何寫XAML有想我？

在此先感謝

邁克爾

Answer 1

我剛剛找到如何做到這一點：

我需要把畫布中設置爲true和寬度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> 

我希望這會幫助別人:)