Desenvolvimento de GUI com Rx.NET e ReactiveUI

Desafio

  1. A interface do programa deve conter 3 campos de texto e 1 rótulo de texto.
  2. O rótulo de texto deve exibir a soma dos 3 campos de texto em tempo real.
  3. Se um campo de texto contiver um valor não numérico, ele deve ser considerado como 0.
  4. Os valores iniciais dos 3 campos de texto devem ser 1, 2 e 3 respectivamente.

Configuração do Projeto

Abra o Visual Studio e selecione File / New / Project... Crie um novo aplicativo WPF com o nome RxExample.

Instalação das Bibliotecas

Abra o gerenciador de pacotes NuGet, pesquise e instale os pacotes ReactiveUI e ReactiveUI.Fody.

Modelo de Visualização

Adicioen uma classe AppViewModel ao projeto com o segiunte conteúdo:


using ReactiveUI;
using ReactiveUI.Fody.Helpers;

namespace RxExample
{
    public class AppViewModel : ReactiveObject
    {
        [Reactive]
        public string Valor1 { get; set; } = "1";

        [Reactive]
        public string Valor2 { get; set; } = "2";

        [Reactive]
        public string Valor3 { get; set; } = "3";

        public string Soma { [ObservableAsProperty] get; }

        public AppViewModel()
        {
            int converterParaInteiro(string entrada) =>
                int.TryParse(entrada, out var resultado) ? resultado : 0;

            this.WhenAnyValue(x => x.Valor1, x => x.Valor2, x => x.Valor3,
                (num1, num2, num3) => (converterParaInteiro(num1) + converterParaInteiro(num2) + converterParaInteiro(num3)).ToString())
                .ToPropertyEx(this, x => x.Soma);
        }
    }
}

Janela Principal

Substitua o conteúdo do arquivo MainWindow.xaml pelo seguinte código:


<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="Janela Principal" 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 Valor1, UpdateSourceTrigger=PropertyChanged}" Width="120" TextAlignment="Right"/>
        <TextBox Grid.Column="1" Margin="10" Grid.Row="1" Text="{Binding Valor2, UpdateSourceTrigger=PropertyChanged}" Width="120" TextAlignment="Right"/>
        <TextBlock Margin="10" Grid.Row="2" Text="+" />
        <TextBox Grid.Column="1" Margin="10" Grid.Row="2" Text="{Binding Valor3, UpdateSourceTrigger=PropertyChanged}" Width="120" TextAlignment="Right"/>
        <TextBlock Grid.Column="1" Margin="10" Grid.Row="3" Text="{Binding Soma}" TextAlignment="Right"/>
    </Grid>
</Window>

Abra o arquivo MainWindow.xaml.cs e adicione o seguinte código no construtor da classe MainWindow:


DataContext = new AppViewModel();

Tags: ReactiveUI Rx.NET WPF ProgramaçãoReativa CSharp

Publicado em 6-1 10:03 por Thomas