做电音的软件的专业下载网站天津建设发展总公司网站

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

做电音的软件的专业下载网站,天津建设发展总公司网站,wordpress重置主题设置,贵州省建设厅官方网站官网一.左侧菜单数据绑定 1.首先#xff0c;进行项目结构塔建。按照Prism 框架约定#xff0c;要使用自动查找绑定功能。即View #xff08;视图#xff09;中自动查找并绑定到对应的ViewModel#xff08;视图模型#xff0c;处理视图业务逻辑#xff09;。就需要在项目中按…一.左侧菜单数据绑定 1.首先进行项目结构塔建。按照Prism 框架约定要使用自动查找绑定功能。即View 视图中自动查找并绑定到对应的ViewModel视图模型处理视图业务逻辑。就需要在项目中按约定创建的视图后缀必须以 View 结尾和视图模型后缀必须以 ViewModel 结尾。 例如 xxxView.xaml和xxx.ViewModel.cs Models 文件夹存放实体类并且实体类要继承自Prism 框架的 BindableBase目的是让实体类支持数据的动态变更 例如: 系统导航菜单实体类(MenuBar) ///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; }}}Views 文件夹用于存放视图。例如首页视图 MainView.xamlViewModels 文件夹用于存放对应视图的业务逻辑处理类例如首页视图模型类 MainViewModel(处理业务逻辑) Prism 框架中一些视图或类的定义都是有约定的。例如视图统一使用xxxView 结尾。视图模形统一使用xxxViewModel 结尾。这样做的原因是第一规范第二方便使用 Prism 进行动态的方式绑定上下文的时候能自动找到对应类。如何让 Prism 支持自动绑定上下文自动查找View绑定到对应ViewModel。 需要在xxx.xaml视图中引入Prism 命名空间 xmlns:prismhttp://prismlibrary.com/然后 再通过 prism 名称 设置ViewModelLocator 中的 AutoWireViewModel 成 True。这样就完成了自动绑定功能 prism:ViewModelLocator.AutoWireViewModelTrue2.在ViewModels文件夹中创建MainViewModel 逻辑处理类 创建左侧菜单的数据需要使用到一个动态的属性集合 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 主要用于设置导航的视图名称Title 显示的标题Icon 设备 Material DesignThemes UI 框架里面的图标名称 3.MainView.xaml 前端进行菜单绑定数据 ListBox列表数据的绑定。需要使用ListBox 的自定义模板也就是 ListBox.ItemTemplate并且写法是固定的。 模板使用示例如下 !–列表– ListBoxListBox.ItemTemplateDataTemplate!–在这里添加内容数据–/DataTemplate/ListBox.ItemTemplate /ListBox在MainView.xaml 中使用示例。通过在MainViewModel定义的MenuBars 菜单数据集合在ListBox中通过 ItemsSource 绑定MenuBars 进行渲染出数据列表。 !–列表– 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 中需要添加AutoWireViewModel“True”让其动态绑定数据上下文 xmlns:prismhttp://prismlibrary.com/ prism:ViewModelLocator.AutoWireViewModelTrue注意项目中的MainWindow.xaml 已经改成了MainView.xaml并且把启动页设置成 MainView了 最终项目结构 2.左侧菜单样式调整 在App.xaml 资源文件中更改默认的主题颜色为黑色 自定义左侧列表选中的样式 需要重写自定义样式 在App.xaml 文件中 资源字典 ResourceDictionary 节点中设置Style 属性并且在Style节点里面来进行样式重写 Style 使用方式 TargetType 设置作用的目标类型Setter 设计器里面有2个常用属性分别是Property 和Value。用来改变设置作用的目标类型一些属性的值key: 通过指定的key 来使用重写的样式 示例3设置ListBoxItem 属性中的最小行高为40 Style TargetTypeListBoxItemSetter PropertyMinHeight Value40/ /StyleProperty 中有一个特别的属性Template。用于改变控件的外观样式。并且也有固定的写法 示例4 Setter PropertyTemplateSetter.ValueControlTemplate TargetType{x:Type ListBoxItem}/ControlTemplate/Setter.Value /SetterTargetType 有2种写法 一种是直接用Style 设置一些属性可以这样写 TargetType“ListBoxItem”。示例3另外一种写法是当需要使用到自定义模板也就是要改变控件的外观样式时Property 设置的值为 Template里面TargetType 写法就变成这样 TargetType“{x:Type ListBoxItem}”。示例4使用自定义的模板时需要使用到一个属性 ContentPresenter把原有模板的属性原封不动的投放到自定义模板。触发器它按条件应用属性值或执行操作。并且使用Template 自定义控件样式后需要搭配触发器进行使用。 App.xaml 中修改左侧菜单选中自定义模板示例 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样式写完后如果需要在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 /Window 2.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 上一章 设计首页导航条下一章 左侧菜单导航