5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Prism+ReactivePropertyで簡単WPFアプリケーション開発

Posted at

#プロジェクトを立ち上げる
image.png

#NuGetでパッケージをインストール
プロジェクトを右クリックして、「NuGetパッケージの管理」から、Prism.CoreとPrism.Unity、ReactivePropertyをインストールする。
image.png

##ViewModelを作成

ViewModelの基底クラスViewModelBase.csを作成。


    using System;
    using System.Reactive.Disposables;
    using Prism.Mvvm;

    public abstract class ViewModelBase : BindableBase, IDisposable
    {

        public ViewModelBase(){ }

        #region "IDisposable"

        public CompositeDisposable disposedValue = new CompositeDisposable();

        protected virtual void Dispose(bool disposing)
        {
            this.disposedValue.Dispose();
        }

        public void Dispose()
        {
            // このコードを変更しないでください。クリーンアップ コードを 'Dispose(bool disposing)' メソッドに記述します
            Dispose(disposing: true);
            GC.SuppressFinalize(this);
        }
        #endregion

MainVindowのViewModelを作成する(MainVindowViewModel.cs)。


    using Reactive.Bindings;
    using Reactive.Bindings.Extensions;

    public class MainWindowViewModel: ViewModelBase
    {
        public MainWindowViewModel() : base()
        {

            // テキスト
            this.Text = new ReactiveProperty<string>("ボタンを押してみてください。")
                .SetValidateAttribute(() => this.Text)
                .AddTo(this.disposedValue);

            // ボタン
            // Textプロパティにエラーがなくなったらアクティブになる。
            this.RunCommand = new[]
            {
                this.Text.ObserveHasErrors
            }
            .CombineLatestValuesAreAllFalse()
            .ToAsyncReactiveCommand()
            .WithSubscribe(async () =>
            {
                // ボタン押下した時の処理
                await Task.Run(() =>
                {
                    this.Text.Value = "ボタンを押しました。";
                });
            })
            .AddTo(this.disposedValue);
        }

        public ReactiveProperty<string> Text { get; }

        public AsyncReactiveCommand RunCommand { get; }

    }

#App

App.xaml

<prism:PrismApplication 
    x:Class="WpfApp1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApp1"
    xmlns:prism="http://prismlibrary.com/">
    <Application.Resources>
         
    </Application.Resources>
</prism:PrismApplication>

App.cs


    using System.Windows;
    using Prism.Unity;
    using Prism.Ioc;
    using Prism.Mvvm;

    /// <summary>
    /// App.xaml の相互作用ロジック
    /// </summary>
    public partial class App : PrismApplication
    {
        protected override Window CreateShell()
        {
            return Container.Resolve<MainWindow>();
        }

        protected override void ConfigureViewModelLocator()
        {
            base.ConfigureViewModelLocator();
            ViewModelLocationProvider.Register<MainWindow, MainWindowViewModel>();
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            base.ConfigureViewModelLocator();
        }
    }

ここで、いったんビルドする。

#MainWindow
ウインドウにテキストとボタンを配置して、ViewModelのプロパティとデータバインドする。

<Window x:Class="WpfApp1.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:prism="http://prismlibrary.com/"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="MainWindow" Height="150" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <!-- ViewModelのTextプロパティとバインドする -->
        <TextBlock Grid.Row="0" Text="{Binding Path=Text.Value,Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
        <!-- ViewModelのRunCommandプロパティとバインドする -->
        <Button Grid.Row="1" Content="ボタン" 
                Command="{Binding Path=RunCommand}"/>
    </Grid>
</Window>


動作確認

デバッグで動作確認してみる。

image.png
↓↓↓ボタンを押すと↓↓↓
image.png

OK!

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?