如何在视图框内显示矩形画布的一半

Question

我有一个 Canvas 元素，其宽度为 1400 像素，高度为 750 像素。此画布包含 2 个路径元素，它们沿垂直轴对称且并排放置。

该 Canvas 位于 ViewBox 内部，因为用户可以调整拥有 Canvas 的 ContentControl 的大小，并且我希望缩放 Canvas。

现在，我在 ViewBox 中看到了两条路径。

我想做的是，仅在 ViewBox 中显示画布的左半部分（这半部分已正确调整大小），并且能够使用画布的平移来显示画布的右半部分故事板和属性触发器。

我认为我可以应付动画部分，但现在我在显示方面遇到了困难。

您将如何编写 XAML 以获得我想要的内容？

预先感谢

迈克尔

Answer 1

我刚刚找到了如何做到这一点：

我需要将 Canvas 放入网格中，并将属性 ClipToBounds 设置为 true 并将 Width 设置为 700（画布宽度的一半），然后将该网格放入视图框中。

这是完整的 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>

我希望这会对某人有所帮助:)