Wpf 使用 Prism 实战开发Day03

 一.实现左侧菜单绑定

效果图:


1.首先需要在项目中创建 mvvm 的架构模式

  •   创建 Models ,放置实体类。

实体类需要继承自Prism 框架的 BindableBase,目的是让实体类支持数据的动态变更!

  •  例如: 系统导航菜单实体类
/ <summary>/// 系统导航菜单实体类/// </summary>
public class MenuBar:BindableBase{private string icon;/// <summary>/// 菜单图标/// </summary>public string Icon{
get { return icon; }
set { icon = value; }}private string title;/// <summary>/// 菜单名称/// </summary>public string Title{
get { return title; }
set { title = value; }}private string nameSpace;/// <summary>/// 菜单命名空间/// </summary>public string NameSpace{
get { return nameSpace; }
set { nameSpace = value; }}}

  • 创建View文件夹  放置前端显示页面 。例如:创建首页:MainView.xaml
  • 创建ViewModel 文件夹,放置前端逻辑处理类。意思是:有前端页面同时,也要有对应的后台业务逻辑处理类。例如:MainViewModel

 

  1. 使用了Prism 框架,一些视图或类的定义都是有约定的。例如:视图统一使用xxxView 结尾。视图模形统一使用xxxViewModel 结尾。这样做的原因是:第一规范,第二,方便使用 Prism 进行动态的方式绑定上下文的时候,能自动找到对应类。
  2. Prism 动态上下文绑定方式,引入命名空间,把 AutoWireViewModel 设置成 True
 xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"

2.创建MainViewModel 逻辑处理类

MainViewModel 类同样也需要继承自Prism 框架的 BindableBase 

  •  创建左侧菜单的数据,需要使用到一个动态的属性集合 ObservableCollection 来存放菜单的数据

  • 创建菜单数据
    public class MainViewModel: BindableBase{public MainViewModel(){MenuBars=new ObservableCollection<MenuBar>();CreateMenuBar();}private ObservableCollection<MenuBar> menuBars;public ObservableCollection<MenuBar> MenuBars{get { return menuBars; }set { menuBars = value; RaisePropertyChanged(); }}void CreateMenuBar(){MenuBars.Add(new MenuBar() { Icon="Home",Title="首页",NameSpace="IndexView"});MenuBars.Add(new MenuBar() { Icon = "NotebookCheckOutline", Title = "待办事项", NameSpace = "ToDoView" });MenuBars.Add(new MenuBar() { Icon = "NotebookPlusOutline", Title = "忘备录", NameSpace = "MemoView" });MenuBars.Add(new MenuBar() { Icon = "Cog", Title = "设置", NameSpace = "SettingsView" });}}
  • NameSpace:主要用于导航
  • Icon:是Material DesignThemes UI 框架里面的图标名称

3.MainView.xaml 前端绑定数据

  •  列表数据的绑定,使用ListBox 的自定义模板,也就是 ListBox.ItemTemplate,并且写法是固定的
<!--列表-->
<ListBox><ListBox.ItemTemplate><DataTemplate><!--在这里添加内容数据--></DataTemplate></ListBox.ItemTemplate>
</ListBox>
  • 例如:结合上面创建MainViewModel 类,给MainView.xaml 渲染数据
<!--列表-->
<ListBox ItemsSource="{Binding MenuBars}"><ListBox.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="{Binding Icon}" Margin="15,0" /><TextBlock Text="{Binding Title}" Margin="10,0"/></StackPanel></DataTemplate></ListBox.ItemTemplate>
</ListBox>
  •  MainView.xaml 添加动态绑定 上下文
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"

注意:项目中的MainWindow.xaml 已经改成了MainView.xaml,并且把启动页设置成 MainView了

  • 最终项目结构 

 4.左侧菜单样式调整

  • 在App.xaml 资源文件中,更改默认的主题颜色

  • 更改左侧列表选择的样式 

 重写自定义样式

  • 在App.xaml 文件中 资源字典 ResourceDictionary 节点中,设置Style 属性来进行样式重写

Style 使用方式

  1.  TargetType :设置作用的目标类型
  2.  Setter :设计器,里面有2个常用属性,分别是Property 和Value。用来改变设置作用的目标类型一些属性的值
  3. key: 通过指定的key 来使用重写的样式

例如:设置ListBoxItem 属性中的最小行高为40

<Style TargetType="ListBoxItem"><Setter Property="MinHeight" Value="40"/>
</Style>

     3. Property 中有一个特别的属性:Template。用于改变控件的外观样式。并且也有固定的写法

<Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ListBoxItem}"></ControlTemplate></Setter.Value>
</Setter>

 TargetType 有2种写法

  1. 一种是直接用Style 设置一些属性,可以这样写 TargetType="ListBoxItem"
  2. 另外一种写法是,当需要使用到自定义模板,也就是要改变控件的外观样式时,Property 设置的值为 Template,里面TargetType 写法就变成这样 TargetType="{x:Type ListBoxItem}"
  3. 使用自定义的模板时,需要使用到一个属性 ContentPresenter,把原有模板的属性原封不动的投放到自定义模板。

    4. 触发器,它按条件应用属性值或执行操作

 如果使用Template 自定义控件样式后,需要搭配触发器进行使用。

例如:

<ControlTemplate TargetType="{x:Type ListBoxItem}"><Grid><!--内容最左侧的样式--><Border x:Name="borderHeader"/><!--内容选中的样式--><Border x:Name="border"/><!--内容呈现,使用自定义模板时,不加该属性,原先的内容无法呈现--><ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Grid><!--触发器--><ControlTemplate.Triggers><!--如果是选中状态--><Trigger Property="IsSelected" Value="True"><!--第一个Border 设置边框样式--><Setter Property="BorderThickness" TargetName="borderHeader" Value="4,0,0,0"/><!--第一个Border 设置边框颜色,value 动态绑定主要是为了适应主题颜色更改时,边框也着变--><Setter Property="BorderBrush" TargetName="borderHeader" Value="{DynamicResource PrimaryHueLightBrush}"/><!--第二个border 设置选中的样式--><Setter Property="Background" TargetName="border" Value="{DynamicResource PrimaryHueLightBrush}"/><!--第二个border 设置选中的透明度--><Setter Property="Opacity" TargetName="border" Value="0.2"/></Trigger><!--鼠标悬停触发器,如果鼠标悬停时--><Trigger Property="IsMouseOver" Value="True"><!--第二个border 设置选中的样式--><Setter Property="Background" TargetName="border" Value="{DynamicResource PrimaryHueLightBrush}"/><!--第二个border 设置选中的透明度--><Setter Property="Opacity" TargetName="border" Value="0.2"/></Trigger></ControlTemplate.Triggers>
</ControlTemplate>

   5. 样式写完后,需要在MainView.xmal 的ListBox中使用这个样式资源文件,通过指定Key 来使用。

 二.源码

1.MainView.xaml

<Window x:Class="MyToDo.Views.MainView"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"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"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" ><!--头像--><StackPanel DockPanel.Dock="Top" Margin="0,20"><Image Source="/Images/user.jpg" Width="50" Height="50"><Image.Clip><EllipseGeometry Center="25,25" RadiusX="25" RadiusY="25" /></Image.Clip></Image><TextBlock Text="WPF gg" Margin="0,10" HorizontalAlignment="Center" /></StackPanel><!--列表--><ListBox ItemContainerStyle="{StaticResource MyListBoxItemStyle}" ItemsSource="{Binding MenuBars}"><ListBox.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal" Background="Transparent"><materialDesign:PackIcon Kind="{Binding Icon}" Margin="15,0" /><TextBlock Text="{Binding Title}" Margin="10,0"/></StackPanel></DataTemplate></ListBox.ItemTemplate></ListBox></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>

2.MainViewModel

namespace MyToDo.ViewModels
{public class MainViewModel: BindableBase{public MainViewModel(){MenuBars=new ObservableCollection<MenuBar>();CreateMenuBar();}private ObservableCollection<MenuBar> menuBars;public ObservableCollection<MenuBar> MenuBars{get { return menuBars; }set { menuBars = value; RaisePropertyChanged(); }}void CreateMenuBar(){MenuBars.Add(new MenuBar() { Icon="Home",Title="首页",NameSpace="IndexView"});MenuBars.Add(new MenuBar() { Icon = "NotebookCheckOutline", Title = "待办事项", NameSpace = "ToDoView" });MenuBars.Add(new MenuBar() { Icon = "NotebookPlusOutline", Title = "忘备录", NameSpace = "MemoView" });MenuBars.Add(new MenuBar() { Icon = "Cog", Title = "设置", NameSpace = "SettingsView" });}}
}

3.App.xaml

<prism:PrismApplication x:Class="MyToDo.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:MyToDo"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:prism="http://prismlibrary.com/"><Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><materialDesign:BundledTheme BaseTheme="Dark" PrimaryColor="DeepPurple" SecondaryColor="Lime" /><ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" /></ResourceDictionary.MergedDictionaries><Style x:Key="MyListBoxItemStyle" TargetType="ListBoxItem"><Setter Property="MinHeight" Value="40"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ListBoxItem}"><Grid><!--内容最左侧的样式--><Border x:Name="borderHeader"/><!--内容选中的样式--><Border x:Name="border"/><!--内容呈现,使用自定义模板时,不加该属性,原先的内容无法呈现--><ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Grid><!--触发器--><ControlTemplate.Triggers><!--如果是选中状态--><Trigger Property="IsSelected" Value="True"><!--第一个Border 设置边框样式--><Setter Property="BorderThickness" TargetName="borderHeader" Value="4,0,0,0"/><!--第一个Border 设置边框颜色,value 动态绑定主要是为了适应主题颜色更改时,边框也着变--><Setter Property="BorderBrush" TargetName="borderHeader" Value="{DynamicResource PrimaryHueLightBrush}"/><!--第二个border 设置选中的样式--><Setter Property="Background" TargetName="border" Value="{DynamicResource PrimaryHueLightBrush}"/><!--第二个border 设置选中的透明度--><Setter Property="Opacity" TargetName="border" Value="0.2"/></Trigger><!--鼠标悬停触发器,如果鼠标悬停时--><Trigger Property="IsMouseOver" Value="True"><!--第二个border 设置选中的样式--><Setter Property="Background" TargetName="border" Value="{DynamicResource PrimaryHueLightBrush}"/><!--第二个border 设置选中的透明度--><Setter Property="Opacity" TargetName="border" Value="0.2"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></ResourceDictionary></Application.Resources>
</prism:PrismApplication>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/123872.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python学习】—面向对象(九)

【Python学习】—面向对象&#xff08;九&#xff09; 一、初识对象 类中不仅可以定义属性来记录数据&#xff0c;也可以定义函数&#xff0c;用来记录行为&#xff0c;类中定义的属性&#xff08;变量&#xff09;我们称之成员变量&#xff0c;类中定义的行为&#xff08;函数…

【多态-动态绑定-向上转型-抽象类】

文章目录 静态绑定动态绑定多态的具体实现向上转型多态的优缺点抽象类抽象类的作用 总结 静态绑定 重载就是典型例子 动态绑定 多态的具体实现 //多态 class Animal{public String name;public int age;//无参构造方法public Animal() {}//有参构造方法public Animal(Strin…

MySQL Server 5.5 软件和安装配置教程

MySQL 5.5.58&#xff08;32/64位&#xff09;下载链接&#xff1a; 百度网盘&#xff1a;百度网盘 请输入提取码 提取密码&#xff1a;7act 软件简介&#xff1a; MySQL 是由瑞典MySQL AB 公司开发一个关系型数据库管理系统&#xff0c;目前属于 Oracle 旗下产品。MySQL 是最…

代码没注释?一个方法几百行?

干程序员的都有接收别人的代码的经历&#xff0c;大部分时候&#xff0c;我们都会偷偷骂一句“这人是傻逼吧&#xff0c;这代码写的这么烂&#xff01;” “一个方法写几百行&#xff0c;还没有注释&#xff0c;鬼知道写的什么东西&#xff01;” 现在&#xff0c;你不需要为…

__707设计链表

