◇Pile Up◇ --Keenag Blog--

プログラミング備忘録ブログです。C#、WPFの記事が中心となります。

【WPF】ReactivePropertyを使用してボタンの活性非活性を制御する方法

ReactivePropertyはMVVM+リアクティブプログラミングを快適にサポートしてくれるライブラリです。
今回は、ReactivePropertyを使用して、ボタンの制御サンプルを作ってみたので、備忘録として残したいと思います。

なお、ReactivePropertyについてもっと知りたい方は、MVVMをリアクティブプログラミングで快適にReactivePropertyオーバービューをご覧になってみてください。

では、サンプルプログラムを見ていきましょう。

MainWindow.xaml

MainWindow.xamlクラスには、ボタンの活性、非活性を制御するグルーピングされた「活性」ラジオボタン、「非活性」ラジオボタンを配置します。 「活性」ラジオボタンのIsCheckedプロパティには、IsActiveをバインディングしています。 ボタンには、CommandプロパティにHogeCommandをバインディングしています。

<Window x:Class="ReactiveCommandSample.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="ReactiveCommandSample"
        Height="350"
        Width="525"
        Background="LightSlateGray">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <RadioButton Grid.Row="0"
                     Grid.Column="1"
                     Content="活性"
                     VerticalAlignment="Bottom"
                     HorizontalAlignment="Left"
                     TabIndex="0"
                     HorizontalContentAlignment="Left"
                     VerticalContentAlignment="Center"
                     Padding="1"
                     GroupName="HogeRadio"
                     IsChecked="{Binding IsActive.Value}"
                     Height="27"
                     Width="126"
                     FocusVisualStyle="{x:Null}"
                     />
        <RadioButton Grid.Row="1"
                     Grid.Column="1"
                     Content="非活性"
                     VerticalAlignment="Bottom"
                     HorizontalAlignment="Left"
                     TabIndex="1"
                     VerticalContentAlignment="Center"
                     GroupName="HogeRadio"
                     Height="27"
                     Width="139"
                     FocusVisualStyle="{x:Null}"
                     />
        <Button Grid.Row="2"
                Grid.Column="1"
                Content="Button"
                HorizontalAlignment="Left"
                VerticalAlignment="Bottom"
                Width="99"
                Height="34"
                Command="{Binding HogeCommand}"/>
    </Grid>
</Window>

MainWindowViewModel.cs

MainWindowViewModelクラスでは、「活性」ボタンの変更通知を受け取るReactiveProperttyのIsActiveを定義します。また、ReactiveCommandのHogeCommandを定義します。
HogeCommandは、IsActiveがTrueの時のみ(「活性」ボタンが選択されている時のみ)活性化し、押下された際はOnClickメソッドが呼ばれます。

using Prism.Mvvm;
using Reactive.Bindings;
using System.Reactive.Linq;

namespace ReactiveCommandSample.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        public ReactiveProperty<bool> IsActive { get; } = new ReactiveProperty<bool>(true);
        public ReactiveCommand HogeCommand { get; }

        public MainWindowViewModel()
        {
            HogeCommand = IsActive.Select(x => x == true).ToReactiveCommand();
            HogeCommand.Subscribe(OnClick);
        }

        public void OnClick()
        {
            //ボタンが押下された際の処理
        }
    }
}

実行結果

実行結果はこのようになります。
「活性」ラジオボタンが押下されているときは、ボタンが活性化しています。 f:id:Keenag:20171008225521p:plain

「非活性」ラジオボタンが押下されているときは、ボタンが非活性化しています。 f:id:Keenag:20171008225611p:plain

サンプルコード

以下に公開しています。
https://github.com/Keenag/SampleCode/tree/master/ReactiveCommandSample