ReactiveX 学习笔记(21)使用 Rx.NET + ReactiveUI 进行 GUI 编程

课题

  1. 程序界面由3个文本编辑框和1个文本标签组成。
  2. 要求文本标签实时显示3个文本编辑框所输入的数字之和。
  3. 文本编辑框输入的不是合法数字时,将其值视为0。
  4. 3个文本编辑框的初值分别为1,2,3。

创建工程

打开 Visual Studio,File / New / Project...

新建一个名为 RxExample 的 WPF 应用程序。

ReactiveUI

打开 NuGet 包管理器,搜索并安装 ReactiveUI 以及 ReactiveUI.Fody 这两个包。

AppViewModel

在工程中添加 AppViewModel 类,内容如下

using ReactiveUI;
using ReactiveUI.Fody.Helpers; namespace RxExample
{
public class AppViewModel : ReactiveObject
{
[Reactive]
public string Number1 { get; set; } = "1"; [Reactive]
public string Number2 { get; set; } = "2"; [Reactive]
public string Number3 { get; set; } = "3"; public string Result { [ObservableAsProperty] get; } public AppViewModel()
{
int f(string s) =>
int.TryParse(s, out var o) ? o : 0; this.WhenAnyValue(x => x.Number1, x => x.Number2, x => x.Number3,
(s1, s2, s3) => (f(s1) + f(s2) + f(s3)).ToString())
.ToPropertyEx(this, x => x.Result);
}
}
}

MainWindow

将程序界面 MainWindow.xaml 的内容改为

<Window x:Class="RxExample.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:RxExample"
mc:Ignorable="d"
Title="MainWindow" Height="200" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="1" Margin="10" Text="{Binding Number1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="120" TextAlignment="Right"/>
<TextBox Grid.Column="1" Margin="10" Grid.Row="1" Text="{Binding Number2, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="120" TextAlignment="Right"/>
<TextBlock Margin="10" Grid.Row="2" Text="+" />
<TextBox Grid.Column="1" Margin="10" Grid.Row="2" Text="{Binding Number3, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="120" TextAlignment="Right"/>
<TextBlock Grid.Column="1" Margin="10" Grid.Row="3" Text="{Binding Result}" TextAlignment="Right"/>
</Grid>
</Window>

打开 MainWindow.xaml.cs 文件,在 MainWindow的构造方法中添加以下代码

DataContext = new AppViewModel();
上一篇:SVN Access to ‘/svn/Test/!svn/me’ forbidden,不能更新解决办法


下一篇:CodeVs.2370 小机房的树 ( LCA 倍增 最近公共祖先)