Wpf XAML中的幻灯片动画
我有一个选项卡控件,它停靠在停靠面板的右侧。选项卡控件的宽度设置为10,不透明度设置为0。我想有标签控件的宽度更改为200和不透明度为100时,我把鼠标移到它。然后,当我移动鼠标时,让tab控件返回其原始值。我不知道该怎么做。有人能帮忙吗?下面是我的标记,我试图首先显示选项卡控件Wpf XAML中的幻灯片动画,wpf,xaml,Wpf,Xaml,我有一个选项卡控件,它停靠在停靠面板的右侧。选项卡控件的宽度设置为10,不透明度设置为0。我想有标签控件的宽度更改为200和不透明度为100时,我把鼠标移到它。然后,当我移动鼠标时,让tab控件返回其原始值。我不知道该怎么做。有人能帮忙吗?下面是我的标记,我试图首先显示选项卡控件 <UserControl x:Class="Cordata.Mrs.MVVM.Views.Controls.SlideoutView" xmlns="http://schemas.microso
<UserControl x:Class="Cordata.Mrs.MVVM.Views.Controls.SlideoutView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<UserControl.Resources>
<Storyboard x:Key="OnMouseEnter1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="OptionsSlideout">
<EasingDoubleKeyFrame KeyTime="0" Value="200"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
</UserControl.Triggers>
<DockPanel HorizontalAlignment="Stretch">
<TabControl Name="OptionsSlideout" TabStripPlacement="Bottom" Width="10" Margin="0,0,0,5" HorizontalAlignment="Stretch" DockPanel.Dock="Right" Opacity="0">
<TabItem Header="Configure">
<StackPanel Orientation="Vertical">
<Button Name="ConfigurationBuilderButton" Width="80" Cursor="Hand" Click="ConfigurationBuilderButton_Click">
<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" Click="LoadConfigurationButton_Click">
<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>
</DockPanel>
</UserControl>
我需要添加一个
矩形
,这样DockPanel
就可以包含一些主要内容,从而允许我们将选项卡控件
停靠在右侧。你不需要任何资源
来做这件事,还有一件事。。。我必须删除你的处理程序,因为我没有在测试项目中实现它们。无论如何,只要在IsMouseOver
属性上使用Trigger
,这将实现您想要的功能:
<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,这里的代码太多了。如果您刚刚使用了彩色的
矩形
或边框
元素,并说我想为这个边框
设置动画,那么用户将更容易直观地看到您的问题。这样,缺少处理程序、图像、Style
和/或Resources
元素不会降低用户帮助您的速度。在发布之前简化你的问题总是好的,有时,你甚至会解决你自己的问题。无论如何,这不是问题,代码可以满足您的需要。简化代码的好处是……我会在以后的文章中记住这一点。谢谢你的伟大解决方案!