专门做app的网站,温州营销型网站建设,企业咨询管理有限公司干嘛的,wordpress 字符串函数生产监控平台——
一、介绍
VS2022 .net core(net6版本#xff09; 1、文件夹#xff1a;MVVM /静态资源#xff08;图片、字体等#xff09; 、用户空间、资源字典等。
2、图片资源库#xff1a; https://www.iconfont.cn/ ;
1.资源字典Dictionary
1、…生产监控平台——
一、介绍
VS2022 .net core(net6版本 1、文件夹MVVM /静态资源图片、字体等 、用户空间、资源字典等。
2、图片资源库 https://www.iconfont.cn/ ;
1.资源字典Dictionary
1、Style
风格 样式
ResourceDictionary xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlStyle TargetTypeButton x:KeyOperateBtnStyleSetter PropertyWidth Value40/SetterSetter PropertyBackground Value#11ffffff/SetterSetter PropertyForeground ValueWhite/Setter!--# 加字体名称--Setter PropertyFontFamily Value../Resource/Fronts/#iconfont/SetterSetter PropertyTemplateSetter.ValueControlTemplate TargetTypeButtonGrid Background{TemplateBinding Background}Border x:NameborderContentPresenter HorizontalAlignmentCenter VerticalAlignmentCenter/ContentPresenter/Border/GridControlTemplate.TriggersTrigger PropertyIsMouseOver ValueTrueSetter TargetNameborder PropertyBackground Value#33ffffff/Setter/Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter/Style
/ResourceDictionary
第二个资源字典.
ResourceDictionary xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlStyle TargetTypeButton x:KeyBtnStyleSetter PropertyForeground Value#aaa/SetterSetter PropertyTemplateSetter.ValueControlTemplate TargetTypeButtonBorder BorderThickness1 BackgroundTransparent Nameborder!--渐变色--Border.BorderBrushLinearGradientBrush StartPoint0,0 EndPoint1,0GradientStop ColorRed Offset0/GradientStopGradientStop ColorGreen Offset0.5/GradientStopGradientStop ColorBlue Offset1/GradientStop/LinearGradientBrush/Border.BorderBrushStackPanel OrientationHorizontal HorizontalAlignmentCenter VerticalAlignmentCenterTextBlock Text{TemplateBinding Tag} FontFamily../Resource/Fonts/#iconfont/TextBlockTextBlock Text{TemplateBinding Content} VerticalAlignmentCenter/TextBlock/StackPanel/BorderControlTemplate.TriggersTrigger PropertyIsMouseOver ValueTrueSetter TargetNameborder PropertyBackground Value#11ffffff/Setter/Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter/Style
/ResourceDictionary 2.App.xaml
代码绑定
Application x:ClassProductMonitor.Appxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:localclr-namespace:ProductMonitorStartupUriMainWindow.xamlApplication.ResourcesResourceDictionaryResourceDictionary.MergedDictionariesResourceDictionary SourceDictionary/OperateBtnStyleDic.xaml/ResourceDictionaryResourceDictionary SourceDictionary/BtnStyleDic.xaml/ResourceDictionary/ResourceDictionary.MergedDictionaries/ResourceDictionary/Application.Resources
/Application
3. ItemsControl
绑定列表用
Grid Grid.Row1Grid.RowDefinitionsRowDefinition/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsStackPanel OrientationHorizontal VerticalAlignmentCenterTextBlock Text#xe68d; FontFamily../Resource/Fonts/#iconfont Foreground#99ffffff Margin5,0/TextBlockTextBlock Text报警记录 Foreground#99ffffff Margin5,0/TextBlock/StackPanelItemsControl Grid.Row1 ItemsSource{Binding AlarmList} Margin5,0ItemsControl.ItemTemplateDataTemplateGridGrid.ColumnDefinitionsColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitionsBorder BackgroundIndianRed Height6 CornerRadius3 VerticalAlignmentCenter HorizontalAlignmentCenter/BorderTextBlock Text{Binding Num} Grid.Column1 VerticalAlignmentCenter HorizontalAlignmentCenter Foreground#992bedf1/TextBlockTextBlock Text{Binding Msg} Grid.Column2 VerticalAlignmentCenter HorizontalAlignmentCenter Foreground#992bedf1/TextBlockTextBlock Text{Binding Time} Grid.Column3 VerticalAlignmentCenter HorizontalAlignmentCenter Foreground#992bedf1/TextBlockTextBlock Text{Binding During,StringFormat时长{0}秒} Grid.Column4 VerticalAlignmentCenter HorizontalAlignmentCenter Foreground#992bedf1/TextBlock/Grid/DataTemplate/ItemsControl.ItemTemplate/ItemsControl
/Grid
第二个ItemsControl :
GroupBox Header环境ItemsControl ItemsSource{Binding EnvironmentList} VerticalAlignmentCenterItemsControl.ItemsPanelItemsPanelTemplateUniformGrid Columns4/UniformGrid/ItemsPanelTemplate/ItemsControl.ItemsPanelItemsControl.ItemTemplateDataTemplateStackPanel HorizontalAlignmentCenter VerticalAlignmentCenter Margin0,5TextBlock Text{Binding EnItemValue} FontSize30 Foreground#ff2bedf1 Margin0,5/TextBlockTextBlock Text{Binding EnItemName} FontSize20 Foreground#aaffffff Margin0,5/TextBlock/StackPanel/DataTemplate/ItemsControl.ItemTemplate/ItemsControl
/GroupBox 4. 项目控件 2.UserControl
UserControl如何使用Style 以及 Polyline 和Polyon Path
效果图 UserControl.ResourcesStyle TargetTypeGroupBox Setter PropertyMargin Value10,3/SetterSetter PropertyTemplateSetter.ValueControlTemplate TargetTypeGroupBoxGrid!--左上角的线条--Polyline Points0 30,0 10,10 0, 30 0 StrokeRed StrokeThickness1 VerticalAlignmentTopHorizontalAlignmentLeft/Polyline!--左上横的点--Ellipse Width4 Height4 HorizontalAlignmentLeft FillRed VerticalAlignmentTopMargin24,-2,0,0/Ellipse!--左下横的点--Ellipse Width4 Height4 HorizontalAlignmentLeft FillRed VerticalAlignmentTopMargin-2,24,0,0/Ellipse!--移动--Path DataM0 0,3 3,30 3,33 0, 68 0,73 7,78 7,78,10 M8 0, 25,0 StrokeRed StrokeThickness1VerticalAlignmentTop HorizontalAlignmentRight/Path!--左下角的线条--Polyline Points0 0,0 15,10 15 StrokeRed StrokeThickness1 VerticalAlignmentBottom HorizontalAlignmentLeft/Polyline!--右下角的线条--Polyline Points10 0,0,10 StrokeRed StrokeThickness1 HorizontalAlignmentRight VerticalAlignmentBottom/Polyline!--右下角的三角形--Polygon Points0 7,7 7,7 0 FillRed HorizontalAlignmentRight VerticalAlignmentBottom/Polygon!--上面的线--Border BorderThickness0,1,0,0 BorderBrushRed VerticalAlignmentTop Margin30,-0.5,78,0/Border!--右边的线--Border BorderThickness0,0,1,0 BorderBrushRed HorizontalAlignmentRight Margin0,10/Border!--左边的线--Border BorderThickness1,0,0,0 BorderBrushRed HorizontalAlignmentLeft Margin-0.5,10/Border!--下边的线--Border BorderThickness0,0,0,1 BorderBrushRed VerticalAlignmentBottom Margin10,0/Border!--文字前的修饰--Path DataM0 0,3 0,5 4,3 8,0 8,3 4 FillRed Margin10,13/PathPath DataM0 0,3 0,5 4,3 8,0 8,3 4 FillRed Margin16,13/PathTextBlock Text{TemplateBinding Header} ForegroundWhite Margin25,8/TextBlock/Grid/ControlTemplate/Setter.Value/Setter/Style/UserControl.Resources
1.MonitorUC
代码
UserControl x:ClassProductMonitor.UserControls.MonitorUCxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:localclr-namespace:ProductMonitor.UserControlsxmlns:lvcclr-namespace:LiveCharts.Wpf;assemblyLiveCharts.Wpfmc:Ignorabled xmlns:randerclr-namespace:ProductMonitor.UserControlsd:DesignHeight450 d:DesignWidth800 Height675 Width1200UserControl.ResourcesStyle TargetTypeGroupBox Setter PropertyMargin Value10,3/SetterSetter PropertyTemplateSetter.ValueControlTemplate TargetTypeGroupBoxGrid!--左上角的线条--Polyline Points0 30,0 10,10 0, 30 0 Stroke#9918aabd StrokeThickness1 VerticalAlignmentTopHorizontalAlignmentLeft/Polyline!--左上横的点--Ellipse Width4 Height4 HorizontalAlignmentLeft Fill#9918aabd VerticalAlignmentTopMargin24,-2,0,0/Ellipse!--左下横的点--Ellipse Width4 Height4 HorizontalAlignmentLeft Fill#9918aabd VerticalAlignmentTopMargin-2,24,0,0/Ellipse!--移动--Path DataM0 0,3 3,30 3,33 0, 68 0,73 7,78 7,78,10 M8 0, 25,0 Stroke#9918aabd StrokeThickness1VerticalAlignmentTop 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 BorderThickness1,0,0,0 BorderBrush#9918aabd HorizontalAlignmentLeft Margin-0.5,10/Border!--下边的线--Border BorderThickness0,0,0,1 BorderBrush#9918aabd VerticalAlignmentBottom Margin10,0/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#2218aabd Margin16,13/PathTextBlock Text{TemplateBinding Header} ForegroundWhite Margin25,8 FontWeightBold HorizontalAlignmentLeft VerticalAlignmentTop/TextBlockContentPresenter/ContentPresenter/Grid/ControlTemplate/Setter.Value/Setter/Style/UserControl.ResourcesGridGrid.RowDefinitionsRowDefinition Height50/RowDefinitionRowDefinition/RowDefinitionRowDefinition Height150/RowDefinition/Grid.RowDefinitions!--第一行--GridGrid.ColumnDefinitionsColumnDefinition Width200/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitions!--第一列--StackPanel OrientationHorizontal HorizontalAlignmentCenter VerticalAlignmentCenterTextBlock Text{Binding TimeStr} ForegroundWhite FontSize30 VerticalAlignmentCenter FontFamily../Resource/Fonts/#Digital Display/TextBlockStackPanel Margin15,0,0,0TextBlock Text{Binding DateStr} ForegroundWhite FontSize10/TextBlockTextBlock Text{Binding WeekStr} ForegroundWhite FontSize10 HorizontalAlignmentRight/TextBlock/StackPanel/StackPanel!--第二列--StackPanel Grid.Column1 OrientationHorizontal VerticalAlignmentCenter HorizontalAlignmentLeftStackPanel.ResourcesDataTemplate x:KeymachineCountBorder Width15 Background#3318aabd Margin2,0TextBlock Text{Binding} VerticalAlignmentCenter HorizontalAlignmentCenter ForegroundWhite FontSize16/TextBlock/Border/DataTemplate/StackPanel.ResourcesTextBlock Text机台#13;总数 Foreground#99ffffff Margin10,0 VerticalAlignmentCenter FontSize10/TextBlockItemsControl ItemsSource{Binding MachineCount} ItemTemplate{StaticResource machineCount}ItemsControl.ItemsPanelItemsPanelTemplateStackPanel OrientationHorizontal/StackPanel/ItemsPanelTemplate/ItemsControl.ItemsPanel/ItemsControlTextBlock Text生产计数 Foreground#99ffffff Margin20,0 VerticalAlignmentCenter FontSize10/TextBlockItemsControl ItemsSource{Binding MachineCount} ItemTemplate{StaticResource machineCount}ItemsControl.ItemsPanelItemsPanelTemplateStackPanel OrientationHorizontal/StackPanel/ItemsPanelTemplate/ItemsControl.ItemsPanel/ItemsControl!--第三个--TextBlock Text不良计数 Foreground#99ffffff Margin20,0 VerticalAlignmentCenter FontSize10/TextBlockItemsControl ItemsSource{Binding MachineCount} ItemTemplate{StaticResource machineCount}ItemsControl.ItemsPanelItemsPanelTemplateStackPanel OrientationHorizontal/StackPanel/ItemsPanelTemplate/ItemsControl.ItemsPanel/ItemsControl/StackPanel!--配置按钮 触发器 渐进色--Button Style{StaticResource BtnStyle} HorizontalAlignmentRight Grid.Column1 Height35 Width80 VerticalAlignmentCenter Margin20,0Content配置 Tag#xe625; Command{Binding ShowSettingaCmm,RelativeSource{RelativeSource AncestorTypeWindow}}/Button/Grid!--第二行--Grid Grid.Row1Grid.ColumnDefinitionsColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitionsUniformGrid Grid.Column0 Columns1GroupBox Header环境ItemsControl ItemsSource{Binding EnvironmentList} VerticalAlignmentCenterItemsControl.ItemsPanelItemsPanelTemplateUniformGrid Columns4/UniformGrid/ItemsPanelTemplate/ItemsControl.ItemsPanelItemsControl.ItemTemplateDataTemplateStackPanel HorizontalAlignmentCenter VerticalAlignmentCenter Margin0,5TextBlock Text{Binding EnItemValue} FontSize12 Foreground#ff2bedf1 Margin0,5/TextBlockTextBlock Text{Binding EnItemName} FontSize10 Foreground#aaffffff Margin0,5/TextBlock/StackPanel/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/GroupBox!--画直方图--GroupBox Header产能Grid!--定义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/GradientStopGradientStop Color#ff2bedf1/GradientStop/LinearGradientBrush/lvc:ColumnSeries.Fill/lvc:ColumnSerieslvc:ColumnSeries Values30,40,48,45,38,45,45,33,34 Title生产总数 MaxColumnWidth10!--渐变色--lvc:ColumnSeries.FillLinearGradientBrush StartPoint0,0 EndPoint0,1GradientStop Color#fffb9a9a/GradientStopGradientStop Color#ffff5151/GradientStop/LinearGradientBrush/lvc:ColumnSeries.Fill/lvc:ColumnSeries/lvc:CartesianChart.Series!--Y数据刻度--lvc:CartesianChart.AxisYlvc:Axis MinValue0lvc:Axis.Separatorlvc:Separator Step100 StrokeRed/lvc:Separator/lvc:Axis.Separator/lvc:Axis/lvc:CartesianChart.AxisY/lvc:CartesianChartStackPanel HorizontalAlignmentRight VerticalAlignmentTop Margin10 OrientationHorizontalBorder Height6 Width6 Background#ff2bedf1 Margin5,0/BorderTextBlock Text生产总数 FontSize10 Foreground#44ffffff/TextBlockBorder Height6 Width6 Background#ffff5151 Margin5,0/BorderTextBlock Text不良计数 FontSize10 Foreground#44ffffff/TextBlock/StackPanel/Grid/GroupBoxGroupBox Header能源Gridlvc:CartesianChartlvc:CartesianChart.AxisXlvc:Axis Labels1#,2#,3#,4#,5#,6#lvc:Axis.Separatorlvc:Separator Step1 StrokeThickness0/lvc:Separator/lvc:Axis.Separator/lvc:Axis/lvc:CartesianChart.AxisX!--定义y轴--lvc:CartesianChart.Serieslvc:LineSeries Values8,2,7,6,4,14 PointGeometrySize0 Stroke#ff2bedf1 Title质量!--渐变色--lvc:LineSeries.FillLinearGradientBrush StartPoint0,0 EndPoint0,1GradientStop Color#ff3fbbe6/GradientStopGradientStop ColorTransparent/GradientStop/LinearGradientBrush/lvc:LineSeries.Fill/lvc:LineSeries/lvc:CartesianChart.Series!--Y数据刻度--lvc:CartesianChart.AxisYlvc:Axis MinValue0 MaxValue15lvc:Axis.Separatorlvc:Separator Step5 Stroke#11ffffff/lvc:Separator/lvc:Axis.Separator/lvc:Axis/lvc:CartesianChart.AxisY/lvc:CartesianChart/Grid/GroupBox/UniformGridGrid Grid.Column1Grid.RowDefinitionsRowDefinition/RowDefinitionRowDefinition Heightauto/RowDefinitionRowDefinition Height1.5*/RowDefinition/Grid.RowDefinitions!--第一行--Image Source../Resource/Images/Device.png/Image!--第二行--Grid Grid.Row1Grid.RowDefinitionsRowDefinition/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsStackPanel OrientationHorizontal VerticalAlignmentCenterTextBlock Text#xe68d; FontFamily../Resource/Fonts/#iconfont Foreground#99ffffff Margin5,0/TextBlockTextBlock Text报警记录 Foreground#99ffffff Margin5,0/TextBlock/StackPanelItemsControl Grid.Row1 ItemsSource{Binding AlarmList} Margin5,0ItemsControl.ItemTemplateDataTemplateGridGrid.ColumnDefinitionsColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitionsBorder Height6 BackgroundIndianRed CornerRadius5 VerticalAlignmentCenter HorizontalAlignmentCenter/BorderTextBlock Text{Binding Num} Grid.Column1 VerticalAlignmentCenter HorizontalAlignmentCenter Foreground#992bedf1/TextBlockTextBlock Text{Binding Msg} Grid.Column2 VerticalAlignmentCenter HorizontalAlignmentCenter Foreground#992bedf1/TextBlockTextBlock Text{Binding Time} Grid.Column3 VerticalAlignmentCenter HorizontalAlignmentCenter Foreground#992bedf1/TextBlockTextBlock Text{Binding During,StringFormat时长{0}秒} Grid.Column4 VerticalAlignmentCenter HorizontalAlignmentCenter Foreground#992bedf1/TextBlock/Grid/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/Grid!--第三行--GroupBox Grid.Row2 Header数据异常报警比例 Margin0,5lvc:PieChart InnerRadius20 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.Value[0]} Foreground#44ffffff/TextBlock/StackPanel/DataTemplate/Setter.Value/Setter/Style/lvc:PieChart.Resourceslvc:PieChart.Serieslvc:PieSeries Values20 Title压差 StrokeThickness0 DataLabelsTrue LabelPositionOutsideSlice/lvc:PieSerieslvc:PieSeries Values40 Title振动 DataLabelsTrue StrokeThickness0 LabelPositionOutsideSlice/lvc:PieSerieslvc:PieSeries Values10 Title设备温度 DataLabelsTrue StrokeThickness0 LabelPositionOutsideSlice/lvc:PieSerieslvc:PieSeries Values30 Title光照 DataLabelsTrue StrokeThickness0 LabelPositionOutsideSlice/lvc:PieSeries/lvc:PieChart.Series/lvc:PieChart/GroupBox/GridUniformGrid Grid.Column2 Columns1GroupBox Header设备ItemsControl ItemsSource{Binding DeviceList}ItemsControl.ItemsPanelItemsPanelTemplateUniformGrid Columns4/UniformGrid/ItemsPanelTemplate/ItemsControl.ItemsPanelItemsControl.ItemTemplateDataTemplateStackPanel OrientationVertical HorizontalAlignmentCenter VerticalAlignmentCenter Margin0,10TextBlock Text{Binding Value} FontSize12 Foreground#aaffffff/TextBlockTextBlock Text{Binding DeviceItem} FontSize10 Foreground#ff2bedf1/TextBlock/StackPanel/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/GroupBoxGroupBox Header能耗rander:RaderUC ItemSource{Binding RaderList}/rander:RaderUC/GroupBoxGroupBox Header人力GridGrid.ColumnDefinitionsColumnDefinition/ColumnDefinitionColumnDefinition Width1.8*/ColumnDefinition/Grid.ColumnDefinitionsStackPanel VerticalAlignmentCenter Margin0,20,0,0TextBlock Text870 HorizontalAlignmentCenter Foreground#99ffffff FontSize25/TextBlockTextBlock Text在职岗位 HorizontalAlignmentCenter Foreground#99ffffff FontSize12/TextBlock/StackPanelGrid Grid.Column1Grid.RowDefinitionsRowDefinition Height30/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsTextBlock Text缺岗统计 VerticalAlignmentCenter Foreground#18aabd FontSize12/TextBlockItemsControl Grid.Row1 ItemsSource{Binding StuffOutWorkList}ItemsControl.ItemTemplateDataTemplateGrid Height20 WidthautoGrid.ColumnDefinitionsColumnDefinition Width10/ColumnDefinitionColumnDefinition Width50/ColumnDefinitionColumnDefinition Width40/ColumnDefinitionColumnDefinition Width10/ColumnDefinition/Grid.ColumnDefinitionsBorder Width5 Height5 CornerRadius5 BackgroundOrange Margin0,0,8,0/BorderTextBlock Text{Binding StuffName} Grid.Column1 Foreground#99ffffff HorizontalAlignmentCenter/TextBlockTextBlock Text{Binding Position} Grid.Column2 Foreground#99ffffff HorizontalAlignmentCenter/TextBlockStackPanel Grid.Column3 OrientationHorizontalBorder Background#aa2bedf1 Height3 Width{Binding ShowWidt} Margin5,0/BorderTextBlock Text{Binding OutWorkCount} FontSize9 Foreground#99ffffff VerticalAlignmentCenter/TextBlock/StackPanel/Grid/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/Grid/Grid/GroupBox/UniformGrid/Grid!--第三行--ItemsControl Grid.Row2 ItemsSource{Binding WorkShopList} Margin10,0ItemsControl.ItemsPanelItemsPanelTemplateUniformGrid Rows1/UniformGrid/ItemsPanelTemplate/ItemsControl.ItemsPanelItemsControl.ItemTemplateDataTemplateBorder BorderThickness0,1,0,0 BorderBrush#9918aabd Background#01a8aabd Margin10,5GridGrid.RowDefinitionsRowDefinition Height30/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinition Width90/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitions!--第一行--TextBlock Text{Binding WorkShopName} VerticalAlignmentCenter HorizontalAlignmentLeft Foreground#18aabd Margin10,0 /TextBlockTextBlock Grid.Column1 VerticalAlignmentCenter HorizontalAlignmentRight Margin10,0 Hyperlink ForegroundWhite TextDecorationsNone Command{Binding ShowDetailCmm,RelativeSource{RelativeSource AncestorTypeWindow}}[详情]/Hyperlink/TextBlock!--第二行--StackPanel Grid.Row1 HorizontalAlignmentCenter VerticalAlignmentCenterTextBlock Text机台总数 ForegroundWhite FontSize10/TextBlockTextBlock Text{Binding TotalCount} HorizontalAlignmentCenter Foreground#99ffffff FontSize30 Margin0,5/TextBlock/StackPanelUniformGrid Grid.Row1 Grid.Column1StackPanelTextBlock Text{Binding WorkingCount} HorizontalAlignmentCenter ForegroundLightSeaGreen FontSize16/TextBlockTextBlock Text作业 HorizontalAlignmentCenter Foreground#55ffffff FontSize10/TextBlock/StackPanelStackPanelTextBlock Text{Binding WaitCount} HorizontalAlignmentCenter ForegroundDarkOrange FontSize16/TextBlockTextBlock Text等待 HorizontalAlignmentCenter Foreground#55ffffff FontSize10/TextBlock/StackPanelStackPanelTextBlock Text{Binding WrongCount} HorizontalAlignmentCenter ForegroundRed FontSize16/TextBlockTextBlock Text故障 HorizontalAlignmentCenter Foreground#55ffffff FontSize10/TextBlock/StackPanelStackPanelTextBlock Text{Binding StopCount} HorizontalAlignmentCenter ForegroundGray FontSize16/TextBlockTextBlock Text停机 HorizontalAlignmentCenter Foreground#55ffffff FontSize10/TextBlock/StackPanel/UniformGrid/Grid/Border/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/Grid
/UserControl代码 public partial class MonitorUC : UserControl{public MonitorUC(){InitializeComponent();}}
功能注释 2.WorkShopDetailUC
代码;
UserControl x:ClassProductMonitor.UserControls.WorkShopDetailUCxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:localclr-namespace:ProductMonitor.UserControlsmc:Ignorabled xmlns:lvcclr-namespace:LiveCharts.Wpf;assemblyLiveCharts.Wpfd:DesignHeight450 d:DesignWidth800 Height675 Width1200UserControl.ResourcesStyle TargetTypeRadioButtonSetter PropertyHeight Value22/SetterSetter PropertyWidth Value50/SetterSetter PropertyBackground Value#ddd/SetterSetter PropertyForeground Value#888/SetterSetter PropertyFontSize Value11/SetterSetter PropertyBorderBrush Value#33ffffff/SetterSetter PropertyTemplateSetter.ValueControlTemplate TargetTypeRadioButtonBorder Background{TemplateBinding Background}ContentPresenter HorizontalAlignmentCenter VerticalAlignmentCenter/ContentPresenter/Border/ControlTemplate/Setter.Value/SetterStyle.TriggersTrigger PropertyIsChecked ValueTrueSetter PropertyBackground ValueOrange/SetterSetter PropertyBackground ValueWhite/Setter/Trigger/Style.Triggers/Style/UserControl.ResourcesGridGrid.RowDefinitionsRowDefinition Height50/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsBorder Background#1118aabd Margin10,5/BorderBorder Background#1118aabd Margin10,5 Grid.Row1/Border!--第一行--Button Content返回 Style{StaticResource BtnStyle} Tag#xe632; Command{Binding GoBackCmm,RelativeSource{RelativeSource AncestorTypeWindow}} Height28 Width80 HorizontalAlignmentLeft VerticalAlignmentTop Margin20,0/ButtonStackPanel HorizontalAlignmentRight OrientationHorizontal VerticalAlignmentTop Margin20,0TextBlock Text机台状态 ForegroundWhite VerticalAlignmentCenter/TextBlockRadioButton Content全部 IsCheckedTrue/RadioButtonRadioButton Content作业/RadioButtonRadioButton Content等待/RadioButtonRadioButton Content故障/RadioButtonRadioButton Content停机/RadioButton/StackPanel!--第二行滚动绑定界面--ScrollViewer Grid.Row1 Margin10,5 VerticalScrollBarVisibilityHiddenItemsControl ItemsSource{Binding MachineList} Margin0,5ItemsControl.ItemsPanelItemsPanelTemplateUniformGrid Columns5/UniformGrid/ItemsPanelTemplate/ItemsControl.ItemsPanel!--数据样式--ItemsControl.ItemTemplateDataTemplateBorder BorderBrush#9918aabd Background#0a18aabd BorderThickness0,1,0,0 Height260 Margin10,5Grid TextBlock.FontSize11Grid.RowDefinitionsRowDefinition Height30/RowDefinitionRowDefinition/RowDefinitionRowDefinition Height22/RowDefinitionRowDefinition Height22/RowDefinitionRowDefinition Height22/RowDefinition/Grid.RowDefinitions!--第一行--TextBlock VerticalAlignmentCenter FontSize12 Foreground#aaffffff Margin20,0Run Text#xe661; FontFamily../Resource/Fonts/#iconfont/RunRun Text{Binding MachineName}/Run/TextBlockStackPanel HorizontalAlignmentRight OrientationHorizontal VerticalAlignmentCenterBorder Width7 Height7 CornerRadius4 BackgroundLightGreen/BorderTextBlock Text{Binding Status} ForegroundLightGreen Margin10,0 FontSize10/TextBlock/StackPanel!--第二行--local:RingUC Grid.Row1 PercentValue{Binding Percent} Margin30/local:RingUC!--第三行--StackPanel Grid.Row2 OrientationHorizontal VerticalAlignmentCenter Margin15,0TextBlock Text任务状态 Foreground#55ffffff/TextBlockLabel Content{Binding Status} BorderBrushLightGreen ForegroundLightGreen BorderThickness1 Padding5,1 FontSize10/Label/StackPanelTextBlock Grid.Row2 HorizontalAlignmentRight VerticalAlignmentCenterHyperlink ForegroundWhite TextDecorationsNone ClickHyperlink_Click[详情]/Hyperlink/TextBlock!--第四行--StackPanel Grid.Row3 OrientationHorizontal VerticalAlignmentCenter Margin15,0TextBlock Text任务进度: Foreground#55ffffff/TextBlockTextBlock ForegroundWhiteRun Text{Binding FinishedCount}/RunRun Text//RunRun Text{Binding PlanCount}/Run/TextBlock/StackPanel!--第五行--StackPanel Grid.Row4 OrientationHorizontal VerticalAlignmentCenter Margin15,0TextBlock Text工单: Foreground#55ffffff/TextBlockTextBlock ForegroundWhite Text{Binding OrderNo}/TextBlock/StackPanel/Grid/Border/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/ScrollViewerBorder Grid.RowSpan2 Background#22000000 Namedetail VisibilityCollapsedBorder Background#f5f7f9fa x:NamedetailContent VerticalAlignmentBottom BorderBrush#aa3bedf1 BorderThickness0,1,0,0 Grid Height350Grid.RowDefinitionsRowDefinition Height40/RowDefinitionRowDefinition Height30/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitions!--第一行--TextBlock Text机台效率趋势图 HorizontalAlignmentLeft VerticalAlignmentCenter FontSize16 Foreground#555 Margin20,0/TextBlockButton Content#xe609; Style{StaticResource OperateBtnStyle} FontSize20 VerticalAlignmentCenter Width40 Height40 Foreground#333 HorizontalAlignmentRight ClickButton_Click/Button!--第二行--StackPanel Grid.Row1 HorizontalAlignmentLeft OrientationHorizontal VerticalAlignmentCenter Margin40,0Border Width7 Height7 Margin20,0,5,0 BackgroundLightGreen/BorderTextBlock Text作业/TextBlockBorder Width7 Height7 Margin20,0,5,0 BackgroundOrange/BorderTextBlock Text等待/TextBlockBorder Width7 Height7 Margin20,0,5,0 BackgroundPaleVioletRed/BorderTextBlock Text故障/TextBlockBorder Width7 Height7 Margin20,0,5,0 BackgroundLightGray/BorderTextBlock Text停机/TextBlock/StackPanelStackPanel HorizontalAlignmentRight Grid.Row1 OrientationHorizontal Margin40,0 VerticalAlignmentCenterRadioButton Content当日/RadioButtonRadioButton Content当周/RadioButtonRadioButton Content当月/RadioButtonRadioButton Content当年/RadioButton/StackPanel!--第三行--!--第三行--lvc:CartesianChart Grid.Row2 Margin20,0lvc:CartesianChart.AxisXlvc:Axis Labels21-12,20-12,21-01,21-02,21-03,21-04,21-05,21-06,21-07,21-09,21-10,21-11,21-12,22-01,22-02,22-03,22-04,22-05,22-06,22-07lvc:Axis.Separatorlvc:Separator Step1 StrokeThickness0/lvc:Separator/lvc:Axis.Separator/lvc:Axis/lvc:CartesianChart.AxisXlvc:CartesianChart.AxisYlvc:Axis MinValue0 MaxValue100lvc:Axis.Separatorlvc:Separator Stroke#08000000/lvc:Separator/lvc:Axis.Separator/lvc:Axis/lvc:CartesianChart.AxisYlvc:CartesianChart.Serieslvc:StackedColumnSeries Values34.02 ,36.72 ,73.80 ,54.18 ,87.73 ,61.63 ,71.22 ,56.96 ,47.21 ,42.67 ,49.14 ,76.79 ,77.42 ,68.08 ,62.95 ,73.94 ,44.93 ,39.66 ,55.21 ,33.18 FillLightGreen MaxColumnWidth15 Title作业 StrokeThickness0 /lvc:StackedColumnSerieslvc:StackedColumnSeries Values7.91,7.75,4.30,0.40,4.82,8.98,5.07,2.42,6.15,0.57,8.91,8.75,5.30,1.40,5.82,9.98,6.07,3.42,7.15,1.57 FillOrange MaxColumnWidth15 Title等待 StrokeThickness0 /lvc:StackedColumnSerieslvc:StackedColumnSeries Values19.50,19.51,7.87,15.63,5.57,13.69,10.25,10.99,15.45,13.87,0.94,12.94,11.17,2.36,11.53,5.02,1.01,12.60,4.80,19.40 FillPaleVioletRed MaxColumnWidth15 Title故障 StrokeThickness0 /lvc:StackedColumnSerieslvc:StackedColumnSeries Values38.57 ,36.02 ,14.03 ,29.79 ,1.87 ,15.69 ,13.45 ,29.63 ,31.18 ,42.89 ,41.01 ,1.52 ,6.11 ,28.15 ,19.70 ,11.06 ,47.98 ,44.33 ,32.84 ,45.85 FillLightGray MaxColumnWidth15 Title停机 StrokeThickness0 /lvc:StackedColumnSeries/lvc:CartesianChart.Series/lvc:CartesianChart/Grid/Border/Border/Grid
/UserControl
代码 public partial class WorkShopDetailUC : UserControl{public WorkShopDetailUC(){InitializeComponent();}private void Hyperlink_Click(object sender, RoutedEventArgs e){detail.Visibility Visibility.Visible;//实现渐变动画//位移ThicknessAnimation thicknessAnimation new ThicknessAnimation(new Thickness(0, 50, 0, -50), new Thickness(0, 0, 0, 0), new TimeSpan(0, 0, 0, 0, 400));//透明度DoubleAnimation doubleAnimation new DoubleAnimation(0, 1, new TimeSpan(0, 0, 0, 0, 400));Storyboard.SetTarget(thicknessAnimation, detailContent);Storyboard.SetTarget(doubleAnimation, detailContent);Storyboard.SetTargetProperty(thicknessAnimation, new PropertyPath(Margin));Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(Opacity));Storyboard storyboard new Storyboard();storyboard.Children.Add(thicknessAnimation);storyboard.Children.Add(doubleAnimation);storyboard.Begin();}private void Button_Click(object sender, RoutedEventArgs e){// 位移ThicknessAnimation thicknessAnimation new ThicknessAnimation(new Thickness(0, 0, 0, 0), new Thickness(0, 50, 0, -50),new TimeSpan(0, 0, 0, 0, 400));// 透明度DoubleAnimation doubleAnimation new DoubleAnimation(1, 0, new TimeSpan(0, 0, 0, 0, 400));Storyboard.SetTarget(thicknessAnimation, detailContent);Storyboard.SetTarget(doubleAnimation, detailContent);Storyboard.SetTargetProperty(thicknessAnimation, new PropertyPath(Margin));Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(Opacity));Storyboard storyboard new Storyboard();storyboard.Children.Add(thicknessAnimation);storyboard.Children.Add(doubleAnimation);//动画效果完了才关闭storyboard.Completed (se, ev) {detail.Visibility Visibility.Collapsed;};storyboard.Begin();}} 3.RaderUC
界面 Grid x:NameLayGrid!--画布--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/Grid 代码
public partial class RaderUC : UserControl
{public RaderUC(){InitializeComponent();SizeChanged OnSizeChanged; // Alt Enter}/// summary/// 窗体大小不变/// /summary/// param namesender/param/// param namee/paramprivate void OnSizeChanged(object sender,SizeChangedEventArgs e){Drag();}/// summary/// 数据源 支持数据绑定 依赖属性/// /summarypublic static readonly DependencyProperty ItemSourcePropertyDependencyProperty.Register(ItemSource,typeof(ListRaderModel),typeof(RaderUC));public ListRaderModel ItemSource {get{return (ListRaderModel)GetValue(ItemSourceProperty); }set { SetValue(ItemSourceProperty,value); }}public void Drag(){if (ItemSource nullItemSource.Count0){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.Heightsize;LayGrid.Widthsize;// 半径double raduissize/2;// 步子跨度double step 360.0 / ItemSource.Count;for(int i 0;iItemSource.Count; i){//X Y 坐标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偏移量P1.Points.Add(new Point(raduisx,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 12;txt.TextAlignment TextAlignment.Center;txt.HorizontalAlignment HorizontalAlignment.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.Cos((step * i - 90) * Math.PI / 180) - 7);mainCanvas.Children.Add(txt); //加入子节点}}
} 4.RingUC
界面 Grid x:NameLayOutGrid!--三步--!--画光秃秃的整个圆环--Ellipse Width{Binding ElementNameLayOutGrid,PathActualWidth} Height{Binding ElementNameLayOutGrid,PathActualHeight} StrokeThickness8 Stroke#22ffffff/Ellipse!--根据比分比的值涂颜色--Path x:Namepath StrokeOrange StrokeThickness7 StrokeStartLineCapRound StrokeEndLineCapRound/Path!--中间显示具体百分比--TextBlock HorizontalAlignmentCenter VerticalAlignmentCenter ForegroundWhiteRun Text{Binding PercentValue,RelativeSource{RelativeSource AncestorTypeUserControl}, StringFormat{}{0:#}} FontSize22/RunRun Text%/Run/TextBlock/Grid
代码 public partial class RingUC : UserControl{public RingUC(){InitializeComponent();SizeChanged OnSizeChanged;//界面大小改变 重新画}private void OnSizeChanged(object sender, SizeChangedEventArgs e){Drug();}/// summary/// 百分比 比如70/// /summarypublic double PercentValue{get { return (double)GetValue(PercentValueProperty); }set { SetValue(PercentValueProperty, value); }}// Using a DependencyProperty as the backing store for PercentValue. This enables animation, styling, binding, etc...public static readonly DependencyProperty PercentValueProperty DependencyProperty.Register(PercentValue, typeof(double), typeof(RingUC));/// summary/// 画圆环方法/// /summaryprivate void Drug(){LayOutGrid.Width Math.Min(RenderSize.Width, RenderSize.Height);double raduis LayOutGrid.Width / 2;double x raduis (raduis - 3) * Math.Cos((PercentValue % 100 * 3.6 - 90) * Math.PI / 180);double y raduis (raduis - 3) * Math.Sin((PercentValue % 100 * 3.6 - 90) * Math.PI / 180);int Is50 PercentValue 50 ? 0 : 1;//M:移动 A:画弧string pathStr $M{raduis0.01} 3A{raduis-3} {raduis - 3} 0 {Is50} 1 {x} {y};//移动路径//几何图形对象var converter TypeDescriptor.GetConverter(typeof(Geometry));path.Data (Geometry)converter.ConvertFrom(pathStr);}} 3.VIewsModel
属性MonitorUC为属性
XAML
Window x:ClassProductMonitor.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:ProductMonitormc:IgnorabledWindowStartupLocationCenterScreenTitle生产监控平台 Height750 Width1200WindowChrome.WindowChromeWindowChrome GlassFrameThickness0/WindowChrome/WindowChrome.WindowChromeGrid!--渐变颜色 画刷--Grid.BackgroundRadialGradientBrush!--GradientStop 由内向外--!--LinearGradientBrush 由内向外--GradientStop Color#ff285173 Offset0/GradientStopGradientStop Color#ff244967 Offset0.5/GradientStopGradientStop Color#ff14273a Offset1/GradientStop/RadialGradientBrush/Grid.BackgroundGrid.RowDefinitionsRowDefinition Height50/RowDefinitionRowDefinition Heightauto/RowDefinitionRowDefinition Height25/RowDefinition/Grid.RowDefinitions!--第一行为头部第二行为内容第三行为尾部--Border BorderThickness0,0,0,1 BorderBrush#5518aabd Grid.Row0Grid!--第一列--Grid.ColumnDefinitionsColumnDefinition Width60/ColumnDefinitionColumnDefinition Widthauto/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitionsImage SourceResource/Images/Logo.png Grid.Column0/Image!--第二列--StackPanel OrientationVertical Grid.Column1TextBlock Text生产监控平台 ForegroundWhite FontSize16/TextBlockTextBlock Text阻碍你前行的是你自己/TextBlock/StackPanel!--第三列--Grid Grid.Column2 Grid.RowDefinitionsRowDefinition/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsStackPanel OrientationHorizontal Grid.Row0 HorizontalAlignmentRight BackgroundTransparent WindowChrome.IsHitTestVisibleInChromeTrueButton Content#xe624; Style{StaticResource OperateBtnStyle} ClickBtnMin/ButtonButton Content#xe600; Style{StaticResource OperateBtnStyle}/ButtonButton Content#xe609; Style{StaticResource OperateBtnStyle} BackgroundDarkRed ClickBtnClose/Button/StackPanel!--第二行--Border Grid.Row1 BorderThickness0,1,0,0 BorderBrush#5518aabdBorder.BackgroundVisualBrush TileModeFlipXY Viewport0,0,7,7 ViewportUnitsAbsoluteVisualBrush.VisualLine X10 Y110 X210 Y20 StrokeGray StrokeThickness1/Line/VisualBrush.Visual/VisualBrush/Border.Background/Border/Grid/Grid/Border!--用户控件用户空间嵌入到主界面--ContentControl Grid.Row1 Content{Binding MonitorUC}/ContentControl!--第三行--Border Grid.Row2 BorderThickness0,1,0,0 BorderBrush#5518aabdGridGrid.ColumnDefinitionsColumnDefinition/ColumnDefinitionColumnDefinition Widthauto/ColumnDefinition/Grid.ColumnDefinitionsBorder BorderThickness0,1,0,0 BorderBrush#5518aabdBorder.BackgroundVisualBrush TileModeFlipXY Viewport0,0,7,7 ViewportUnitsAbsoluteVisualBrush.VisualLine X10 Y110 X210 Y20 StrokeGray StrokeThickness1/Line/VisualBrush.Visual/VisualBrush/Border.Background/BorderTextBlock Grid.Column1 Textxx教育集团 ForegroundWhite FontSize15 FontWeightBold/TextBlock/Grid/Border/Grid
/Window3.1.ViewModel
using ProductMonitor.OpCommand;
using ProductMonitor.UserControls;
using ProductMonitor.ViewModels;
using ProductMonitor.Views;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace ProductMonitor
{/// summary/// Interaction logic for MainWindow.xaml/// /summarypublic partial class MainWindow : Window{/// summary/// 视图模型/// /summaryMainViewVM mainViewVM new MainViewVM();public MainWindow(){InitializeComponent();this.DataContext mainViewVM;}/// summary/// 显示车间详情页/// /summaryprivate void ShowDetailUC(){WorkShopDetailUC workShopDetailUC new WorkShopDetailUC();mainViewVM.MonitorUC workShopDetailUC;//动画效果(由下而上)//位移 移动时间ThicknessAnimation thicknessAnimation new ThicknessAnimation(new Thickness(0, 50, 0, -50), new Thickness(0, 0, 0, 0), new TimeSpan(0, 0, 0, 0, 400));//透明度DoubleAnimation doubleAnimation new DoubleAnimation(0, 1, new TimeSpan(0, 0, 0, 0, 400));Storyboard.SetTarget(thicknessAnimation, workShopDetailUC);Storyboard.SetTarget(doubleAnimation, workShopDetailUC);Storyboard.SetTargetProperty(thicknessAnimation, new PropertyPath(Margin));Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(Opacity));Storyboard storyboard new Storyboard();storyboard.Children.Add(thicknessAnimation);storyboard.Children.Add(doubleAnimation);storyboard.Begin();}/// summary/// 返回到监控/// /summaryprivate void GoBackMonitor(){MonitorUC monitorUC new MonitorUC();mainViewVM.MonitorUC monitorUC;}/// summary/// 展示详情命令/// /summarypublic Command ShowDetailCmm{get{return new Command(ShowDetailUC);}}/// summary/// 返回监控界面命令/// /summarypublic Command GoBackCmm{get{return new Command(GoBackMonitor);}}/// summary/// 最小化/// /summary/// param namesender/param/// param namee/paramprivate void BtnMin(object sender, RoutedEventArgs e){//最小化this.WindowState WindowState.Minimized;//this.WindowState WindowState.Maximized;//最大化}/// summary/// 关闭/// /summary/// param namesender/param/// param namee/paramprivate void BtnClose(object sender, RoutedEventArgs e){//this.Close();Environment.Exit(0);}/// summary/// 弹出配置窗口/// /summaryprivate void ShowSettingWin(){//父子关系SettingsWin settingsWin new SettingsWin() { Owner this };settingsWin.ShowDialog();}public Command ShowSettingaCmm{get { return new Command(ShowSettingWin); }}}
}4.属性定义 4.1.依赖属性 5、Views 5.1.SettingsWin窗口
Window x:ClassProductMonitor.Views.SettingsWinxmlnshttp://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:ProductMonitor.Viewsmc:IgnorabledWindowStartupLocationCenterOwner BackgroundTransparent FontFamilyMicrosoft YaHei FontWeightExtraLight ResizeModeNoResizeTitleSettingsWin Height450 Width800WindowChrome.WindowChromeWindowChrome GlassFrameThickness-1/WindowChrome/WindowChrome.WindowChromeWindow.ResourcesStyle TargetTypeRadioButtonSetter PropertyBackground ValueTransparent/SetterSetter PropertyTemplateSetter.ValueControlTemplate TargetTypeRadioButtonBorder Background{TemplateBinding Background} Height30ContentPresenter VerticalAlignmentCenter HorizontalAlignmentLeft Margin10,0/ContentPresenter/Border/ControlTemplate/Setter.Value/SetterStyle.TriggersTrigger PropertyIsChecked ValueTrueSetter PropertyBackground Value#18aabd/SetterSetter PropertyForeground ValueWhite/Setter/Trigger/Style.Triggers/Style/Window.ResourcesGridGrid.RowDefinitionsRowDefinition Height30/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinition Width130/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitionsTextBlock VerticalAlignmentCenter Margin10,0Run Text#xe625; FontFamily../Resource/Fonts/#iconfont FontSize14/RunRun Text系统配置信息/Run/TextBlockBorder BorderThickness0,0,1,0 Grid.Row1 BorderBrush#ddd/BorderStackPanel Grid.Row1 Margin10,0RadioButton Content设备清单 Tagdata1 IsCheckedTrue /RadioButtonRadioButton Content环境监测 Tagdata2 /RadioButtonRadioButton Content设备监测 Tagdata3 /RadioButtonRadioButton Content配置一 Tagdata4 /RadioButtonRadioButton Content配置二 Tagdata5 /RadioButton/StackPanelScrollViewer Grid.Row1 Grid.Column1 VerticalScrollBarVisibilityHiddenFrame SourceSettingsPage.xaml x:Nameframe NavigationUIVisibilityHidden/Frame/ScrollViewer/Grid
/Window代码 含有URL导航 public partial class SettingsWin : Window{public SettingsWin(){InitializeComponent();}/// summary/// 定位到配置页面相应标题位置/// /summary/// param namesender/param/// param namee/paramprivate void RadioButton_Click(object sender, RoutedEventArgs e){//程序集(授权) 路径string tag ;var btn sender as RadioButton;if (btn ! null){tag btn.Tag.ToString();}//frame.Navigate(new Uri(pack://application:,,,/ProductMonitor;component/Views/SettingsPage.xaml# tag, UriKind.RelativeOrAbsolute));//# 片段//程序集(授权) 路径 都在一起//frame.Navigate(new Uri(pack://application:,,,/Views/SettingsPage.xaml, UriKind.RelativeOrAbsolute));}} 5.2 .页面控件Page
xaml:
GridGrid.RowDefinitionsRowDefinition Height40/RowDefinitionRowDefinition Heightauto/RowDefinitionRowDefinition Height40/RowDefinitionRowDefinition Heightauto/RowDefinitionRowDefinition Height40/RowDefinitionRowDefinition Heightauto/RowDefinitionRowDefinition Height40/RowDefinitionRowDefinition Heightauto/RowDefinitionRowDefinition Height40/RowDefinitionRowDefinition Heightauto/RowDefinition/Grid.RowDefinitionsLabel Content设备清单 x:Namedata1 VerticalContentAlignmentCenter/Label Content环境监测 x:Namedata2 Grid.Row2 VerticalAlignmentCenter/Label Content设备监测 x:Namedata3 Grid.Row4 VerticalAlignmentCenter/Label Content配置一 x:Namedata4 Grid.Row6 VerticalAlignmentCenter/Label Content配置二 x:Namedata5 Grid.Row8 VerticalAlignmentCenter/Grid Grid.Row1 Height200 Margin10,5StackPanelGrid Height30 Background#09000000 Margin0,1Grid.ColumnDefinitionsColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition Width50/ColumnDefinition/Grid.ColumnDefinitionsBorder BorderBrush#eee BorderThickness0,0,0,1/BorderBorder BorderBrush#eee BorderThickness0,0,0,1 Grid.Row2/BorderBorder BorderBrush#eee BorderThickness0,0,0,1 Grid.Row4/BorderBorder BorderBrush#eee BorderThickness0,0,0,1 Grid.Row6/BorderBorder BorderBrush#eee BorderThickness0,0,0,1 Grid.Row8/BorderTextBlock Text控制器1# VerticalAlignmentCenter Margin10,0/TextBlockTextBlock Text9600N,8,1,1 Grid.Column1 VerticalAlignmentCenter/TextBlock TextModbusRTU Grid.Column2 VerticalAlignmentCenter/TextBlock Grid.Column3 VerticalAlignmentCenter HorizontalAlignmentCenterHyperlink点位表/Hyperlink/TextBlock/GridUniformGrid Columns2Grid Height30 Margin30,0,0,0Grid.ColumnDefinitionsColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitionsTextBlock Text温度 VerticalAlignmentCenter/TextBlock Text40001 Grid.Column1 VerticalAlignmentCenter/TextBlock Text℃ Grid.Column2 VerticalAlignmentCenter/TextBlock Grid.Column3 VerticalAlignmentCenterHyperlink删除/Hyperlink/TextBlock/GridGrid Height30 Margin30,0,0,0Grid.ColumnDefinitionsColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitionsTextBlock Text湿度 VerticalAlignmentCenter/TextBlock Text40002 Grid.Column1 VerticalAlignmentCenter/TextBlock Text% Grid.Column2 VerticalAlignmentCenter/TextBlock Grid.Column3 VerticalAlignmentCenterHyperlink删除/Hyperlink/TextBlock/Grid/UniformGrid/StackPanel/GridGrid Grid.Row3 Height200TextBlock Text环境监测内容/TextBlock/GridGrid Grid.Row5 Height200TextBlock Text设备监测内容/TextBlock/GridGrid Grid.Row7 Height200TextBlock Text配置一内容/TextBlock/GridGrid Grid.Row9 Height200TextBlock Text配置二内容/TextBlock/Grid
/Grid 。cs:
