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

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>

Menu

1：Menu菜单简介

Menu 表示一个 Windows 菜单控件，该控件可用于按层次组织与命令和事件处理程序关联的元素。

    该 Menu 控件提供一个项列表，用于指定应用程序的命令或选项。 通常，单击菜单上的项会打开子菜单或导致应用程序执行命令。

2 ：Menu常用的属性

子菜单是: <MenuItem></MenuItem> ,子菜单标签又可以添加子菜单项
MenuItem.Icon 设置菜单图标的，
MenuItem.Header 和header属性都可以设置标题
MenuItem.Template 自定义子菜单

FlowDirection="RightToLeft" 菜单的排布方向
        LeftToRight 先排左边在拍右边

子菜单的事件：最常用的是通过click进行绑定点标题三击事件，通过界面命令进行绑定事件RoutedCommand
点击子菜单之后进行页面跳转，使用frame标签，navigate的方法进行跳转

3 关于Menu的实例

路由：一个菜单对应的是一个以页面 这种对应关系就是路由
    使用自定义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页面

  <Grid Background="Green">
      <TextBlock>我是page1</TextBlock>
  </Grid>