网站建设时 网站信息可以边建设边组织,国家企业注册信息网,辽宁千山科技做网站怎么样,通州北苑网站建设一.设计首页导航条 导航条的样式#xff0c;主要是从Material DesignThemes UI 拷贝过来修改的,项目用了这个UI组件库#xff0c;就看自己需要什么#xff0c;就去拷过来使用#xff0c;界面布局或其他组件使用#xff0c;不做介绍。 直接下载源码#xff0c;编译运行就可…一.设计首页导航条 导航条的样式主要是从Material DesignThemes UI 拷贝过来修改的,项目用了这个UI组件库就看自己需要什么就去拷过来使用界面布局或其他组件使用不做介绍。 直接下载源码编译运行就可以看到Demo 了 反正我下载完且编译后是能正常跑起来没有办法跑起来的找找自己的问题是不是工作不努力了。接下来是要把圈红色那块拷出来做为主界面的导航条 1.最终导航栏效果图 2. MainWindow.xaml 源码
Window x:ClassMyToDo.MainWindowxmlnshttp://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:MyToDoWindowStyleNone 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/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
/Window3.MainWindow.xaml.cs 源码
namespace MyToDo
{/// summary/// Interaction logic for MainWindow.xaml/// /summarypublic 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:materialDesignhttp://materialdesigninxaml.net/winfx/xaml/themes MainWindow 窗口设置以下几个属性 隐藏原窗口的边框 WindowStyleNone主窗口启动时居中 WindowStartupLocationCenterScreen 设置窗口属性为透明用于隐藏窗口出现白边 AllowsTransparencyTrue DockPanel 属性用的到列一下说明而已 取消最后一个元素填充LastChildFillFalse 往右停靠DockPanel.DockRight Material DesignThemes UI 样式用来隐藏原生按钮边框 Style{StaticResource MaterialDesignFlatMidBgButton} 未隐藏前后对比 图标可以使用UI 框架提供的 Image 属性用来放置头像并且使用裁剪属性使头像变成圆角 Image.Clip 剪裁绝对定位元素EllipseGeometry 用来绘制一个椭圆或者圆形的图形RadiusX X轴半径RadiusY Y轴半径 例如
Image Source/Images/user.jpg Width25 Height25Image.ClipEllipseGeometry Center12.5,12.5 RadiusX12.5 RadiusY12.5 //Image.Clip
/Image
效果 对上面我的理解就是使用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个例如像下面这样写法每个按钮一个事件代码就有点多且不好看。 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;//否则就变成正常的形态}
}; ColorZonebtnMinbtnMaxbtnClose 都是前端xaml 页面定义的名称! 仅供自己学习记录不做任何教程提供不喜欢也请别喷我。这个是从b 站看视频学习wpf就想记录一下。写的水平有限也并不是写出来误导别人毕竟你有没有基础我不知道反正我看的懂就ok方便我以后用的上时可以回来翻下笔记。仅此而已!!!
