How to display half of a rectangle canvas inside of a viewbox - wpf

Question

I have a Canvas element, which has a width of 1400 pixels and a height of 750 pixels. This Canvas contains 2 Path elements, which are symmetrical, along a vertical axis, and which are positioned side by side.
This Canvas is inside a ViewBox, because the user can resize the ContentControl owning the Canvas, and I want the Canvas to be scaled.
For now, I see both Paths in the ViewBox.
What I would like to do, is to only display the left half of the canvas in the ViewBox (with this half being correctly resized), and to be able to display the right half of the canvas with a translation of the canvas, using a storyboard and a property trigger.
I think I can cope with the animation part, but now I'm struggling with the display.
How would you write the XAML to have what I'd like?
Thanks in advance
Michael

Answer 1

I've just found how to do that:
I needed to put the Canvas in a grid with properties ClipToBounds set to true and Width to 700 (half of the width of the canvas), and put that grid in the viewbox.
Here is the complete XAML code, with the animation part too:
<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>
I hope this will help someone :)