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

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

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

На данный момент я вижу оба пути в ViewBox.

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

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

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

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

Майкл


canvas storyboard wpf triggers viewbox
person Emidee    schedule 05.05.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Мне нужно было поместить холст в сетку со свойствами 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>

Я надеюсь, что это поможет кому-то :)

person Emidee    schedule 05.05.2011
comment
Просто чтобы вы знали, это еще проще при использовании VisualStateManager. Мне не нужно использовать это уродливое свойство XTransform, и теперь модель представления и представление хорошо разделены. - person Emidee; 05.05.2011