WPF 右键菜单动画

最新推荐文章于 2024-03-07 15:18:27 发布

原创最新推荐文章于 2024-03-07 15:18:27 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #header #测试 #border #image #setter

WPF编程技术专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍了菜单样式及右键菜单的设计，包括颜色样式、背景设置、模板触发器和动画效果，以及具体实现的代码片段。展示了如何通过XAML和C#实现一个响应式的上下文菜单和右键菜单，包含多个菜单项和图标，同时提供了关键的CSS样式和动画逻辑。

颜色样式：

<LinearGradientBrush x:Key="MenuPopupBrush"
                       EndPoint="0.5,1"
                       StartPoint="0.5,0">
              <GradientStop Color="#7FFFFFFF"
                  Offset="0" />
              <GradientStop Color="#C28B008B"
                  Offset="0.3"/>
              <GradientStop Color="#FF4B0082"
                  Offset="1" />
  </LinearGradientBrush>

菜单样式：

<Style x:Key="MyContextMenu" TargetType="{x:Type ContextMenu}">
              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate TargetType="{x:Type ContextMenu}">
                          <Border x:Name="Border" CornerRadius="4"
                  Background="{StaticResource MenuPopupBrush}" 
                  BorderThickness="1">
                              <Border.BorderBrush>
                                  <SolidColorBrush Color="#FF888888" />
                             </Border.BorderBrush>
                             <StackPanel IsItemsHost="True"
                       KeyboardNavigation.DirectionalNavigation="Cycle" />
                            
                         </Border>
                         <ControlTemplate.Triggers>
                             <MultiTrigger>
                                 <MultiTrigger.Conditions>
                                     <Condition Property="IsMouseOver" Value="True"/>
                                 </MultiTrigger.Conditions>
                                 <MultiTrigger.EnterActions>
                                     <BeginStoryboard>
                                         <Storyboard>
                                             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"  Storyboard.TargetProperty="(FrameworkElement.Width)">
                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.0020000" Value="0"/>
                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.2520000" Value="142"/>
                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.3450000" Value="120"/>
                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.4300000" Value="142"/>
                                             </DoubleAnimationUsingKeyFrames>
                                             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"  Storyboard.TargetProperty="(FrameworkElement.Height)">
                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.0020000" Value="0"/>
                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.2520000" Value="200"/>
                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.3450000" Value="170"/>
                                                 <SplineDoubleKeyFrame KeyTime="00:00:00.4300000" Value="200"/>
                                             </DoubleAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </BeginStoryboard>
                                 </MultiTrigger.EnterActions>
                             </MultiTrigger>                        
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>

右键菜单：

 <ContextMenu  Style="{StaticResource MyContextMenu}">
                     <MenuItem Header="测试二次"/>
                     <MenuItem Header="测试三次">
                         <MenuItem.Icon>
                             <Image Source="Add.png" Width="12" Height="12"/>
                         </MenuItem.Icon>
                     </MenuItem>
                     <Separator Opacity="0.4"></Separator>
                     <MenuItem Header="测试四次"/>
                     <MenuItem Header="测试五次"/>  
                     <MenuItem Header="测试六次"/>
                     <Separator Opacity="0.4" ></Separator>
                     <MenuItem Header="测试二次"/>
                     <MenuItem Header="测试三次"/>
                     <MenuItem Header="测试五次"/>
                     <Separator Opacity="0.4"></Separator>
                     <MenuItem Header="测试六次">
                         <MenuItem.Icon>
                             <Image Source="Delete.png"  Width="12" Height="12"/>
                         </MenuItem.Icon>
                     </MenuItem>
  </ContextMenu>