深圳建设工程交易服务网老网站,提交网站收录,wordpress自定义菜单设置,网站建设与管理简单么一.实现左侧菜单绑定
效果图: 1.首先需要在项目中创建 mvvm 的架构模式 创建 Models #xff0c;放置实体类。 实体类需要继承自Prism 框架的 BindableBase#xff0c;目的是让实体类支持数据的动态变更! 例如: 系统导航菜单实体类
/ summary/// 系统导航菜单实体类… 一.实现左侧菜单绑定
效果图: 1.首先需要在项目中创建 mvvm 的架构模式 创建 Models 放置实体类。 实体类需要继承自Prism 框架的 BindableBase目的是让实体类支持数据的动态变更! 例如: 系统导航菜单实体类
/ summary/// 系统导航菜单实体类/// /summary
public class MenuBar:BindableBase{private string icon;/// summary/// 菜单图标/// /summarypublic string Icon{
get { return icon; }
set { icon value; }}private string title;/// summary/// 菜单名称/// /summarypublic string Title{
get { return title; }
set { title value; }}private string nameSpace;/// summary/// 菜单命名空间/// /summarypublic string NameSpace{
get { return nameSpace; }
set { nameSpace value; }}} 创建View文件夹 放置前端显示页面 。例如创建首页MainView.xaml创建ViewModel 文件夹放置前端逻辑处理类。意思是:有前端页面同时也要有对应的后台业务逻辑处理类。例如MainViewModel 使用了Prism 框架一些视图或类的定义都是有约定的。例如视图统一使用xxxView 结尾。视图模形统一使用xxxViewModel 结尾。这样做的原因是第一规范第二方便使用 Prism 进行动态的方式绑定上下文的时候能自动找到对应类。Prism 动态上下文绑定方式引入命名空间把 AutoWireViewModel 设置成 True xmlns:prismhttp://prismlibrary.com/prism:ViewModelLocator.AutoWireViewModelTrue 2.创建MainViewModel 逻辑处理类 MainViewModel 类同样也需要继承自Prism 框架的 BindableBase 创建左侧菜单的数据需要使用到一个动态的属性集合 ObservableCollection 来存放菜单的数据 创建菜单数据 public class MainViewModel: BindableBase{public MainViewModel(){MenuBarsnew ObservableCollectionMenuBar();CreateMenuBar();}private ObservableCollectionMenuBar menuBars;public ObservableCollectionMenuBar MenuBars{get { return menuBars; }set { menuBars value; RaisePropertyChanged(); }}void CreateMenuBar(){MenuBars.Add(new MenuBar() { IconHome,Title首页,NameSpaceIndexView});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并且写法是固定的
!--列表--
ListBoxListBox.ItemTemplateDataTemplate!--在这里添加内容数据--/DataTemplate/ListBox.ItemTemplate
/ListBox
例如结合上面创建MainViewModel 类给MainView.xaml 渲染数据
!--列表--
ListBox ItemsSource{Binding MenuBars}ListBox.ItemTemplateDataTemplateStackPanel OrientationHorizontalmaterialDesign:PackIcon Kind{Binding Icon} Margin15,0 /TextBlock Text{Binding Title} Margin10,0//StackPanel/DataTemplate/ListBox.ItemTemplate
/ListBox MainView.xaml 添加动态绑定 上下文
xmlns:prismhttp://prismlibrary.com/
prism:ViewModelLocator.AutoWireViewModelTrue 注意项目中的MainWindow.xaml 已经改成了MainView.xaml并且把启动页设置成 MainView了 最终项目结构 4.左侧菜单样式调整
在App.xaml 资源文件中更改默认的主题颜色 更改左侧列表选择的样式 重写自定义样式 在App.xaml 文件中 资源字典 ResourceDictionary 节点中设置Style 属性来进行样式重写 Style 使用方式 TargetType 设置作用的目标类型 Setter 设计器里面有2个常用属性分别是Property 和Value。用来改变设置作用的目标类型一些属性的值key: 通过指定的key 来使用重写的样式
例如设置ListBoxItem 属性中的最小行高为40
Style TargetTypeListBoxItemSetter PropertyMinHeight Value40/
/Style 3. Property 中有一个特别的属性Template。用于改变控件的外观样式。并且也有固定的写法
Setter PropertyTemplateSetter.ValueControlTemplate TargetType{x:Type ListBoxItem}/ControlTemplate/Setter.Value
/Setter TargetType 有2种写法 一种是直接用Style 设置一些属性可以这样写 TargetTypeListBoxItem另外一种写法是当需要使用到自定义模板也就是要改变控件的外观样式时Property 设置的值为 Template里面TargetType 写法就变成这样 TargetType{x:Type ListBoxItem}使用自定义的模板时需要使用到一个属性 ContentPresenter把原有模板的属性原封不动的投放到自定义模板。 4. 触发器它按条件应用属性值或执行操作 如果使用Template 自定义控件样式后需要搭配触发器进行使用。 例如 ControlTemplate TargetType{x:Type ListBoxItem}Grid!--内容最左侧的样式--Border x:NameborderHeader/!--内容选中的样式--Border x:Nameborder/!--内容呈现,使用自定义模板时不加该属性原先的内容无法呈现--ContentPresenter HorizontalAlignment{TemplateBinding HorizontalAlignment}VerticalAlignment{TemplateBinding VerticalContentAlignment}//Grid!--触发器--ControlTemplate.Triggers!--如果是选中状态--Trigger PropertyIsSelected ValueTrue!--第一个Border 设置边框样式--Setter PropertyBorderThickness TargetNameborderHeader Value4,0,0,0/!--第一个Border 设置边框颜色value 动态绑定主要是为了适应主题颜色更改时边框也着变--Setter PropertyBorderBrush TargetNameborderHeader Value{DynamicResource PrimaryHueLightBrush}/!--第二个border 设置选中的样式--Setter PropertyBackground TargetNameborder Value{DynamicResource PrimaryHueLightBrush}/!--第二个border 设置选中的透明度--Setter PropertyOpacity TargetNameborder Value0.2//Trigger!--鼠标悬停触发器,如果鼠标悬停时--Trigger PropertyIsMouseOver ValueTrue!--第二个border 设置选中的样式--Setter PropertyBackground TargetNameborder Value{DynamicResource PrimaryHueLightBrush}/!--第二个border 设置选中的透明度--Setter PropertyOpacity TargetNameborder Value0.2//Trigger/ControlTemplate.Triggers
/ControlTemplate 5. 样式写完后需要在MainView.xmal 的ListBox中使用这个样式资源文件通过指定Key 来使用。 二.源码
1.MainView.xaml
Window x:ClassMyToDo.Views.MainViewxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:MyToDoxmlns:prismhttp://prismlibrary.com/prism:ViewModelLocator.AutoWireViewModelTrueWindowStyleNone WindowStartupLocationCenterScreen AllowsTransparencyTrueStyle{StaticResource MaterialDesignWindow}TextElement.Foreground{DynamicResource MaterialDesignBody}Background{DynamicResource MaterialDesignPaper}TextElement.FontWeightMediumTextElement.FontSize14FontFamily{materialDesign:MaterialDesignFont}mc:Ignorabledxmlns:materialDesignhttp://materialdesigninxaml.net/winfx/xaml/themesTitleMainWindow Height768 Width1280materialDesign:DialogHost DialogThemeInheritIdentifierRootDialogSnackbarMessageQueue{Binding ElementNameMainSnackbar, PathMessageQueue}materialDesign:DrawerHost IsLeftDrawerOpen{Binding ElementNameMenuToggleButton, PathIsChecked}!--左边菜单--materialDesign:DrawerHost.LeftDrawerContentDockPanel MinWidth220 !--头像--StackPanel DockPanel.DockTop Margin0,20Image Source/Images/user.jpg Width50 Height50Image.ClipEllipseGeometry Center25,25 RadiusX25 RadiusY25 //Image.Clip/ImageTextBlock TextWPF gg Margin0,10 HorizontalAlignmentCenter //StackPanel!--列表--ListBox ItemContainerStyle{StaticResource MyListBoxItemStyle} ItemsSource{Binding MenuBars}ListBox.ItemTemplateDataTemplateStackPanel OrientationHorizontal BackgroundTransparentmaterialDesign:PackIcon Kind{Binding Icon} Margin15,0 /TextBlock Text{Binding Title} Margin10,0//StackPanel/DataTemplate/ListBox.ItemTemplate/ListBox/DockPanel/materialDesign:DrawerHost.LeftDrawerContentDockPanel !--导航条色块--materialDesign:ColorZone Padding16 x:NameColorZonematerialDesign:ElevationAssist.ElevationDp4DockPanel.DockTopModePrimaryMidDockPanel LastChildFillFalse!--上左边内容--StackPanel OrientationHorizontalToggleButton x:NameMenuToggleButtonAutomationProperties.NameHamburgerToggleButtonIsCheckedFalseStyle{StaticResource MaterialDesignHamburgerToggleButton} /Button Margin24,0,0,0materialDesign:RippleAssist.Feedback{Binding RelativeSource{RelativeSource Self}, PathForeground, Converter{StaticResource BrushRoundConverter}}Command{Binding MovePrevCommand}Content{materialDesign:PackIcon KindArrowLeft,Size24}Foreground{Binding RelativeSource{RelativeSource AncestorType{x:Type FrameworkElement}}, Path(TextElement.Foreground)}Style{StaticResource MaterialDesignToolButton}ToolTipPrevious Item /Button Margin16,0,0,0materialDesign:RippleAssist.Feedback{Binding RelativeSource{RelativeSource Self}, PathForeground, Converter{StaticResource BrushRoundConverter}}Command{Binding MoveNextCommand}Content{materialDesign:PackIcon KindArrowRight,Size24}Foreground{Binding RelativeSource{RelativeSource AncestorType{x:Type FrameworkElement}}, Path(TextElement.Foreground)}Style{StaticResource MaterialDesignToolButton}ToolTipNext Item /TextBlock Margin16,0,0,0HorizontalAlignmentCenterVerticalAlignmentCenterAutomationProperties.NameMaterial Design In XAML ToolkitFontSize22Text笔记本 //StackPanel!--上右边图标--StackPanel DockPanel.DockRight OrientationHorizontalImage Source/Images/user.jpg Width25 Height25Image.ClipEllipseGeometry Center12.5,12.5 RadiusX12.5 RadiusY12.5 //Image.Clip/ImageButton x:NamebtnMin Style{StaticResource MaterialDesignFlatMidBgButton}materialDesign:PackIcon KindMoveResizeVariant //ButtonButton x:NamebtnMax Style{StaticResource MaterialDesignFlatMidBgButton}materialDesign:PackIcon KindCardMultipleOutline //ButtonButton x:NamebtnClose Style{StaticResource MaterialDesignFlatMidBgButton} CursorHandmaterialDesign:PackIcon KindWindowClose //Button/StackPanel/DockPanel/materialDesign:ColorZone/DockPanel/materialDesign:DrawerHost/materialDesign:DialogHost
/Window2.MainViewModel
namespace MyToDo.ViewModels
{public class MainViewModel: BindableBase{public MainViewModel(){MenuBarsnew ObservableCollectionMenuBar();CreateMenuBar();}private ObservableCollectionMenuBar menuBars;public ObservableCollectionMenuBar MenuBars{get { return menuBars; }set { menuBars value; RaisePropertyChanged(); }}void CreateMenuBar(){MenuBars.Add(new MenuBar() { IconHome,Title首页,NameSpaceIndexView});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:ClassMyToDo.Appxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:localclr-namespace:MyToDoxmlns:materialDesignhttp://materialdesigninxaml.net/winfx/xaml/themesxmlns:prismhttp://prismlibrary.com/Application.ResourcesResourceDictionaryResourceDictionary.MergedDictionariesmaterialDesign:BundledTheme BaseThemeDark PrimaryColorDeepPurple SecondaryColorLime /ResourceDictionary Sourcepack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml //ResourceDictionary.MergedDictionariesStyle x:KeyMyListBoxItemStyle TargetTypeListBoxItemSetter PropertyMinHeight Value40/Setter PropertyTemplateSetter.ValueControlTemplate TargetType{x:Type ListBoxItem}Grid!--内容最左侧的样式--Border x:NameborderHeader/!--内容选中的样式--Border x:Nameborder/!--内容呈现,使用自定义模板时不加该属性原先的内容无法呈现--ContentPresenter HorizontalAlignment{TemplateBinding HorizontalAlignment}VerticalAlignment{TemplateBinding VerticalContentAlignment}//Grid!--触发器--ControlTemplate.Triggers!--如果是选中状态--Trigger PropertyIsSelected ValueTrue!--第一个Border 设置边框样式--Setter PropertyBorderThickness TargetNameborderHeader Value4,0,0,0/!--第一个Border 设置边框颜色value 动态绑定主要是为了适应主题颜色更改时边框也着变--Setter PropertyBorderBrush TargetNameborderHeader Value{DynamicResource PrimaryHueLightBrush}/!--第二个border 设置选中的样式--Setter PropertyBackground TargetNameborder Value{DynamicResource PrimaryHueLightBrush}/!--第二个border 设置选中的透明度--Setter PropertyOpacity TargetNameborder Value0.2//Trigger!--鼠标悬停触发器,如果鼠标悬停时--Trigger PropertyIsMouseOver ValueTrue!--第二个border 设置选中的样式--Setter PropertyBackground TargetNameborder Value{DynamicResource PrimaryHueLightBrush}/!--第二个border 设置选中的透明度--Setter PropertyOpacity TargetNameborder Value0.2//Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter/Style/ResourceDictionary/Application.Resources
/prism:PrismApplication
