Как отобразить половину прямоугольника холста внутри окна просмотра - PullRequest
Новая
       34

Как отобразить половину прямоугольника холста внутри окна просмотра

0 голосов
/ 05 мая 2011

У меня есть элемент Canvas, который имеет ширину 1400 пикселей и высоту 750 пикселей.Этот Canvas содержит 2 элемента Path, которые симметричны вдоль вертикальной оси и расположены рядом.

Этот Canvas находится внутри ViewBox, поскольку пользователь может изменить размер ContentControl, владеющего Canvas, и яхочу, чтобы холст масштабировался.

Пока я вижу оба пути в ViewBox.

Что я хотел бы сделать, так это отобразить только левую половину холста в ViewBox(с корректным изменением размера этой половины) и возможностью отображать правую половину холста с переводом холста, используя раскадровку и триггер свойства.

Я думаю, что справлюсь с анимациейчасть, но теперь я борюсь с дисплеем.

Как бы вы написали XAML, чтобы иметь то, что я хотел бы?

Заранее спасибо

Майкл

1 Ответ

0 голосов
/ 05 мая 2011

Я только что нашел, как это сделать:

Мне нужно было поместить Canvas в сетку со свойствами ClipToBounds, установленными в true, и шириной до 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>

Надеюсь, это кому-нибудь поможет:)

...