WPF之给使用了模板的MenuItem添加快捷操作

时间：2022-11-14 04:15:11

说在前面：

WPF中给按钮或者是具备Command等元素实现快捷键其实是非常简单的，例子如下：

 <Button Content="_Test" Click="Button_Click_1"></Button>

XAML代码很简单，一个Button，设置了Content和事件，细心的小盆友会发现Content的前缀是一个_，这个可不是一般的下划线哦，因为你在运行时候是看不到这个下划线的，这就是快捷键的神奇之处，现在运行程序按下 "Alt+T"，你会发现好神奇竟然执行了Click事件。

解释：WPF中的快捷键定义规则是在文本的前边加上下划线，然后按下Alt和下划线后的字母即可实现，比如上例子中我们下划线后边的是T，所以我们按下Alt+t就可以实现快捷操作，当然你也可以是A--Z都ok的。

窃喜：有小盆友开始发现一个致命问题，如果我们内容是中文怎么办，难道我也必须在前边放一个字母吗，这个问题难道我了，可是难不倒WPF，上例子：

 <Button Content="测试(_T)" Click="Button_Click_1"></Button>

哈哈哈，是不是觉得我很坏呢，可是这个就是解决办法，看看VS中的菜单，是不是都是这样的形式呢，同样运行按下Alt+t是不是执行了Click呢，当然对于英文如果我们的快捷键并不是首字母同样可以采取这样的方法。

进入正文：

    <ControlTemplate TargetType="{x:Type MenuItem}" x:Key="headMenuItemTemplate"  >

            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >

                <Rectangle Fill="#FF505050"

                                       Name="be"

                                       HorizontalAlignment="Stretch"

                                       VerticalAlignment="Stretch"></Rectangle>

                <Label  HorizontalAlignment="Stretch"

                                    VerticalAlignment="Stretch"

                                    HorizontalContentAlignment="Center"

                                    VerticalContentAlignment="Center"

                                    Content="{TemplateBinding Header}"

                                    Name="backLbl"

                                    Margin="10,0,10,0"

                                    Padding="10,0,10,0"

                                    Foreground="#FFC1C1C1"

                                    Visibility="Collapsed"

                                    >

                </Label>

                <Label  HorizontalAlignment="Stretch"

                                    VerticalAlignment="Stretch"

                                    HorizontalContentAlignment="Center"

                                    VerticalContentAlignment="Center"

                                    Content="{TemplateBinding Header}"

                                    Name="contLbl"

                                    Margin="10,0,10,0"

                                    Padding="10,0,10,0"

                                    Foreground="White"

                                    ></Label>

                <Popup Name="Popup"

                                   Placement="Bottom"

                                   IsOpen="{TemplateBinding IsSubmenuOpen}"

                                   AllowsTransparency="True"

                                   Focusable="False"

                                   PopupAnimation="Slide"

                                   >

                    <StackPanel Orientation="Horizontal"

                                SnapsToDevicePixels="True"

                                MinWidth="{TemplateBinding ActualWidth}" >

                        <Border x:Name="DropDownBorder"

                                            BorderThickness="1"

                                            BorderBrush="Black"

                                            HorizontalAlignment="Center"

                                            Width="{TemplateBinding ActualWidth}"

                                            >

                            <Border.Background>

                                <SolidColorBrush Color="#FF535353" />

                            </Border.Background>

                            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True"

                                                  HorizontalScrollBarVisibility="Hidden"

                                                  VerticalScrollBarVisibility="Hidden"

                                        HorizontalAlignment="Center"

                                                  >

                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />

                            </ScrollViewer>

                        </Border>

                    </StackPanel>

                </Popup>

            </Grid>

            <ControlTemplate.Triggers>

                <Trigger Property="IsEnabled" Value="True">

                    <Setter TargetName="contLbl"  Property="Visibility" Value="Visible"></Setter>

                </Trigger>

                <Trigger Property="IsEnabled" Value="False">

                    <Setter TargetName="contLbl"  Property="Visibility" Value="Collapsed"></Setter>

                </Trigger>

                   <EventTrigger RoutedEvent="UIElement.MouseEnter">

                    <BeginStoryboard>

                        <Storyboard>

                            <ColorAnimation

                                Storyboard.TargetName="be"

                                Storyboard.TargetProperty="Fill.Color"

                                To="Black"

                                Duration="0:0:0.4"

                                >

                            </ColorAnimation>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

                <EventTrigger RoutedEvent="UIElement.MouseLeave">

                    <BeginStoryboard>

                        <Storyboard>

                            <ColorAnimation

                                Storyboard.TargetName="be"

                                Storyboard.TargetProperty="Fill.Color"

                                To="#FF505050"

                                Duration="0:0:0.4"

                                >

                            </ColorAnimation>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </ControlTemplate.Triggers>

        </ControlTemplate>

上述代码如果觉得好复杂，可以复制到自己的页面中，其实就是一个MenuItem的模板，并且控制了启用和禁用下的样式，就这么多功能。其中最复杂的就是Popup部分，其实就是用于展现子菜单使用的，所以还是要写上的。
使用模板：

    <MenuItem Header="打开(_O)" Template="{StaticResource headMenuItemTemplate}" >

                <MenuItem Header="_Best" Click="MenuItem_Click_1"  Template="{StaticResource defaultMenuItemTemplate}" ></MenuItem>

                <MenuItem Header="_Cest" Click="MenuItem_Click_2"  Template="{StaticResource defaultMenuItemTemplate}" ></MenuItem>

                <MenuItem Header="_Dest" Click="MenuItem_Click_3"  Template="{StaticResource defaultMenuItemTemplate}" ></MenuItem>

    </MenuItem>

使用也很简单，运行程序，按下Alt+O,你很难过的发现为什么菜单不会展开呢，哈哈哈，因为代码有问题所以展不开，另外你会发现手动点击开按下子菜单对应的快捷键(B,C,D)竟然没反应，别急按下键同时按下Enter回车即可。

解释：为什么会展不开呢，因为代码少东西：

   <!--菜单高亮的时候展开子菜单-->

                <Trigger Property="IsHighlighted" Value="true">

                    <Setter Property="IsOpen" Value="True" TargetName="Popup"/>

                </Trigger>

上述代码我们只针对Enable做了除了，可是当菜单高亮的时候并没有做任何东西，所以加上上述的代码即可，IsOpen是Popup的属性，这样按下快捷键就可以展开菜单了，是不是很简单呢。
好了，这篇东西蛮简单，大家有好的建议多交流。

相关文章