0

幅 1400 ピクセル、高さ 750 ピクセルの Canvas 要素があります。この Canvas には 2 つの Path 要素が含まれています。これらは対称で、垂直軸に沿って並んで配置されています。

ユーザーはキャンバスを所有する ContentControl のサイズを変更できるため、このキャンバスは ViewBox 内にあり、キャンバスをスケーリングする必要があります。

今のところ、ViewBox に両方のパスが表示されています。

私がやりたいことは、キャンバスの左半分のみをViewBoxに表示し（この半分は正しくサイズ変更されています）、キャンバスの右半分をキャンバスの翻訳で表示できるようにすることです。ストーリーボードとプロパティ トリガー。

アニメーション部分はなんとかなると思いますが、今表示に苦戦中です。

私が望むものを得るには、XAML をどのように記述しますか?

前もって感謝します

マイケル

4

1 に答える 1

0

私はそれを行う方法を見つけました：

プロパティ 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 に答える