1、先上圖
繼上節(jié)完成winform版的應(yīng)用后，今天再爆肝wpf版的，看看看。
可以看到，wpf的確實(shí)還是漂亮很多，現(xiàn)在人都喜歡漂亮的，顏值高的，現(xiàn)在是看臉時(shí)代，作為軟件來說，是交給用戶使用的，UI自然是要講究，可以看出，wpf比winform漂亮多了，因?yàn)閣pf使用樣式css來美化界面，雖然這只是拋磚引玉，但說明作為軟件工程師，特別是應(yīng)用軟件開發(fā)者，顏值一定要有，才有吸引力。這個(gè)例子應(yīng)用了表格控件datagrid和LiveCharts控件，前者呈現(xiàn)數(shù)據(jù)表格，后者圖形展示數(shù)據(jù)。
2、如何爆？
1、創(chuàng)建plc中的寄存器數(shù)據(jù)
? ? ? 這里是有一個(gè)生產(chǎn)車間的設(shè)備，4臺(tái)窯爐，長這樣的，設(shè)備都由PLC工程師程序控制，軟件開發(fā)者需要將PLC的一些數(shù)據(jù)獲取得到并展示到PC或屏幕上，所以經(jīng)過與PLC電氣硬件工程師溝通，明確了這3個(gè)區(qū)的寄存器分別是CIO區(qū)的BOOL，H區(qū)的SHORT，W區(qū)的FLOAT數(shù)據(jù)類型，具體哪些寄存器存放的是什么數(shù)據(jù)，需要與他們仔細(xì)溝通，并用excel記錄下來，現(xiàn)在只是舉例每個(gè)窯爐有溫度，水位，轉(zhuǎn)速，轉(zhuǎn)角，狀態(tài)，這個(gè)很關(guān)鍵，需要一個(gè)個(gè)數(shù)據(jù)地址要明確清晰，不出差錯(cuò)，具體還需要哪些數(shù)據(jù)看你的需求，作為上層軟件開發(fā)者需要的是PLC的變量地址，里面的PLC程序是怎么控制生產(chǎn)設(shè)備的，不關(guān)心。?
?這里模擬下現(xiàn)場的數(shù)據(jù)，各位高僧能明白這個(gè)意思嗎？
，
將12個(gè)地址保存在excel文件中，程序中來讀取這個(gè)excel，也就是說我們要將現(xiàn)場需要采集PLC數(shù)據(jù)的寄存器地址全部放在EXCEL文件中，統(tǒng)一管理和程序讀取利用起來，程序通過讀取excel文件，然后利用通訊庫的功能與PLC通信，這個(gè)思路這很重要，這樣做擴(kuò)展性很好。
2、創(chuàng)建wpf項(xiàng)目方案
?
3、創(chuàng)建有關(guān)目錄，引入dll庫文件，類文件等
引入NPOI，這個(gè)東西是EXCEL讀寫的庫
引入通訊庫及sqlite庫，即dll文件
?
命令基類，這個(gè)類的作用是控件的命令的父類
PLC讀寫時(shí)的實(shí)體類
?這個(gè)類跟下面要講的sqlite數(shù)據(jù)庫的表結(jié)構(gòu)保持一致，同時(shí)也與excel文件里的表頭一致
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace OmRonMesWPFApp.Model
{
/// <summary>
/// PLC變量實(shí)體類
/// </summary>
public class PlcVariableModel
{
/// <summary>
///序號
/// </summary>
public string Id { get; set; }
/// <summary>
///名稱
/// </summary>
public string Name { get; set; }
/// <summary>
/// 狀態(tài)
/// </summary>
public string State { get; set; }
/// <summary>
/// 溫度
/// </summary>
public string Temperature { get; set; }
/// <summary>
/// 水位
/// </summary>
public string Waterlevel { get; set; }
/// <summary>
/// 轉(zhuǎn)速
/// </summary>
public string Speed { get; set; }
/// <summary>
/// 轉(zhuǎn)角
/// </summary>
public string Corner { get; set; }
/// <summary>
/// 時(shí)間
/// </summary>
public string Inserttime { get; set; }
}
}
?這里需要引用這個(gè)圖形控件LiveChart，功能強(qiáng)大
?4、創(chuàng)建sqlite數(shù)據(jù)庫
這里簡單介紹下sqlite數(shù)據(jù)庫，這個(gè)數(shù)據(jù)庫很好，雖然功能沒有sqlserver，mysql，oracle等強(qiáng)大，但它在上位機(jī)軟件中非常方便，不需要安裝，不需要配置，即插即用，，所有sql命令都支持，不太清楚的可百度求助下。
注意將sqlite數(shù)據(jù)庫放在項(xiàng)目編譯生成的debug\net5.0-windows目錄下，因?yàn)槌绦蚓幾g后會(huì)有debug目錄，這樣方便訪問，便于部署和移植項(xiàng)目，這樣程序打包后部署不影響文件的讀取。
?5、UI布局
5.1 消息框窗體
5.2 主界面布局
?定義通用樣式文件、
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--定義通用的按鈕樣式-->
<Style TargetType="{x:Type Button}" x:Key="btnBaseStyle">
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="90"/>
<Setter Property="FontFamily" Value="微軟雅黑"/>
<Setter Property="Margin" Value="3,0"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="Blue"/>
<!--模板的樣式-->
<Setter Property="Template">
<Setter.Value>
<!--Button按鈕樣式-->
<ControlTemplate TargetType="Button">
<Grid >
<Border Background="{TemplateBinding Background}" CornerRadius="13" >
<TextBlock Margin="10 5 10 5" Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
</Border>
</Grid>
<ControlTemplate.Triggers>
<!--鼠標(biāo)放上去時(shí)的觸發(fā)器-->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White" ></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--TextBox默認(rèn)樣式-->
<Style TargetType="{x:Type TextBox}" x:Key="txtTextBoxStyle">
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="20"/>
<Setter Property="BorderBrush" Value="#FF105190"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Margin" Value="2,0"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FFE4E4E4" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<!--TextBlock默認(rèn)樣式-->
<Style TargetType="{x:Type TextBlock}" x:Key="txtTextBlockStyle">
<Setter Property="Margin" Value="1"/>
<Setter Property="Height" Value="24"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="20"></Setter>
</Style>
<!--頁面下拉框樣式-->
<LinearGradientBrush x:Key="ComboBox.Static.Background" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FFE4E4E4" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ComboBox.Static.Border" Color="#FF105190"/>
<!--combox默認(rèn)樣式-->
<Style x:Key="cboStyle" TargetType="{x:Type ComboBox}">
<Setter Property="Background" Value="{StaticResource ComboBox.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource ComboBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="25"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Padding" Value="6,3,5,3"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
</Style>
</ResourceDictionary>定義表格數(shù)據(jù)樣式文件
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--所有datagrid控件頁面的樣式-->
<Style TargetType="TextBlock" x:Key="textColStyleCenter">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="TextAlignment" Value="Center"/>
</Style>
<Style TargetType="TextBlock" x:Key="textColStyleLeft">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="TextAlignment" Value="Left"/>
<Setter Property="Padding" Value="5,0"/>
</Style>
<Style TargetType="CheckBox" x:Key="chkColStyle">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
</Style>
<!--dg表格行的樣式-->
<Style TargetType="{x:Type DataGridRow}" x:Key="dgRowStyle">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="#FFD5EFF7"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#FFFBFCF9"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF73BCE8" Offset="0.98"/>
<GradientStop Color="White" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5C8DE0" Offset="0.98"/>
<GradientStop Color="White" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<!--dg表格列的樣式-->
<Style x:Key="colStyle" TargetType="DataGridColumnHeader">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="#FF7C6BE0"/>
</Style>
<!--dg表格樣式-->
<Style TargetType="DataGrid" x:Key="dgStyle">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="AutoGenerateColumns" Value="False"/>
<Setter Property="SelectionMode" Value="Extended"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="CanUserAddRows" Value="False"/>
<Setter Property="RowHeaderWidth" Value="20"/>
<Setter Property="HeadersVisibility" Value="Column"/>
<!--隔行顯示-->
<Setter Property="AlternationCount" Value="2"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="SelectionUnit" Value="FullRow"/>
<Setter Property="ColumnHeaderHeight" Value="25"/>
<Setter Property="RowHeight" Value="25"/>
<Setter Property="HorizontalGridLinesBrush" Value="LightGray"/>
<Setter Property="VerticalGridLinesBrush" Value="LightGray"/>
<Setter Property="ColumnHeaderStyle" Value="{StaticResource colStyle}"/>
<Setter Property="Margin" Value="5,20,0,5"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="RowStyle" Value="{StaticResource dgRowStyle}"/>
</Style>
</ResourceDictionary>?布局中用到了常規(guī)的UI控件，但比winform復(fù)雜，還設(shè)置了圖標(biāo)，以增強(qiáng)美化效果。
<Window x:Class="OmRonMesWPFApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:OmRonMesWPFApp.ViewModel"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
FontSize="12" FontFamily="Microsoft YaHei" FontWeight="ExtraLight" Title="煅燒車間運(yùn)行監(jiān)測" Height="740" Width="1300" WindowStartupLocation="CenterScreen" Name="loginWin" >
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid Background="Honeydew" ShowGridLines="true">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--第一行標(biāo)題-->
<Grid Grid.Row="0" Margin="0" Background="CornflowerBlue" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="PLC地址" Style="{StaticResource txtTextBlockStyle}" HorizontalAlignment="Center"/>
<TextBox Grid.Column="1" VerticalContentAlignment="Center" Text="{Binding HostName}" Style="{StaticResource txtTextBoxStyle}" />
<TextBlock Grid.Column="2" Text="端口號" Style="{StaticResource txtTextBlockStyle}" HorizontalAlignment="Center"/>
<TextBox Grid.Column="3" VerticalContentAlignment="Center" Text="{Binding HostPort}" Style="{StaticResource txtTextBoxStyle}" />
<Button Grid.Column="4" Content="連 接" Style="{StaticResource btnBaseStyle}" Command="{Binding LoginCommand}" CommandParameter="{Binding ElementName=loginWin}" />
<Button Grid.Column="5" Content="斷 開" Style="{StaticResource btnBaseStyle}" />
<TextBlock Grid.Column="6" FontSize="19" Text="{Binding ConnectWords,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center" Style="{StaticResource txtTextBlockStyle}" Foreground="White"/>
</Grid>
<!--第二行信息-->
<Grid Grid.Row="1" Margin="0 10 0 0">
<Grid.ColumnDefinitions>
<!--所占百分比50%-->
<ColumnDefinition Width="45*" />
<ColumnDefinition Width="55*" />
</Grid.ColumnDefinitions>
<!--第1列布局：數(shù)據(jù)列表-->
<DataGrid Name="gridCustomers" Margin="10 5 5 5" Grid.Column="0" ItemsSource="{Binding HouseList}" SelectedItem="{Binding CurrentItem}" Style="{StaticResource dgStyle}">
<DataGrid.Columns>
<!--綁定視圖模型中的CustInfo對象各個(gè)屬性-->
<DataGridTextColumn Binding="{Binding Id}" Header="序號" IsReadOnly="True" ElementStyle="{StaticResource textColStyleLeft}" Width="70" />
<DataGridTextColumn Binding="{Binding Name}" Header="名稱" IsReadOnly="True" ElementStyle="{StaticResource textColStyleLeft}" Width="110" />
<DataGridTextColumn Binding="{Binding Temperature}" Header="溫度" IsReadOnly="True" ElementStyle="{StaticResource textColStyleLeft}" Width="110"/>
<DataGridTextColumn Binding="{Binding Waterlevel}" Header="水位" IsReadOnly="True" ElementStyle="{StaticResource textColStyleLeft}" Width="110" />
<DataGridTextColumn Binding="{Binding Speed}" Header="轉(zhuǎn)速" IsReadOnly="True" ElementStyle="{StaticResource textColStyleLeft}" Width="110"/>
<DataGridTextColumn Binding="{Binding Corner}" Header="轉(zhuǎn)角" IsReadOnly="True" ElementStyle="{StaticResource textColStyleLeft}" Width="110" />
<DataGridTextColumn Binding="{Binding Inserttime,StringFormat='yyyy年MM月dd日HH時(shí)mm分'}" Header="創(chuàng)建時(shí)間" IsReadOnly="True" ElementStyle="{StaticResource textColStyleLeft}" Width="*" />
</DataGrid.Columns>
</DataGrid>
<!--第2列布局：圖形列表-->
<Grid Grid.Column="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="641*"/>
<ColumnDefinition Width="74*"/>
</Grid.ColumnDefinitions>
<!--柱狀圖-->
<!--LegendLocation圖例位置，Series序列綁定vm中的HouseSeriesList屬性 -->
<lvc:CartesianChart Series="{Binding HouseSeriesList}" LegendLocation="Top" Margin="10,10,10,10" Grid.ColumnSpan="2">
<!--X坐標(biāo)-->
<lvc:CartesianChart.AxisX>
<lvc:Axis Labels="{Binding Labels}" FontSize="14" Position="LeftBottom" Foreground="Black" >
<!--分隔線-->
<lvc:Axis.Separator>
<lvc:Separator Stroke="LightBlue" StrokeThickness="2"/>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<!--Y坐標(biāo)-->
<lvc:CartesianChart.AxisY>
<lvc:Axis Title="最新運(yùn)行數(shù)據(jù)" FontSize="14" Position="LeftBottom" Foreground="DarkSlateBlue" ShowLabels="True">
<lvc:Axis.Separator>
<lvc:Separator Step="4" Stroke="LightBlue" StrokeThickness="1"/>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</Grid>
</Grid>
</Window>
5.3 主界面視圖模型
所有的邏輯業(yè)務(wù)處理寫在這個(gè)viewmodel中，這是wpf中的mvvm的數(shù)據(jù)驅(qū)動(dòng)控件，強(qiáng)大的屌。
6、運(yùn)行軟件
因?yàn)楝F(xiàn)在還沒有連接PLC
連接加載實(shí)時(shí)數(shù)據(jù)，這里設(shè)置的每5秒讀取PLC數(shù)據(jù)，存入到DB中，并顯示在圖形上，同時(shí)左邊表格的鼠標(biāo)滑動(dòng)的樣式效果。
?
數(shù)據(jù)準(zhǔn)確無誤，這個(gè)livechart圖形控件很強(qiáng)大，這里只使用了柱狀圖，還有很多圖。
3、小結(jié)?
以上是常規(guī)的應(yīng)用，只起到拋磚引玉的作用，還有很多功能可以擴(kuò)展做，如打印，導(dǎo)出，日志，分頁，登錄，授權(quán)等很多，希望這個(gè)例子可以幫到小伙伴。
打字不易，截圖不易，代碼不易，準(zhǔn)備不易，原創(chuàng)不易，多多點(diǎn)贊收藏，江湖有你，共同致富。文章來源：http://www.zghlxwxcb.cn/news/detail-794831.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-794831.html
到了這里，關(guān)于C#上位機(jī)與歐姆龍PLC的通信12----【再爆肝】上位機(jī)應(yīng)用開發(fā)(WPF版)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
