当前位置：首页 > news >正文

3.1.1 MaterialDesign中DrawerHost使用案例

news 来源：原创 2025/4/23 5:42:45

DrawerHost 是 MaterialDesignInXAML Toolkit 中实现 Material Design 侧边抽屉导航的控件，它提供了类似于 Android 应用中常见的导航抽屉功能。
        基本用法：
        DrawerHost 通常包含以下部分：
        主内容区域
        左侧抽屉（LeftDrawer）
        右侧抽屉（RightDrawer）
        顶部应用栏（可选）

一、例1：简单的使用

 <materialDesign:DrawerHost IsLeftDrawerOpen="true" ><!-- 主内容区域 --><Grid><TextBlock Text="主内容区域" VerticalAlignment="Center" HorizontalAlignment="Center"FontSize="24"/></Grid><!-- 左侧抽屉 --><materialDesign:DrawerHost.LeftDrawerContent><StackPanel><TextBlock Text="导航菜单" Margin="16,16,16,8"Style="{StaticResource MaterialDesignSubtitle1TextBlock}"/><Separator Style="{StaticResource MaterialDesignLightSeparator}"/><Button Content="首页" Style="{StaticResource MaterialDesignFlatButton}"Margin="8,4"/><Button Content="设置" Style="{StaticResource MaterialDesignFlatButton}"Margin="8,4"/><Button Content="关于" Style="{StaticResource MaterialDesignFlatButton}"Margin="8,4"/></StackPanel></materialDesign:DrawerHost.LeftDrawerContent></materialDesign:DrawerHost>

二、例2- 带有菜单按钮控制抽屉打开与关闭

带有控制抽屉开关的按钮

<materialDesign:DrawerHost><Grid><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition Height="*"/></Grid.RowDefinitions>     <!-- 应用栏 --><materialDesign:ColorZone Mode="PrimaryDark" Padding="16" Grid.Row="0" Height="80"><StackPanel Orientation="Horizontal"><!-- 汉堡菜单按钮 --><ToggleButton x:Name="MenuToggleButton"Style="{StaticResource MaterialDesignHamburgerToggleButton}"IsChecked="{Binding IsLeftDrawerOpen, RelativeSource={RelativeSource AncestorType=materialDesign:DrawerHost}}"/><TextBlock Text="我的应用" Margin="16,0,0,0"VerticalAlignment="Center"Style="{StaticResource MaterialDesignTitleMediumTextBlock}"/></StackPanel></materialDesign:ColorZone><!-- 主内容 --><Grid Grid.Row="1"><TextBlock Text="主内容区域" VerticalAlignment="Center" HorizontalAlignment="Center"FontSize="24"/></Grid></Grid><!-- 左侧抽屉内容同上 --><materialDesign:DrawerHost.LeftDrawerContent><StackPanel><TextBlock Text="导航菜单" Margin="16,16,16,8"Style="{StaticResource MaterialDesignSubtitle1TextBlock}"/><Separator Style="{StaticResource MaterialDesignLightSeparator}"/><Button Content="首页" Style="{StaticResource MaterialDesignFlatButton}"Margin="8,4"/><Button Content="设置" Style="{StaticResource MaterialDesignFlatButton}"Margin="8,4"/><Button Content="关于" Style="{StaticResource MaterialDesignFlatButton}"Margin="8,4"/></StackPanel></materialDesign:DrawerHost.LeftDrawerContent>
</materialDesign:DrawerHost>