我有一个选项卡控件,它停靠在停靠面板的右侧。选项卡控件的宽度设置为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>