手机客户端网站怎么做,eclipse 开发jsp网站开发,网站建设合同范本下载,简述网站建设的标准跟着B站的视频敲了一个略微复杂的WPF界面,链接如下.在这里我详细的写一份博客进行设计总结. 系统介绍和配置及主窗口设计_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Wy421Y7QD?p1vd_source4796b18a2e4c1ec8a310391a5644b6da 成果展示 实现过程 总体来说,我的…        跟着B站的视频敲了一个略微复杂的WPF界面,链接如下.在这里我详细的写一份博客进行设计总结. 系统介绍和配置及主窗口设计_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Wy421Y7QD?p1vd_source4796b18a2e4c1ec8a310391a5644b6da 成果展示  实现过程 总体来说,我的理解都是设计框架,再具体的画里面的布局. 界面整体背景设计 我们不需要窗口自带的边框,所以需要隐藏,这里调用设计WindowChrome中的GlassFrameThickness 为0或者负数即可. WindowChrome.WindowChrome!--隐藏边框--WindowChrome GlassFrameThickness0/WindowChrome/WindowChrome.WindowChrome 界面整体颜色为渐变色,进行设计,渐变色使用画刷,这里介绍两种画刷,两种画刷的写法一致,只是颜色的方向有所差别,都是使用offset表示与开始点的距离 1.LinearGradientBrush,这种画刷是由左上角向右下. 2.RadialGradientBrush,这种画刷是有中心向外面渐变(此项目使用这种) !--设计背景颜色渐变--Grid.BackgroundRadialGradientBrushGradientStop Color#ff285173 Offset0/GradientStopGradientStop Color#ff244967 Offset0.5/GradientStopGradientStop Color#13164B Offset1/GradientStop/RadialGradientBrush/Grid.Background 运行结果: 首页设计 首页分为三行进行设计,标题为第一行,中间的内容为第二行,底部为第三行. 代码先分出三行:类似于代码中Height之类的属性,可以自己试着调,让界面看起来美观即可 !--主界面分三行--Grid.RowDefinitionsRowDefinition Height50/RowDefinitionRowDefinition Heightauto/RowDefinitionRowDefinition Height25/RowDefinition/Grid.RowDefinitions 第一行: 第一行下面的分割线颜色设计为#5518aabd,整体分为3列,第三列再分为两行进行设计. 第一列最左边为一个图标,直接将文件中的Image拖入即可 !--图标--Image Source/Res/Img/Logo.png Margin10,7 / 第二列放置一个垂直吧方向的堆面板,再用TextBlock放置文字 !--文字--StackPanel OrientationVertical Grid.Column1TextBlock Text生产监控平台 ForegroundWhite FontSize16 VerticalAlignmentCenter Margin0,5,0,0/TextBlockTextBlock Text阻碍你前行的,其实就是你自己! ForegroundWhite FontSize12 Margin0,3,0,0 /TextBlock/StackPanel 第三列整体分为两行,第一行使用对面板放置三个按钮,第二行画纹路.,下面代码中的最小化和关闭按钮我与视频中的处理方法不一样,我这里是直接设计了一个点击事件,在此界面对应的代码中直接对窗口进行控制. !--右侧按钮和下面的图案--Grid Grid.Column2!--分为两行--Grid.RowDefinitionsRowDefinition/RowDefinitionRowDefinition Height15/RowDefinition/Grid.RowDefinitions!--三个图标--!--WindowChrome.IsHitTestVisibleInChromeTrue 一定要加,否则自定义的不会显示--StackPanel OrientationHorizontal HorizontalAlignmentRight BackgroundTransparent WindowChrome.IsHitTestVisibleInChromeTrueButton Style{StaticResource MinClose_BtnStyle} Content#xe624; ClickButton_Click_Min/ButtonButton Style{StaticResource MinClose_BtnStyle} Content#xe600;/ButtonButton Style{StaticResource MinClose_BtnStyle} Content#xe609; BackgroundDarkRed ClickButton_Click_Close/Button/StackPanel!--图案--Border Grid.Row1 BorderBrush#5518aabd BorderThickness0,1,0,0 Border.BackgroundVisualBrush TileModeFlipXY Viewport0,0,7,7 ViewportUnitsAbsoluteVisualBrush.VisualLine X10 Y110 X210 Y20 StrokeGray StrokeThickness1/Line/VisualBrush.Visual/VisualBrush/Border.Background/Border/Grid 其中,设计三个图标时引入了一个自定义的资源字典,因为不止这里会用到,故定义的全局变量. !--关闭\最小化按钮字典--Style TargetTypeButton x:KeyMinClose_BtnStyleSetter PropertyWidth Value40/SetterSetter PropertyBackground Value#11ffffff/SetterSetter PropertyForeground ValueWhite/SetterSetter PropertyFontFamily Value../Res/Fonts/#iconfont/Setter!--模板--Setter PropertyTemplateSetter.ValueControlTemplate TargetTypeButton!--grid的背景就是按钮的背景--Grid Background{TemplateBinding Background}Border x:Nameborder!--用于显示控件的内容--ContentPresenter HorizontalAlignmentCenter VerticalAlignmentCenter/ContentPresenter/Border/Grid!--触发器--ControlTemplate.TriggersTrigger PropertyIsMouseOver ValueTrueSetter TargetNameborder PropertyBackground Value#33ffffff/Setter/Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter/Style 这里字典中的FontFamily是再阿里巴巴资源图标库下载的后缀为.ttf的文件,content设置为里面的代码即可显示对应的图标  然后需要设计 WindowChrome.IsHitTestVisibleInChromeTrue 最后的图案是再boder中使用画笔画出 运行的结果 第三行 第三行是底部,比较简单和第一行类似,因此我们先进行设计. 底部分为两列,第一列绘制图案,第二列是相关文字 运行的结果 第二行 第二行内容很多,我们自定义一个用户控件放入. 首先要做的就是定义一个用户控件嵌入到主窗口之中,这里先新定义一个用户控件文件,再创建一个ViewModel层的文件,在里面将二者绑定起来 public event PropertyChangedEventHandler PropertyChanged;#region 中间那个 用户控件private UserControl _MonitorUC;public UserControl MonitorUC{get { if(_MonitorUC null){_MonitorUC new MonitorUC(); }return _MonitorUC;}set {_MonitorUC value;if (PropertyChanged ! null){PropertyChanged(this, new PropertyChangedEventArgs(MonitorUC));}}} 然后在主界面的 代码下实例化viewModel,设置数据上下文 //实例化MainWindowVM mainWindowVM new MainWindowVM();public MainWindow(){InitializeComponent();//设置数据上下文this.DataContext mainWindowVM;} 最后主界面一定要嵌入此用户控件,嵌入使用ContentControl ContentControl Grid.Row1 Content{Binding MonitorUC}/ContentControl 运行结果: 接着对第二行内部(自定义用户控件)进行设计,分为三行: 第二行内部的第一行分为两列,左边的日期为一列,右边剩下的为一列 左边第一列日期用一个水平方向的对面板里面放置一个TextBlock和一个垂直方向的堆面板,时间和日期视频里面是静态的,我这里进行动态获取,可参考这篇专栏里面的另一篇实时时间显示. 右边分为左右两部分,用靠左和靠右实现即可,左边使用水平方向的堆面板进行排列,文字换行使用WPF里面的换行符,中间有背景的字是再border里面嵌套了一个TextBlock,之后使用ItemsControl控件循环获取显示数据. !--资源--StackPanel.Resources!--动态数据模板--DataTemplate x:KeymachineCount!--将当前数据项通常是一个对象的默认属性值绑定到 TextBlock 的 Text 属性上--Border Width15 Background#3318aabd Margin2,0TextBlock Text{Binding} VerticalAlignmentCenter HorizontalAlignmentCenter ForegroundWhite FontSize16/TextBlock/Border/DataTemplate/StackPanel.Resources 右边的按钮也是进行了一个资源编写.这里需要注意的是属性绑定,定义的目标对象是按钮,我们要放文字和一个图标进去,文字可以直接绑定按钮的Content属性,这里的图标绑定的是按钮的Tag属性,Tag在原按钮中什么也不代表,类似于官方预留的留给我们自定义的接口. Style TargetTypeButton x:KeySetting_BtnStyleSetter PropertyForeground Value#aaa/Setter!--模板设置触发器\渐变色--Setter PropertyTemplateSetter.ValueControlTemplate TargetTypeButtonBorder BackgroundTransparent BorderThickness1 x:Nameborder!--渐变色--Border.BorderBrushLinearGradientBrush StartPoint0,0 EndPoint1,0GradientStop Color#22ffffff Offset0/GradientStopGradientStop Color#77ffffff Offset0.5/GradientStopGradientStop Color#22ffffff Offset1/GradientStop/LinearGradientBrush/Border.BorderBrush!--里面放置一个图标 一个文字 Tag类似自定义属性 Content就是对应按钮的Content--StackPanel OrientationHorizontal HorizontalAlignmentCenter VerticalAlignmentCenterTextBlock Text{TemplateBinding Tag} FontFamily../Res/Fonts/#iconfont Margin0,2,5,0/TextBlockTextBlock Text{TemplateBinding Content} VerticalAlignmentCenter/TextBlock/StackPanel/Border!--触发器 放入按钮变颜色--ControlTemplate.TriggersTrigger PropertyIsMouseOver ValueTrueSetter TargetNameborder PropertyBackground Value#11ffffff/Setter/Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter/Style 运行结果: 第二行的中间部分也是分为3列,三列里面每一列再分为三行,当然也已使用UniformGrid,因为每部分的大小一致 这里我们注意到GroupBox 几乎在每个部分都出现了,所以我们可以先把他画出来. 这里我们使用了Polyline画线,Ellipse画圆(点就是半径很小的圆),Path画路径,Polygon 画多边形. ContentPresenter/ContentPresenter 一定要加这句,才能显示重新定义的标题 UserControl.ResourcesStyle TargetTypeGroupBoxSetter PropertyMargin Value10,3/SetterSetter PropertyTemplateSetter.ValueControlTemplate TargetTypeGroupBoxGrid!--左上角的线条--Polyline Points0 30,0 10,10 0,30 0 Stroke#9918aabd StrokeThickness1 VerticalAlignmentTop HorizontalAlignmentLeft/Polyline!--左上 横的点 小圆--Ellipse Width4 Height4 HorizontalAlignmentLeft Fill#9918aabd VerticalAlignmentTop Margin24,-2,0,0/Ellipse!--左侧的点 小圆--Ellipse Width4 Height4 HorizontalAlignmentLeft Fill#9918aabd VerticalAlignmentTop Margin-2,24,0,0/Ellipse!--Moveto--Path DataM0 0,3 3,30 3,33 0,68 0,73 7,78 7,78,10M8 0,25 0 Stroke#9918aabd VerticalAlignmentTop HorizontalAlignmentRight/Path!--左下角的线条--Polyline Points0 0,0 15,10 15 Stroke#9918aabd StrokeThickness1 VerticalAlignmentBottom HorizontalAlignmentLeft/Polyline!--右下角的线--Polyline Points10 0,0,10 Stroke#9918aabd StrokeThickness1 HorizontalAlignmentRight VerticalAlignmentBottom/Polyline!--右下角的三角形--Polygon Points0 7,7 7,7 0 Fill#9918aabd HorizontalAlignmentRight VerticalAlignmentBottom/Polygon!--上面的线--Border BorderThickness0,1,0,0 BorderBrush#9918aabd VerticalAlignmenttop Margin30,-0.5,78,0/Border!--右边的线--Border BorderThickness0,0,1,0 BorderBrush#9918aabd HorizontalAlignmentRight Margin0,10/Border!--下面的线--Border BorderThickness0,0,0,1 BorderBrush#9918aabd VerticalAlignmentBottom Margin10,0/Border!--左边的线--Border BorderThickness1,0,0,0 BorderBrush#9918aabd HorizontalAlignmentLeft Margin-0.5,15/Border!--文字前的装饰--Path DataM0 0,3 0,5 4,3 8,0 8,3 4 Fill#9918aabd Margin10,13/PathPath DataM0 0,3 0,5 4,3 8,0 8,3 4 Fill#5518aabd Margin16,13/PathTextBlock Text{TemplateBinding Header} ForegroundWhite FontWeightBold Margin25,8 HorizontalAlignmentLeft VerticalAlignmentTop/TextBlock!--显示内容--ContentPresenter/ContentPresenter/Grid/ControlTemplate/Setter.Value/Setter/Style/UserControl.Resources 运行结果: 然后进行里面具体内容的绘制,这一部分要创建一个Nodels层来管理数据,里面绘制的柱状图等需要使用到LiveCharts的插件. 柱状图 !--定义X数据--lvc:CartesianChart Margin20,35,20,5lvc:CartesianChart.AxisXlvc:Axis Labels8:00,9:00,10:00,11:00,12:00,13:00,14:00,15:00,16:00lvc:Axis.Separatorlvc:Separator Step1 StrokeThickness0/lvc:Separator/lvc:Axis.Separator/lvc:Axis/lvc:CartesianChart.AxisX!--定义Y的数据--lvc:CartesianChart.Serieslvc:ColumnSeries Values300,400,480,450,380,450,450,330,340 Title生产计数 MaxColumnWidth10!--渐变色--lvc:ColumnSeries.FillLinearGradientBrush StartPoint0,0 EndPoint0,1GradientStop Color#ff3fbbe6 Offset0/GradientStopGradientStop Color#ff2bedf1 Offset1/GradientStop/LinearGradientBrush/lvc:ColumnSeries.Fill/lvc:ColumnSerieslvc:ColumnSeries Values15,55,15,40,38,45,56,42,24 Title不良计数 MaxColumnWidth10!--渐变色--lvc:ColumnSeries.FillLinearGradientBrush StartPoint0,0 EndPoint0,1GradientStop Color#fffb9a9a Offset0/GradientStopGradientStop Color#ffff5151 Offset1/GradientStop/LinearGradientBrush/lvc:ColumnSeries.Fill/lvc:ColumnSeries/lvc:CartesianChart.Series!--Y数据刻度--lvc:CartesianChart.AxisYlvc:Axis MinValue0 MaxValue500 lvc:Axis.Separatorlvc:Separator Step100 Stroke#11ffffff/lvc:Separator/lvc:Axis.Separator/lvc:Axis/lvc:CartesianChart.AxisY/lvc:CartesianChart 饼形图 !--饼形图--!--定义数据标签样式--lvc:PieChart InnerRadius45 Margin0,40,0,20lvc:PieChart.ResourcesStyle TargetTypelvc:PieSeriesSetter PropertyDataLabelsTemplateSetter.ValueDataTemplateStackPanel OrientationHorizontalTextBlock Text{Binding Point.SeriesView.Title} Margin0,0,5,0 Foreground#44ffffff/TextBlockTextBlock Text{Binding Point.SeriesView.Values[0]} Foreground#44ffffff/TextBlock/StackPanel/DataTemplate/Setter.Value/Setter/Style/lvc:PieChart.Resources!--定义饼形图数据--lvc:PieChart.Serieslvc:PieSeries Values20 Title压差 StrokeThickness0 DataLabelsTrue LabelPositionOutsideSlice/lvc:PieSerieslvc:PieSeries Values40 Title振动 StrokeThickness0 DataLabelsTrue LabelPositionOutsideSlice/lvc:PieSerieslvc:PieSeries Values10 Title设备温度 StrokeThickness0 DataLabelsTrue LabelPositionOutsideSlice/lvc:PieSerieslvc:PieSeries Values30 Title光照 StrokeThickness0 DataLabelsTrue LabelPositionOutsideSlice/lvc:PieSeries/lvc:PieChart.Series/lvc:PieChart 雷达:在界面中定义名字,在后台进行绘制 !--画布--Canvas x:NamemainCanvas/Canvas!--4规则多边形--Polygon x:NameP1 Stroke#22ffffff StrokeThickness1/PolygonPolygon x:NameP2 Stroke#22ffffff StrokeThickness1/PolygonPolygon x:NameP3 Stroke#22ffffff StrokeThickness1/PolygonPolygon x:NameP4 Stroke#22ffffff StrokeThickness1/Polygon!--数据多边形--Polygon x:NameP5 StrokeOrange Fill#550091F0 StrokeThickness1 /Polygon /// summary/// RaderUC.xaml 的交互逻辑/// /summarypublic partial class RaderUC : UserControl{public RaderUC(){InitializeComponent();SizeChanged OnSizeChanged;//AltEnter}/// summary/// 窗体大小发生变化 重新画图/// /summary/// param namesender/param/// param namee/paramprivate void OnSizeChanged(object sender, SizeChangedEventArgs e){Drag();}/// summary/// 数据源。支持数据绑定 依赖属性/// /summarypublic ListRaderModel ItemSource{get { return (ListRaderModel)GetValue(ItemSourceProperty); }set { SetValue(ItemSourceProperty, value); }}// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...public static readonly DependencyProperty ItemSourceProperty DependencyProperty.Register(ItemSource, typeof(ListRaderModel), typeof(RaderUC));/// summary/// 画图方法/// /summarypublic void Drag(){//判断是否有数据if (ItemSource null || ItemSource.Count 0){return;}//清楚之前画的mainCanvas.Children.Clear();P1.Points.Clear();P2.Points.Clear();P3.Points.Clear();P4.Points.Clear();P5.Points.Clear();//调整大小(正方形)double size Math.Min(RenderSize.Width, RenderSize.Height);LayGrid.Height size;LayGrid.Width size;//半径double raduis size / 2;//步子跨度double step 360.0 / ItemSource.Count;for (int i 0; i ItemSource.Count; i){double x (raduis - 20) * Math.Cos((step * i - 90) * Math.PI / 180);//x偏移量double y (raduis - 20) * Math.Sin((step * i - 90) * Math.PI / 180);//y偏移量//X Y坐标P1.Points.Add(new Point(raduis x, raduis y));P2.Points.Add(new Point(raduis x * 0.75, raduis y * 0.75));P3.Points.Add(new Point(raduis x * 0.5, raduis y * 0.5));P4.Points.Add(new Point(raduis x * 0.25, raduis y * 0.25));//数据多边形P5.Points.Add(new Point(raduis x * ItemSource[i].Value * 0.01, raduis y * ItemSource[i].Value * 0.01));//文字处理TextBlock txt new TextBlock();txt.Width 60;txt.FontSize 10;txt.TextAlignment TextAlignment.Center;txt.Text ItemSource[i].ItemName;txt.Foreground new SolidColorBrush(Color.FromArgb(100, 255, 255, 255));txt.SetValue(Canvas.LeftProperty, raduis (raduis - 10) * Math.Cos((step * i - 90) * Math.PI / 180) - 30);//设置左边间距txt.SetValue(Canvas.TopProperty, raduis (raduis - 10) * Math.Sin((step * i - 90) * Math.PI / 180) - 7);//设置上边间距mainCanvas.Children.Add(txt);}}} 运行结果: 最后一个部分 整体分为两行两列设计,获取数据方法和上面类似;样式这些可以自己慢慢条.