Wpf 使用 Prism 实战开发Day02

这篇具有很好参考价值的文章主要介绍了Wpf 使用 Prism 实战开发Day02。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.设计首页导航条

导航条的样式,主要是从Material DesignThemes UI 拷贝过来修改的,项目用了这个UI组件库,就看自己需要什么,就去拷过来使用,界面布局或其他组件使用,不做介绍。 直接下载源码,编译运行就可以看到Demo 了


反正我下载完且编译后是能正常跑起来,没有办法跑起来的,找找自己的问题,是不是工作不努力了。接下来,是要把圈红色那块拷出来,做为主界面的导航条

Wpf 使用 Prism 实战开发Day02,WPF入门,wpf


1.最终导航栏效果图:

Wpf 使用 Prism 实战开发Day02,WPF入门,wpf


2. MainWindow.xaml 源码

<Window x:Class="MyToDo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyToDo"
        WindowStyle="None" WindowStartupLocation="CenterScreen" AllowsTransparency="True"
         Style="{StaticResource MaterialDesignWindow}"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        Background="{DynamicResource MaterialDesignPaper}"
        TextElement.FontWeight="Medium"
        TextElement.FontSize="14"
        FontFamily="{materialDesign:MaterialDesignFont}"
        mc:Ignorable="d"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        Title="MainWindow" Height="768" Width="1280">
    <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">
                    
                </DockPanel>
            </materialDesign:DrawerHost.LeftDrawerContent>

            <DockPanel >
                <!--导航条色块-->
                <materialDesign:ColorZone Padding="16" x:Name="ColorZone"
                                materialDesign:ElevationAssist.Elevation="Dp4"
                                DockPanel.Dock="Top"
                                Mode="PrimaryMid">
                    <DockPanel LastChildFill="False">
                        <!--上左边内容-->
                        <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" />
                            <TextBlock Margin="16,0,0,0"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             AutomationProperties.Name="Material Design In XAML Toolkit"
                             FontSize="22"
                             Text="笔记本" />
                        </StackPanel>
                        <!--上右边图标-->
                        <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
                            <Image Source="/Images/user.jpg" Width="25" Height="25">
                                <Image.Clip>
                                    <EllipseGeometry Center="12.5,12.5" RadiusX="12.5" RadiusY="12.5" />
                                </Image.Clip>
                            </Image>
                            <Button x:Name="btnMin" Style="{StaticResource MaterialDesignFlatMidBgButton}">
                                <materialDesign:PackIcon Kind="MoveResizeVariant" />
                            </Button>
                            <Button x:Name="btnMax" Style="{StaticResource MaterialDesignFlatMidBgButton}">
                                <materialDesign:PackIcon Kind="CardMultipleOutline" />
                            </Button>
                            <Button x:Name="btnClose" Style="{StaticResource MaterialDesignFlatMidBgButton}" Cursor="Hand">
                                <materialDesign:PackIcon Kind="WindowClose" />
                            </Button>
                        </StackPanel>
                    </DockPanel>
                    
                </materialDesign:ColorZone>
               

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

3.MainWindow.xaml.cs 源码

namespace MyToDo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            //最小化
            btnMin.Click += (s, e) =>
            {
                this.WindowState = WindowState.Minimized;//窗口设置最小
            };
            //最大化
            btnMax.Click += (s, e) =>
            {
                //判断窗口是否是最小化状态
                if (this.WindowState == WindowState.Maximized)
                {
                    this.WindowState = WindowState.Normal; //改成正常状态
                }
                else
                {
                    this.WindowState = WindowState.Maximized;//最大化
                }
            };
            //关闭
            btnClose.Click += (s, e) =>
            {
                this.Close();
            };
            //鼠标拖动事件
            ColorZone.MouseMove += (s, e) =>
            {
                //如果鼠标在拖动
                if (e.LeftButton == MouseButtonState.Pressed)
                {
                    this.DragMove();//让窗口移动
                }
            };

            //导航栏双击事件
            ColorZone.MouseDoubleClick += (s, e) =>
            {
                //双击时,如果是窗口是正常形态,就变成最大化
                if (this.WindowState == WindowState.Normal)
                {
                    this.WindowState = WindowState.Maximized; 
                }
                else
                {
                    this.WindowState = WindowState.Normal;//否则就变成正常的
                }
            };
        }

    }
}

 用法简介

