WPF使用Prism框架首页界面

  1. 首先确保已经下载了NuGet包MaterialDesignThemes

2.我们通过包的项目URL可以跳转到Github上查看源码

3.找到首页所在的代码位置

4.将代码复制下来,删除掉自己不需要的东西,最终如下

cs 复制代码
<materialDesign:DialogHost
    DialogTheme="Inherit"
    Identifier="RootDialog"
    SnackbarMessageQueue="{Binding ElementName=MainSnackbar, Path=MessageQueue}">

    <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
        <materialDesign:DrawerHost.LeftDrawerContent>
            <!--  左侧菜单  -->
            <DockPanel MinWidth="220" />
        </materialDesign:DrawerHost.LeftDrawerContent>

        <!--  头部  -->
        <DockPanel>
            <materialDesign:ColorZone
                Padding="16"
                materialDesign:ElevationAssist.Elevation="Dp4"
                DockPanel.Dock="Top"
                Mode="PrimaryMid">
                <DockPanel>
                    <StackPanel Orientation="Horizontal">
                        <ToggleButton
                            x:Name="MenuToggleButton"
                            AutomationProperties.Name="HamburgerToggleButton"
                            IsChecked="False"
                            Style="{StaticResource MaterialDesignHamburgerToggleButton}" />

                        <Button
                            Margin="24,0,0,0"
                            materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                            Command="{Binding MovePrevCommand}"
                            Content="{materialDesign:PackIcon Kind=ArrowLeft,
                                                              Size=24}"
                            Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                            Style="{StaticResource MaterialDesignToolButton}"
                            ToolTip="Previous Item" />

                        <Button
                            Margin="16,0,0,0"
                            materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                            Command="{Binding MoveNextCommand}"
                            Content="{materialDesign:PackIcon Kind=ArrowRight,
                                                              Size=24}"
                            Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                            Style="{StaticResource MaterialDesignToolButton}"
                            ToolTip="Next Item" />

                        <Button
                            Margin="16,0,0,0"
                            materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                            Command="{Binding HomeCommand}"
                            Content="{materialDesign:PackIcon Kind=Home,
                                                              Size=24}"
                            Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                            Style="{StaticResource MaterialDesignToolButton}"
                            ToolTip="Home" />
                    </StackPanel>


                    <TextBlock
                        Margin="-152,0,0,0"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        AutomationProperties.Name="Material Design In XAML Toolkit"
                        FontSize="22"
                        Text="Material Design In XAML Toolkit" />
                </DockPanel>
            </materialDesign:ColorZone>

        </DockPanel>
    </materialDesign:DrawerHost>
</materialDesign:DialogHost>

5.运行查看效果

相关推荐
先吃饱再说16 分钟前
React 组件通信:从 Props 单向传递到自定义事件
前端·react.js·前端框架
swipe20 分钟前
05|(前端转后全栈)不手写一堆 SQL,后端怎么操作数据库?MyBatis-Plus 入门
前端·后端·全栈
swipe25 分钟前
04|(前端转后全栈)前端状态为什么不够用?从页面数据到 MySQL 持久化
前端·后端·全栈
橘子星26 分钟前
别光看教程!手把手拆解 React Todo 项目,一文吃透 5 个核心概念
前端·javascript
大白要努力!32 分钟前
纯前端实现 PDF 加水印工具 —— 零后端、支持中文、实时预览
前端·pdf·html
石小石Orz34 分钟前
TRAE SOLO实战:实现一个桌面3D助手
前端·人工智能
蜡台39 分钟前
使用 uni-popup 实现数据选择器Data-Picker
前端·javascript·html·uniapp·uni-popup·data-picker
拆房老料41 分钟前
BaseMetas FileView 1.2.0 发布:Office/WPS 大文件预览与内存安全优化实测
前端·产品运营·开源软件
blns_yxl44 分钟前
Promise封装Fetch + 重试机制(HTML+JS)
前端·javascript·html
Elastic 中国社区官方博客1 小时前
使用重新设计的 AutoOps 更快地进行 Elasticsearch 问题排查
大数据·运维·前端·人工智能·elasticsearch·搜索引擎·全文检索