【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() { //ボタンが押下された際の処理 } } }
実行結果
実行結果はこのようになります。
「活性」ラジオボタンが押下されているときは、ボタンが活性化しています。
「非活性」ラジオボタンが押下されているときは、ボタンが非活性化しています。
サンプルコード
以下に公開しています。
https://github.com/Keenag/SampleCode/tree/master/ReactiveCommandSample