1. 主界面MainWindow.xaml 引入 Material DesignThemes UI 命名空间,如下:

 xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" 

 MainWindow 窗口设置以下几个属性

  • 隐藏原窗口的边框 WindowStyle="None"
  • 主窗口启动时居中 WindowStartupLocation="CenterScreen" 
  • 设置窗口属性为透明,用于隐藏窗口出现白边 AllowsTransparency="True"

DockPanel 属性,用的到列一下说明而已

  • 取消最后一个元素填充:LastChildFill="False" 
  • 往右停靠:DockPanel.Dock="Right"

 Material DesignThemes UI 样式,用来隐藏原生按钮边框

  • Style="{StaticResource MaterialDesignFlatMidBgButton}"

未隐藏前后对比

Wpf 使用 Prism 实战开发Day02,WPF入门,wpf

图标可以使用UI 框架提供的


 Image 属性,用来放置头像,并且使用裁剪属性使头像变成圆角

  • Image.Clip 剪裁绝对定位元素
  • EllipseGeometry 用来绘制一个椭圆或者圆形的图形
  • RadiusX      X轴半径
  • RadiusY      Y轴半径

 例如:

<Image Source="/Images/user.jpg" Width="25" Height="25">
    <Image.Clip>
        <EllipseGeometry Center="12.5,12.5" RadiusX="12.5" RadiusY="12.5" />
    </Image.Clip>
</Image>

效果:

Wpf 使用 Prism 实战开发Day02,WPF入门,wpf

 对上面,我的理解就是,使用Image 时要设置高度和宽度,并且在用到裁剪属性的时候,X轴半径和Y轴半径就设置成 Image 高宽值的一半。所以就变成12.5


二.实现导航条右侧,最小化,最大化,关闭窗口功能

1. 通过事件的形式来实现最小化,最大化,及关闭的功能点

 在 MainWindow.xaml.cs 构造函数中,抄上以下代码。我也是抄过来的

//最小化
btnMin.Click += (s, e) =>
{
    this.WindowState = WindowState.Minimized;//窗口设置最小
};
//最大化
btnMax.Click += (s, e) =>
{
    //判断窗口是否是最小化状态
    if (this.WindowState == WindowState.Maximized)
    {
        this.WindowState = WindowState.Normal; //改成正常状态
    }
    else
    {
        this.WindowState = WindowState.Maximized;//最大化
    }
};
//关闭
btnClose.Click += (s, e) =>
{
    this.Close();
};

突然长知识了,没有想到还有这样的写法。之前都是在前端界面绑定一个事件,3个按钮就要绑定3个,例如,像下面这样写法,每个按钮一个事件,代码就有点多,且不好看。

Wpf 使用 Prism 实战开发Day02,WPF入门,wpf


2. 让导航栏头部支持鼠标按住时,拖动窗口

 在 MainWindow.xaml.cs 构造函数中,抄上以下代码。

 //鼠标拖动事件
 ColorZone.MouseMove += (s, e) =>
 {
     //如果鼠标在拖动
     if (e.LeftButton == MouseButtonState.Pressed)
     {
         this.DragMove();//让窗口移动
     }
 };

 3. 双击导航栏时,让窗口变大或恢复正常

 在 MainWindow.xaml.cs 构造函数中,抄上以下代码。

//导航栏双击事件
ColorZone.MouseDoubleClick += (s, e) =>
{
    //双击时,如果是窗口是正常形态,就变成最大化
    if (this.WindowState == WindowState.Normal)
    {
        this.WindowState = WindowState.Maximized; 
    }
    else
    {
        this.WindowState = WindowState.Normal;//否则就变成正常的形态
    }
};

ColorZone,btnMin,btnMax,btnClose 都是前端xaml 页面定义的名称! 文章来源地址https://www.toymoban.com/news/detail-735711.html

