XAML中的幻灯片动画

我需要添加一个，Rectangle以便DockPanel可以具有一些主要内容，因此允许我们将您停靠TabControl在右边。Resources为此，您不需要任何其他东西……我不得不删除您的处理程序，因为我没有在测试项目中实现它们。无论如何，只要Trigger在IsMouseOver属性上使用，就可以完成您想要的操作：

<DockPanel HorizontalAlignment="Stretch">
    <TabControl Name="OptionsSlideout" TabStripPlacement="Bottom" Width="10" Margin="0,0,0,5" DockPanel.Dock="Right" Opacity="0.0">
        <TabControl.Style>
            <Style>
                <Style.Triggers>
                    <Trigger Property="Control.IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <StopStoryboard BeginStoryboardName="CloseStoryBoard" />
                            <BeginStoryboard Name="OpenStoryBoard">
                                <Storyboard DecelerationRatio="0.8">
                                    <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Width)" To="200.0" />
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1.0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="OpenStoryBoard" />
                            <BeginStoryboard Name="CloseStoryBoard">
                                <Storyboard DecelerationRatio="0.8">
                                    <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Width)" To="10.0" />
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TabControl.Style>
        <TabItem Header="Configure">
            <StackPanel Orientation="Vertical">
                <Button Name="ConfigurationBuilderButton" Width="80" Cursor="Hand">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <StackPanel>
                                <Image Source="/Images/ConfigurationBuilder.png" ToolTip="Run Configuration Builder" />
                                <TextBlock Text="Configuration Builder" TextWrapping="Wrap" FontWeight="Bold" />
                            </StackPanel>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
                <Button Name="LoadConfigurationButton" Width="80" Cursor="Hand" Margin="0,20,0,0">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <StackPanel>
                                <Image Source="/Images/LoadCustomConfiguration.png" ToolTip="Load Custom Configuration" />
                                <TextBlock Text="Load Configuration" TextWrapping="Wrap" FontWeight="Bold" />
                            </StackPanel>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </StackPanel>
        </TabItem>
        <TabItem Header="Help">
            <TextBlock Text="Help" />
        </TabItem>
    </TabControl>
    <Rectangle Name="DummyContent" Fill="White" />
</DockPanel>

为了供Mike参考，这里没有太多代码。如果您刚使用颜色Rectangle或Border元素并表示要对此进行动画处理，则用户可以更轻松地看到您的问题Border。这样，缺少处理程序，图像Style和/或Resources元素不会降低尝试帮助您的用户的速度。在发布之前简化问题总是有好处的，有时，您甚至最终会解决自己的问题。无论如何，这不是问题，该代码可以满足您的需求。