Containing Story Board Animations in a Custom WPF Window

Question

Okay, so here is my problem. I have a custom window with a custom shadow, as well as two translation transform animations. The end results is somewhat like the Window 8 Metro Screen. I.E. A Window in which there are several full window user controls that slide from Left to Right and vice versa. Now the problem is that I do not know how to contain the animations so that the they do not draw over the custom window shadow that I have.

Here is a screenshot of the problem:

And here is the window after the transition:

Here is the XAML for my window:

<Window x:Name="PrimaryWindow"
 x:Class="MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:Metro_Test"
 Title="MainWindow"
 Height="800"
 Width="1280"
 IsTabStop="False"
 AllowsTransparency="True"
 Background="Transparent"
 BorderBrush="#FF3F3F3F"
 SnapsToDevicePixels="True"
 TextOptions.TextFormattingMode="Display"
 TextOptions.TextRenderingMode="ClearType"
 WindowStyle="None"
 WindowStartupLocation="CenterScreen" AllowDrop="True" ResizeMode="CanResizeWithGrip">

<Window.Resources>
    <local:ValueConverter x:Key="NegativeConverter"/>
    <Style x:Key="NoChromeButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                            <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Image x:Key="WhiteClose" Source="Images\White\Close.png" Height="24" Width="24"/>
    <Image x:Key="WhiteAdd" Source="Images\White\Add.png" Height="24" Width="24"/>
    <Image x:Key="WhiteMinus" Source="Images\White\Minus.png" Height="24" Width="24"/>
    <Image x:Key="GrayClose" Source="Images\Gray\Close.png" Height="24" Width="24"/>
    <Image x:Key="GrayAdd" Source="Images\Gray\Add.png" Height="24" Width="24"/>
    <Image x:Key="GrayMinus" Source="Images\Gray\Minus.png" Height="24" Width="24"/>
    <XmlDataProvider x:Key="PageViews">
        <x:XData>
            <Views xmlns="">
                <View Title="View1">
                    <Page Source="MainPage.xaml"/>
                </View>
                <View Title="View2">
                    <Page Source="AddReferencePage.xaml"/>
                </View>
                <View Title="View3">
                    <Page Source="ReferenceManagementPage.xaml"/>
                </View>
            </Views>
        </x:XData>
    </XmlDataProvider>

    <Storyboard x:Key="SlideLeftToRight"  
                TargetProperty="RenderTransform.(TranslateTransform.X)"
                AccelerationRatio=".5"
                DecelerationRatio=".5">
        <DoubleAnimation Storyboard.TargetName="PageViewer" Duration="0:0:0.8" From="{Binding Width, ElementName=PrimaryWindow}" To="0"/>
        <DoubleAnimation Storyboard.TargetName="BorderVisual" Duration="0:0:0.8" From="0" To="{Binding Width, ElementName=PrimaryWindow, Converter={StaticResource NegativeConverter}}"/>
    </Storyboard>

    <Storyboard x:Key="SlideRightToLeft" 
                TargetProperty="RenderTransform.(TranslateTransform.X)"
                AccelerationRatio=".5"
                DecelerationRatio=".5">
        <DoubleAnimation Storyboard.TargetName="PageViewer" Duration="0:0:0.8" From="{Binding Width, ElementName=PrimaryWindow, Converter={StaticResource NegativeConverter}}" To="0"/>
        <DoubleAnimation Storyboard.TargetName="BorderVisual" Duration="0:0:0.8" From="0" To="{Binding Width, ElementName=PrimaryWindow}"/>
    </Storyboard>

    <VisualBrush x:Key="VisualBrush1" Visual="{Binding ElementName=PageViewer}"/>

</Window.Resources>

<Border
    x:Name="m_edgeBorder"
    Margin="14"
    Background="White">

    <Border.Effect>
        <DropShadowEffect
        Opacity="0.999"
        BlurRadius="14"
        ShadowDepth="0"/>
    </Border.Effect>

    <Grid x:Name="MainGrid">

        <Rectangle
            x:Name="TitleBar"
            Height="28"
            Fill="Blue"
            VerticalAlignment="Top"
            AllowDrop="False"
            PreviewMouseLeftButtonDown="FormMouseDown"
            PreviewMouseMove="FormMouseMove"/>

        <Button x:Name="CloseButton" Style="{DynamicResource NoChromeButton}" Click="HandleCloseClick" MouseEnter="HandleMouseEnter" MouseLeave="HandleMouseLeave" ClickMode="Release" HorizontalAlignment="Right" Margin="500,2,2,0" VerticalAlignment="Top" Width="24" Height="24">
            <DynamicResource ResourceKey="GrayClose"/>
        </Button>

        <Button x:Name="MaximiseButton" Style="{DynamicResource NoChromeButton}" Click="HandleMaximiseClick" MouseEnter="HandleMouseEnter" MouseLeave="HandleMouseLeave" ClickMode="Release" HorizontalAlignment="Right" Margin="500,2,28,0" VerticalAlignment="Top" Width="24" Height="24">
            <DynamicResource ResourceKey="GrayAdd"/>
        </Button>

        <Button x:Name="MinimiseButton" Style="{DynamicResource NoChromeButton}" Click="HandleMinimiseClick" MouseEnter="HandleMouseEnter" MouseLeave="HandleMouseLeave" ClickMode="Release" HorizontalAlignment="Right" Margin="500,2,54,0" VerticalAlignment="Top" Width="24" Height="24">
            <DynamicResource ResourceKey="GrayMinus"/>
        </Button>

        <TextBlock Text="Metro Form" FontSize="18" FontFamily="Segoe Light" Margin="0,5" HorizontalAlignment="Center" Foreground="White"/>

        <StackPanel>
            <StackPanel Orientation="Vertical" Margin="0,28,0,0">
                <ListBox x:Name="ViewList" Height="20" Width="300" SelectedIndex="0"
                ItemsSource="{Binding Source={StaticResource PageViews}, XPath=Views/View}"
                DisplayMemberPath="@Title"                    
                SelectionChanged="ChangedSlideSelection">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </StackPanel>

            <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

                <Border x:Name="BorderVisual" HorizontalAlignment="Stretch">
                    <Rectangle x:Name="RectangleVisual"/>
                    <Border.RenderTransform>
                        <TranslateTransform/>
                    </Border.RenderTransform>
                </Border>

                <ItemsControl x:Name="PageViewer" DataContext="{Binding Path=SelectedItem, ElementName=ViewList}"
                    ItemsSource="{Binding XPath=Page}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Frame x:Name="frame" Source="{Binding XPath=@Source}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.RenderTransform>
                        <TranslateTransform/>
                    </ItemsControl.RenderTransform>
                </ItemsControl>
            </Grid>
        </StackPanel>
    </Grid>
</Border>
</Window>

Thank you!

Answer 1

Okay, I solved it! All I had to do was set the Grid's ClipToBounds property to true! Thanks to HighCore for putting me on the right track! If anyone experiences this problem and can't solve it, let me know!

Answer 2

Put a Border or a Grid or some other container as the container of the whole thing (right below the Window before any other element), with the needed Margin, and in your animations reference this element, instead of the Window.

Edit:

Should be something like:

<Window>
   <Grid x:Name="MainGrid" Margin="10,0,10,0"> <!-- Or add more margin if needed -->
      ....
        <DoubleAnimation From="0" To="{Binding ActualWidth, ElementName=MainGrid}"/>
      ....
    </Grid
</Window>