到了这里,关于Wpf 使用 Prism 实战开发Day02的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Wpf 使用 Prism 实战开发Day13

    在上一节  ToDoController 控制器,或 IToDoService 服务接口中,方法的传参都是直接传的实体类。但在实际开发过程中,这样是不允许的。标准且规范的做法是,定义一个数据传输层,即Dto层。 1. 创建 BaseDto 基类,用于存放共用属性。 2. 创建待办事项 Dto类,并继承自 BaseDto 基类

    2024年01月20日
    浏览(45)
  • Wpf 使用 Prism 实战开发Day08

    1.效果图 MemoView.xaml 页面代码      1. 在  ItemsControl 中,添加滚动条  ScrollViewer  这样使用 ScrollViewer 把内容区域包裹起来,就能让内容区域支持滚动了        2 . 添加滚动条后的效果图如下:  使用md 中的一个自带动画 md:TransitioningContent 来实现该功能  需要设置一个属性,

    2024年02月03日
    浏览(38)
  • Wpf 使用 Prism 实战开发Day10

    1-9章节已经把基本功能都做好了,但页面的数据是后台模拟生成的静态数据。接下来所有章节就是实现,页面的所有数据都是从数据库中获取,并且实现页面数据的持久化以及增删改查。 使用Sqlite 做为数据库  1.打开 MyToDo.Api项目,右键=》选择 管理NuGet 程序包 ,进行下载安

    2024年01月25日
    浏览(44)
  • Wpf 使用 Prism 实战开发Day14

    备忘录控制器(MemoController)和待办事项控制器 (ToDoController)功能实现差不多一样。基本套路就是: 定义控制器(Controller) 定义数据传输层(Dto) 配置实体类(Entity)和数据传输类(Dto) 关系映射(Auto Mapper) 定义服务接口(IService) 实现服务接口 (Service) 把服务注入控

    2024年01月22日
    浏览(46)
  • Wpf 使用 Prism 实战开发Day01

    1.  VisualStudio 2022 2.  . NET SDK 7.0 3.  Prism 版本 8.1.97 以上环境,如有新的版本,可自行选择安装新的版本为主 项目名称:这里只是记录学习,所以随便命名都无所谓,只要觉得合理就行 注意: 下载的包名是 Prism.DryIoc 。为什么不是Prism.xxx其他包,而是 Prism.DryIoc ,别问我,我也不

    2024年02月08日
    浏览(42)
  • WPF超好用的框架Prism入门使用,上位机赶紧学起来!

    WPF框架Prism是一种用于开发模块化、可重用和可测试的WPF应用程序的框架。它提供了一种简单而强大的方式来管理复杂应用程序的代码和构建高度可扩展的应用程序。 如果您想使用Prism框架来开发WPF应用程序,需要学习以下几个方面: MVVM模式 :Prism基于MVVM模式,因此需要了

    2024年02月01日
    浏览(37)
  • WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】(四)

    最近通过WPF开发项目,为了对WPF知识点进行总结,所以利用业余时间,开发一个学生信息管理系统【Student Information Management System】。前三篇文章进行了框架搭建和模块划分,后台WebApi接口编写,以及课程管理模块开发,本文在前三篇基础之上,继续深入开发学生信息管理系统

    2024年02月04日
    浏览(44)
  • WPF开发之Prism详解【内附源码】

    在实际应用开发中,随着项目业务逐渐复杂,耦合度会越来越高,维护成本也会直线上升,所以解耦也变得越来越重要。Prism框架为WPF开发中解耦提供了非常便捷的应用。今天主要以一个简单的小例子,简述WPF开发中Prism框架的简单应用,如有不足之处,还请指正。 Prism是一个

    2023年04月16日
    浏览(39)
  • WPF Prism的简单使用

    新建 WPF 项目,我是基于 .net 5.0-windows 创建的。 引入 Prism.DryIoc(8.1.97) 的 Nuget 包。 App.xaml 中引入命名空间。 将 App.xaml 中 Application 标签更改成 prism:PrismApplication 并去除 StartUri 属性,将 App.xaml.cs 中 Application 更改成 PrismApplication 。 实现 PrismApplication (实际上是 PrismApplicationBas

    2023年04月14日
    浏览(74)
  • WPF框架Prism的使用 二

    这是第二篇关于Prism-WPF的介绍,第一篇中我们简单介绍了Prism,然后讲述了如何搭建一个MVVM的简单页面程序。其实我写的文章就是把github上面的官方例子摘出来自己跑了一遍,然后加上了一些自己的理解,简单给大家分享一下。 下面放上传送门: 第一篇的链接 官方提供的示

    2024年04月10日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包