0

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

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

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

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

我想我可以应付动画部分，但现在我正在为显示而苦苦挣扎。

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

提前致谢

迈克尔

4

1 回答 1

0

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

我需要将 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>

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

于 2011-05-05T09:58:09.180 回答