在自定义WPF窗口中包含故事板动画

Question

好的，这是我的问题。我有一个带有自定义阴影的自定义窗口，以及两个平移变换动画。最终结果有点像Window 8 Metro Screen。 I.E.一个窗口，其中有几个完整的窗口用户控件，从左到右滑动，反之亦然。现在的问题是我不知道如何包含动画，以便它们不会覆盖我所拥有的自定义窗口阴影。

以下是问题的屏幕截图：

这是过渡后的窗口：

这是我窗口的XAML：

<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>

谢谢！

Answer 1

将Border或Grid或其他容器作为整个事物的容器（在任何其他元素之前的窗口正下方），使用所需的Margin，并且您的动画引用此元素，而不是Window。

编辑：

应该是这样的：

<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>

Answer 2

好的，我解决了！我所要做的就是将Grid的ClipToBounds属性设置为true！感谢HighCore让我走上正轨！如果有人遇到这个问题但无法解决，请告诉我！