作者 | 主题 |
---|---|
宝冬 至圣 经验值:10190 发帖数:1530 精华帖:30 |
楼主 2020-02-01 21:48:48
主题:WPF中的MVVM模式 过节闲着无聊,做了一个和上位机开发有关的小测试。 上位机的开发有BS和CS模式,我个人倾向CS,采用.Net上的WPF,可以做漂亮界面。 软件开发存在多种设计模式,这里是用一个小实验来测试和学习一下时下流行的MVVM开发模式。
在MVVM模式下,UI(也就是View)是完全和后台剥离的,只通过底层暴露的接口与后台关联。UI只与视觉和交互有关,界面的数据结构被抽象为ViewModel。这样的好处是结构的清晰简化、可扩展性和可维护性很好,尤其是UI的可变化性非常灵活。ViewModel和后台业务,也就是Model、Service 和数据库,进行交互。和PLC的通信属于Service的一部分。 其实类似的分离设计模式MVC、MVP等也有一些,MVVM的关键点就在于:ViewModel是和界面去耦合的,它通过事件发布接口数据的变化,而不去调用界面。 MVVM模式的精华部分就在View和ViewModel之间的关系处理,底层业务Model部分其实和其它的分离开发模式一样。在这个简单的小例子中只测试了View和ViewModel之间的实现,没有涉及任何底层的业务,为的是关注重点。
1、View部分的代码:这个小测试采用的界面很简单,几个滑杆用于体现数值变化,几个按钮。数值输入,加法结果返回。还有其它几个命令按钮。 <Window x:Class="WpfApp01.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:WpfApp01" xmlns:vm="clr-namespace:WpfApp01.ViewModels" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525">
<Window.DataContext> <vm:MainWindowViewModel/> </Window.DataContext> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Menu> <MenuItem Header="_Save" Command="{Binding CommandPopDiag}" IsEnabled="{Binding EnableFlag}" /> </Menu> <Grid Grid.Row="1"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Slider x:Name="slider1" Grid.Row="0" Background="LightBlue" Minimum="-100" Maximum="100" Margin="4" Value="{Binding Input1}"/> <Slider x:Name="slider2" Grid.Row="1" Background="LightBlue" Minimum="-100" Maximum="100" Margin="4" Value="{Binding Input2}"/> <Slider x:Name="slider3" Grid.Row="2" Background="LightBlue" Minimum="-100" Maximum="100" Margin="4" Value="{Binding Result}"/> <Button x:Name="addButton" Grid.Row="3" Content="Add" Width="120" Margin="42,20,355,158" Command="{Binding CommandAdd}" IsEnabled="{Binding EnableFlag}"/> <Button x:Name="MsgButton" Grid.Row="3" Content="Msg" Width="120" Margin="185,20,212,158" Command="{Binding CommandMsg}" CommandParameter="20" IsEnabled="{Binding EnableFlag}"/> <Button x:Name="Button2" Grid.Row="3" Content="b" Width="120" Margin="337,20,60,158" Command="{Binding ButtonCommand2}" IsEnabled="{Binding EnableFlag}" CommandParameter="{Binding RelativeSource={x:Static RelativeSource.Self}}"/> <Button x:Name="LockButton" Grid.Row="3" Content="Lock" Width="120" Margin="185,129,212,48" Command="{Binding CommandEnable}" /> </Grid> </Grid> </Window> |