我有一个停靠在停靠面板右侧的选项卡控件。选项卡控件的宽度设置为 10,不透明度设置为 0。当我将鼠标移到它上面时,我希望选项卡控件的宽度更改为 200,不透明度更改为 100。然后当我将鼠标移开时,让选项卡控件返回其原始值。我不知道该怎么做。有人可以帮忙吗?下面是我的标记,我试图让选项卡控件首先显示。
<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>
最佳答案
我需要添加一个 Rectangle
使DockPanel
可以有一些主要内容,因此允许我们停靠您的TabControl
向右。您不需要任何 Resources
对于这一点和另一件事......我不得不删除你的处理程序,因为我没有在我的测试项目中实现它们。无论如何,这只需使用 Trigger
即可完成您想要的操作在 IsMouseOver
属性(property):
<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
元素不会减慢试图帮助您的用户的速度。在发布之前简化您的问题总是好的,有时,您甚至最终解决了自己的问题。无论如何,这不是问题,该代码可以满足您的需求。
关于wpf - XAML 中的幻灯片动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19938196/