单向链表设计 package 日常Java程序测试.代码随想录.链表;public class __707设计链表__单向链表设计 {class MyLinkedList {//我们首先需要自己定义属性出来int val;MyLinkedList next;int size; //记录链表大小//MyLinkedList() 初始化 MyLinkedList 对象。public MyLinke…

2.flink编码第一步(maven工程创建)

概述 万里第一步&#xff0c;要进行flink代码开发&#xff0c;第一步先整个 flink 代码工程 flink相关文章链接 flink官方文档 两种方式 一种命令行 mvn 创建&#xff0c;另一种直接在 idea 中创建一个工程&#xff0c;使用 mvn 的一些配置 mvn命令行创建 mvn 创建flink工程&…

吴恩达《机器学习》1-4:无监督学习

一、无监督学习 无监督学习就像你拿到一堆未分类的东西&#xff0c;没有标签告诉你它们是什么&#xff0c;然后你的任务是自己找出它们之间的关系或者分成不同的组&#xff0c;而不依赖于任何人给你关于这些东西的指导。 以聚类为例&#xff0c;无监督学习算法可以将数据点分成…

《微习惯》-微习惯策略的八大规则

绝不要自欺欺人满意每一个进步经常回报自己&#xff0c;尤其在完成微习惯之后保持头脑清醒感到强烈抵触时&#xff0c;后退并缩小目标提醒自己这件事很轻松绝不要小看微步骤用多余精力超额完成任务&#xff0c;而不是制定更大目标

LeetCode383. Ransom Note

文章目录 一、题目二、题解 一、题目 Given two strings ransomNote and magazine, return true if ransomNote can be constructed by using the letters from magazine and false otherwise. Each letter in magazine can only be used once in ransomNote. Example 1: I…

接口测试,一篇搞定

大多数人对于接口测试都觉得是一种高大上的测试&#xff0c;觉得学会接口测试就可以从小白测试员&#xff0c;变成了高级测试员&#xff0c;但其实接口测试只是测试的基础内容 什么是接口 接口泛指实体把自己提供给外界的一种抽象化物&#xff08;可以为另一实体&#xff09;&…

9、电路综合-基于简化实频的任意幅频响应的微带电路设计

9、电路综合-基于简化实频的任意幅频响应的微带电路设计 网络综合和简化实频理论学习概述中的1-8介绍了SRFT的一些基本概念和实验方法&#xff0c;终于走到了SRFT的究极用途&#xff0c;给定任意响应直接综合出微带电路。 1、任意幅频响应的微带电路设计用途 我们演示了采用…

Django的静态文件目录(路径)如何配置?

通常用下面的三条语句配置Django的静态文件目录 STATICFILES_DIRS [os.path.join(BASE_DIR, static)] STATIC_URL /static/ STATIC_ROOT os.path.join(BASE_DIR, /static)那么这三条语句分别的作用是什么呢&#xff1f; 请参考博文 https://blog.csdn.net/wenhao_ir/articl…

STM32单片机智能小车一PWM方式实现小车调速和转向

目录 1. 电机模块开发 2. 让小车动起来 3. 串口控制小车方向 4. 如何进行小车PWM调速 5. PWM方式实现小车转向 1. 电机模块开发 L9110s概述 接通VCC&#xff0c;GND 模块电源指示灯亮&#xff0c; 以下资料来源官方&#xff0c;具体根据实际调试 IA1输入高电平&#xff…

添加主仓库后报错error: remote upstream already exists.

可能的原因 远程名 upstream 已经被使用&#xff1a; 这通常意味着你在之前已经添加了一个名为 upstream 的远程仓库。 解决方案 检查现有的远程仓库&#xff1a; 运行 git remote -v 来查看所有配置的远程仓库。这个命令会列出所有远程仓库的URL&#xff0c;你可以检查是否已…

视频分辨率/帧率/码率选择参考

1. 视频码率与分辨率的参考表 1080&#xff0a;720的分辨率&#xff0c;用5000K左右&#xff1b; 720&#xff0a;576的分辨率&#xff0c;用3500K左右&#xff1b; 640&#xff0a;480的分辨率&#xff0c;用1500K左右。 2. 计算公式 基本算法&#xff1a;码率&#xff08;kb…

部署vuepress项目到githubPage

部署vuepress项目到githubPage 1. 项目文件夹下有两个分支&#xff08;main和gh-page&#xff09; 1.1 main分支存放项目代码 1.2 gh-page分支存放 npm run docs:build之后的dist里面的所有文件 2. 分别提交到github上 3. 你的项目/docs/.vuepress/config.js module.export…

3.1每日一题(定积分求压力问题)

公式&#xff1a; (1) 压力等于压强乘以面积 (2) 压强等于ρgh(即密度&#xff0c;重力加速度&#xff0c;水的深度) 注&#xff1a;题目表面不一样&#xff0c;实际的原理都一样&#xff0c;做透一道题等于做懂一类题

FLinkCDC

序言 CDC 是 Change Data Capture&#xff08;变更数据获取&#xff09;的简称。核心思想是&#xff0c;监测并捕获数据库的变动&#xff08;包括数据或数据表的插入、更新以及删除等&#xff09;&#xff0c;将这些变更按发生的顺序完整记录下来&#xff0c;写入到消息中间件中…

论文阅读——InstructGPT

论文&#xff1a;Training_language_models_to_follow_instructions_with_human_feedback.pdf (openai.com) github&#xff1a;GitHub - openai/following-instructions-human-feedback 将语言模型做得更大并不能从本质上使它们更好地遵循用户的意图。例如&#xff0c;大型语…

光学仿真|优化汽车内部照明体验

当我们谈论优化人类感知的内部照明时&#xff0c;我们实际上指的是两个重点领域&#xff1a;安全性和驾驶员体验。如果内部照明可以提供尽可能最佳的体验&#xff0c;驾驶员则能够更好地应对颇具挑战性或意外的驾驶状况&#xff0c;并且减轻疲劳感。除了功能优势外&#xff0c;…