1、上圖看效果

今天要做的一個案例是這樣的效果，它能實時監(jiān)測車間設備有關數(shù)據(jù)，并以表格和圖形顯示在界面上，這個比上個案例要復雜些，顏值也高些，通過這個來鞏固wpf的技能，用到了命令綁定，樣式資源，表格數(shù)據(jù)，圖形控件livechart。將前面25的內(nèi)容熟悉起來，就可以自己動手做這個案例了。

2、創(chuàng)建wpf項目

?

3、 UI布局分析

整個界面是一個表格，表格分二行，第一行是標題欄，第二行是數(shù)據(jù)欄，

第二行分2列，第1列放表格控件，第2列放圖形控件

第一行分7列，放7個控件

?

1、?第一行

2、第二行

?

?

WPF中的布局是表格布局風格，通過一個個的細化組合形成UI，完整代碼如下，大家可以仔細看看，注釋都有，仔細體會下，不算難：

<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="煅燒車間運行監(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>
        <!--第一行標題-->
        <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對象各個屬性-->
                    <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="轉速"  IsReadOnly="True"  ElementStyle="{StaticResource textColStyleLeft}"  Width="110"/>
                    <DataGridTextColumn Binding="{Binding Corner}" Header="轉角"  IsReadOnly="True"  ElementStyle="{StaticResource textColStyleLeft}"  Width="110" />
                    <DataGridTextColumn Binding="{Binding Inserttime,StringFormat='yyyy年MM月dd日HH時mm分'}" Header="創(chuàng)建時間"  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坐標-->
                    <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坐標-->
                    <lvc:CartesianChart.AxisY>
                        <lvc:Axis Title="最新運行數(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>

3、樣式資源

樣式文件就是WEB中的css屬性設置，需要精細的考慮，軟件的界面就是一個人的顏值，可以看看，用的時候改改。

?

<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>
                        <!--鼠標放上去時的觸發(fā)器-->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="White" ></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter> 
    </Style>

    <!--TextBox默認樣式-->
    <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默認樣式-->
    <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默認樣式-->
    <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>

?

<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>

4、視圖模型

視圖模型的意思是指UI界面與后臺的哪個模型類綁定起來，業(yè)務邏輯由視圖模型來決定，前臺的UI界面只負責數(shù)據(jù)的渲染，這里都是命令綁定和屬性綁定。

?

?1、命令綁定

2、屬性綁定

?

這里是圖形的參數(shù)綁定后臺屬性，意思是一樣的。注意什么時候用雙向，單向。當后臺邏輯數(shù)據(jù)發(fā)生更改時，需要更新UI控件就使用雙向綁定。

可以看下這些

WPF真入門教程19--對象數(shù)據(jù)綁定_wpf 查詢綁定對象-CSDN博客

WPF真入門教程18--XML數(shù)據(jù)綁定_wpf xml-CSDN博客

WPF真入門教程17--雙向數(shù)據(jù)綁定_wpf 雙向綁定-CSDN博客

WPF真入門教程16--簡單數(shù)據(jù)綁定_wpf中的textblock怎么綁定變量-CSDN博客

WPF真入門教程15--什么是數(shù)據(jù)綁定？_數(shù)據(jù)插入的時候提示綁定數(shù)值是什么-CSDN博客

5、運行起來

?這里面用到異步task，而不是winform中的定時器。

?希望幫到你，就是我最大的支柱，動動您的金手指，創(chuàng)作不易，整理不易，多多給矛點擊支持，發(fā)財?shù)男∈种竸悠饋怼?mark hidden color="red">文章來源：http://www.zghlxwxcb.cn/news/detail-790966.html

文章來源地址http://www.zghlxwxcb.cn/news/detail-790966.html

到了這里，關于WPF真入門教程27--項目案例--設備數(shù)據(jù)實時監(jiān)測的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！