慢慢调整面板的大小，不要在mouseEnter和mouselleave事件时突然调整
本文关键字：调整 mouseEnter mouselleave 事件 突然 慢慢 | 更新日期: 2023-09-27 18:05:30
我正在尝试慢慢调整面板的大小，而不是突然在mouseEnter和mouseLeave事件。
谁能告诉我该怎么处理?这是我的"代码":
<Border VerticalAlignment="Stretch" Grid.Row="0"
Background="{DynamicResource MyBorderBlueGradientBrush}"
BorderBrush="Black" BorderThickness="1,1,1,0">
<DockPanel x:Name="pinDockPanel" Width="Auto" Height="Auto" LastChildFill="False" Margin="0,0,0,0" Background="Transparent">
<ToggleButton x:Name="pinButton" VerticalAlignment="Center" Width="auto" MaxWidth="26" Height="26"
Background="{DynamicResource MyBorderBlueGradientBrush}" Focusable="False"
DockPanel.Dock="Right" Checked="pinButtonChecked" BorderThickness="0"
Unchecked="pinButtonUnchecked" OverridesDefaultStyle="False" BorderBrush="{DynamicResource MyBorderBlueGradientBrush}" FontFamily="Webdings">
<Label x:Name="Pinback" Background="{DynamicResource MyBorderBlueGradientBrush}" Width="26" Height="26" BorderBrush="{DynamicResource MyBorderBlueGradientBrush}">
<Label x:Name="Pin" FontSize="18" Foreground="White" Content="?" Width="25" Height="25" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
<Label.RenderTransform>
<RotateTransform Angle="16" CenterX="29" CenterY="0"></RotateTransform>
</Label.RenderTransform>
</Label>
</Label>
</ToggleButton>
<TextBlock VerticalAlignment="Center" FontSize="11"
Foreground="White" FontFamily="Tahoma" Text="Applications" Margin="4,0,0,0"
Background="Transparent"
TextWrapping="NoWrap"/>
</DockPanel>
</Border>
<Border Name="borderSelectedButton" VerticalAlignment="Stretch" Grid.Row="1"
Background="{DynamicResource MyBorderBlueGradientBrush}"
BorderBrush="{DynamicResource MyBlueBorderSolidBrush}"
BorderThickness="0.5,0.5,0.5,0.5" Margin="1,3,1,0">
<DockPanel x:Name="selectedButton" Width="Auto" Height="20" >
<TextBlock Name="selectedButtonText" VerticalAlignment="Center" Margin="0,0,0,0"
FontSize="11" Foreground="{DynamicResource MyDarkBlueSolidBrush}"
Text="" TextWrapping="NoWrap" FontFamily="Tahoma"/>
</DockPanel>
</Border>
<!-- / LEFT PANEL HEADER ( APPLICATION & SELECTED BUTTON ) -->
<!-- RELATED CONTROL SPACE For the Diagnostic Page -->
<ScrollViewer Name="scrolviewerRelatedButtons" VerticalScrollBarVisibility="Auto" Grid.Row="2" VerticalAlignment="Stretch" Margin="0,0,0,0" Padding="1,0,0,0">
<StackPanel Name="relatedControlStackPanel"
Background="White" Height="auto"
ClipToBounds="False" VerticalAlignment="Stretch">
</StackPanel>
</ScrollViewer>
<!-- RELATED CONTROL SPACE For the readerSettingButton Page -->
<!-- MAIN BUTTONS -->
<Grid x:Name="gridMainButtons" VerticalAlignment="Stretch" Grid.Row="3" Margin="0,1,0,1"
Background="{DynamicResource MyBlueBackgroundGradientBrush}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Name="diagnosisButton" Grid.Row="0" Style="{DynamicResource MyBottomLeftButtonStyle}"
Height="auto" Background="White" Margin="0,0,0,0"
BorderBrush="{DynamicResource MyBlueSolidBrush2}" BorderThickness="0,0.2,0,0.2"
HorizontalContentAlignment="Left" Padding="3,1,1,1" Click="Diagnosis_Click">
<StackPanel Width="Auto" Height="auto" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" Margin="27,7,0,0" VerticalAlignment="Center"
Foreground="{DynamicResource MyBlueSolidBrush2}" FontFamily="Tahoma"
TextWrapping="Wrap" FontSize="12">
<Underline>D</Underline>iagnosis
</TextBlock>
</StackPanel>
</Button>
<Button Name="firmwareButton" Grid.Row="1" Style="{DynamicResource MyBottomLeftButtonStyle}"
Height="auto" Background="White" Margin="0,0,0,0"
BorderBrush="{DynamicResource MyBlueSolidBrush2}" BorderThickness="0,0.2,0,0.2"
HorizontalContentAlignment="Left" Padding="3,1,1,1" Width="Auto"
Click="firmwareButtonClick">
<StackPanel Width="Auto" Height="auto" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" Margin="27,7,0,0" VerticalAlignment="Center"
Foreground="{DynamicResource MyBlueSolidBrush2}" FontFamily="Tahoma"
TextWrapping="Wrap" FontSize="12">
<Underline>F</Underline>irmware
</TextBlock>
</StackPanel>
</Button>
<Button Name="readerSettingButton" Grid.Row="2" Style="{DynamicResource MyBottomLeftButtonStyle}"
Height="auto" Background="White" Margin="0,0,0,0"
BorderBrush="{DynamicResource MyBlueSolidBrush2}" BorderThickness="0,0.2,0,0.2"
HorizontalContentAlignment="Left" Padding="3,1,1,1" Width="Auto"
Click="readerSettingButtonClick">
<StackPanel Width="Auto" Height="auto" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" Margin="27,7,0,0" VerticalAlignment="Center"
Foreground="{DynamicResource MyBlueSolidBrush2}" FontFamily="Tahoma"
TextWrapping="Wrap" FontSize="12">
Reader <Underline>S</Underline>ettings
</TextBlock>
</StackPanel>
</Button>
</Grid>
<!-- / MAIN BUTTONS -->
<!-- HID LOGO -->
<Border Grid.Row="4" Name="logoPanel" Background="{DynamicResource MyBlueBackgroundGradientBrush}"
BorderBrush="{DynamicResource MyBlueBorderSolidBrush}" Margin="0,0,0,0"
BorderThickness="0,0,0,0" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Width="auto" Height="Auto">
<!--<StackPanel x:Name="Logo" Width="auto" Height="32"
Background="{DynamicResource MyBlueBackgroundGradientBrush}" >-->
<Image Source="graphics'HID_OMNIKEY.bmp" Height="auto" Width="auto" Name="HID_logo"
Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Stretch" />
<!--</StackPanel>--></prev>
private void LeftPanelMouseEnter(object sender, MouseEventArgs e)
{
private double LeftPanelMaxWidth=240;
if (resizeFlag == false && pinFlag == false)
{
LeftPanel.Width = LeftPanelMaxWidth;
mySidebarControl.Visibility = Visibility.Visible;
borderSelectedButton.Visibility = Visibility.Visible;
scrolviewerRelatedButtons.Visibility = Visibility.Visible;
gridMainButtons.Visibility = Visibility.Visible;
logoPanel.Visibility = Visibility.Visible;
resizeFlag = true;
pinButton.ToolTip = Properties.Resources.TOOL_TIP_PINUP_BUTTON_UNCHECKED;
scrolviewerRelatedButtons.Margin = new Thickness(24, 0, 0, 0);
pinDockPanel.Margin = new Thickness(24, 0, 0, 0);
selectedButton.Margin = new Thickness(24, 0, 0, 0);
diagnosisButton.Margin = new Thickness(24, 0, 0, 0);
firmwareButton.Margin = new Thickness(24, 0, 0, 0);
readerSettingButton.Margin = new Thickness(24, 0, 0, 0);
logoPanel.Margin = new Thickness(24, 0, 0, 0);
mySidebarControl.myNavigationPaneButton.Background = (Brush)FindResource("MySelectedButtonOrangeGradientBrush");
mySidebarControl.applicationborder.BorderBrush = (Brush)FindResource("MySelectedButtonOrangeGradientBrush");
}
}
}
基本原理:
- 在
IsMouseOver上创建Trigger和Style - 使用
Trigger.EnterActions和Trigger.ExitActions来启动动画来控制控件的大小。
或者，您可以为MouseEnter和MouseLeave连接两个EventTriggers(参见文档中的示例)。
下面的代码将在鼠标进出时展开和折叠网格。在动画上设置的持续时间将把展开/折叠设置为1秒。
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SomeGrid" Storyboard.TargetProperty="Height" AccelerationRatio="0.5" DecelerationRatio="0.5" From="40.0" To="140.0" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Grid.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SomeGrid" Storyboard.TargetProperty="Height" AccelerationRatio="0.5" DecelerationRatio="0.5" From="140.0" To="40.0" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>