WPF —— Expander折叠栏、菜单标签 menu

最新推荐文章于 2025-05-01 08:00:00 发布

小刘同志..

最新推荐文章于 2025-05-01 08:00:00 发布

阅读量4k

点赞数 18

CC 4.0 BY-SA版权

分类专栏： WPF 文章标签： wpf

本文链接：https://blog.youkuaiyun.com/lu2023_8_6/article/details/137022899

WPF 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了WindowsPresentationFoundation(WPF)中的Expander和Menu控件，包括它们的基本功能、常用属性以及实例应用。Expander用于显示和隐藏子元素，而Menu则用于组织命令和事件处理。作者还展示了如何自定义菜单项和使用RoutedCommand进行事件绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Expander

1 ：Expander折叠栏简介

Expander控件有一个箭头按钮。单击箭头时，Expander中的子元素将显示或隐藏。箭头“展开”控件，使其子控件可见。

2 ：Expander常用的属性

IsEnabled 默认是打开或者折叠起来，true就是展开 false折叠
ExpandDirection 展开的方向 down 向下展开

展开标签一般展开方向是上下，不设置高度
一般展开方向是左右，不设置宽度
VerticalAlignment= "top" HorizontalAlignment="Center" 展开宽随着内容进行自适应

3 关于Expander的实例

<Expander IsEnabled="True" ExpandDirection="Down" Width="200" 
   BorderThickness="2" BorderBrush="Green"
   VerticalAlignment="Top" HorizontalAlignment="Center">
    <Expander.Header>
        我的好友
    </Expander.Header>
    <StackPanel Orientation="Vertical">
        <CheckBox IsChecked="True" Margin="0,10">马云</CheckBox>
        <CheckBox Margin="0,10">马化腾</CheckBox>
        <CheckBox Margin="0,10">许家印</CheckBox>
    </StackPanel>
</Expander>

路由：一个菜单对应的是一个以页面这种对应关系就是路由
使用自定义RoutedUICommand(路由UI指令) 可以将一些预定义的操作绑定到应用程序的按钮或者菜单等控件上，
这些命令可以直接触发相应的事件，例如click、例如 click，keydown事件等

<Window.Resources>
<RoutedCommand x:Key="myCmd"></RoutedCommand>
</Window.Resources>

2 给"myCmd命令绑定什么样的操作
Executed事件，当页面切换的时候，就是等同于点击了子菜单项，

<Window.CommandBindings Command="{StaticResource myCmd}"
Executed ="CommandBinging_Executed">
</Window.CommandBindings>

  <Menu Height="40" VerticalAlignment="Top">
      <MenuItem Header="出入管理" 
            FontFamily="华文行楷"
            FontSize="20" 
            BorderThickness="0,0,1,0"
                BorderBrush="Gray"
            Height="40"
                Command="{StaticResource myCmd}">

      </MenuItem>
      <MenuItem Header="请假管理" 
            FontFamily="华文行楷"
            FontSize="20" 
            Height="40">

      </MenuItem>
      <!--FlowDirection="RightToLeft" 菜单的排布方向
  LeftToRight 先排左边在拍右边
  -->
      <MenuItem Header="考勤管理" 
FontFamily="华文行楷"
FontSize="20" 
Height="40"
FlowDirection="LeftToRight">
          <!--设置图标-->
          <MenuItem.Icon>
              <Image Width="40"
             Height="40" 
             Source="https://img0.baidu.com/it/u=2374472521,3444438693">

              </Image>
          </MenuItem.Icon>

          <!--二级菜单-->
          <MenuItem Header="考勤打卡" FontFamily="宋体" Height="40" FontSize="20">
              <!--三级菜单-->
              <MenuItem>
                  <MenuItem.Header>
                      <TextBlock>2021班考勤打卡</TextBlock>
                  </MenuItem.Header>
              </MenuItem>

              <Separator></Separator>
              <MenuItem>
                  <MenuItem.Header>
                      <TextBlock>2022班考勤打卡</TextBlock>
                  </MenuItem.Header>
              </MenuItem>
          </MenuItem>
          <MenuItem Header="缺卡管理" FontFamily="宋体" Height="40" FontSize="20" Command="{StaticResource myCmd}">
              
          </MenuItem>
      </MenuItem>

自定义菜单项

        <MenuItem>
            <!--自定义菜单项的模板标签-->
            <MenuItem.Template>
                <!--ControlTemplate 控件模板TargetType作用到哪种类型标签上 -->
                <ControlTemplate TargetType="MenuItem">
                    <TextBlock Name="Text" 
                               Text="原子弹管理"
                               Padding="8"
                               FontSize="20"
                               FontFamily="华文行楷">
                        
                    </TextBlock>
                    <!--Triggers 触发 
                    Property="IsMouseOver" 鼠标是否放上去
                    Value="true" 放上去
                    -->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver"
                                 Value="true">
                            <Setter TargetName="Text" Property="Background" Value="blue"></Setter>
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
                
            </MenuItem.Template>
        </MenuItem>
    </Menu>
    <!--设置frame进行跳转
    NavigationUIVisibility="Hidden"因此自带前进和后退
    -->
    <Frame Name="f1" Margin="0,40,0,0" NavigationUIVisibility="Hidden"></Frame>
</Grid>

p1页面