【C#】【WPF】ItemsControlが空かどうかでボタンの活性非活性を制御したい

Question

【やろうとしていること】
画面のItemsControlのItemSourceにObservableCollection 〈Person〉を指定しています。
画面に追加ボタンとクリアボタンの2つのボタンを配置しています。
初期表示ではObservableCollectionは空で、
追加を押すとPersonクラスの名前とIDを画面表示し、クリアボタンを押すと全消しします。
中身が空の状態ではクリアボタンを非活性としたいです。

【困っていること】
クリアボタンのIsEnabledプロパティをバインドしています。
今のやり方は、追加ボタンクリック時のCommandで上記IsEnAbledをtrueにする、クリックボタンクリック時のCommandでfalseに倒すというやり方を取っています。
ObservableCollectionの中身が空かどうかで判断出来ればスマートだと思うのですが、良いやり方はありますでしょうか。

Answer 1

スタイルを使った方法です。

<Button Content="クリア">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="IsEnabled" Value="True"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Persons}" Value="{x:Null}">
                    <Setter Property="IsEnabled" Value="False"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Persons.Count}" Value="0">
                    <Setter Property="IsEnabled" Value="False"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Comments

[Zuishin]

コレクションの中身が空かどうかではなく、プロパティが null かどうかでチェックされていますが、そうすると要素数が 0 の時にクリアボタンが有効になってしまいます。
削除時に要素数をチェックして 0 なら null にする処理が必要になりますし、追加時に null チェックが必要になるので、処理が少し煩雑になるのではないでしょうか。
またコマンドの有効無効とボタンの有効無効にずれが生じるのも気になります。

[galmacher]

hihijijiさん
ご回答ありがとうございます。
DataTriggerを使ったことがあまりなかったので、これを機会に色々と調べてみます。

[hihijiji]

０を考慮してなかったので修正しました。
Countにも変更通知が付いているのでそのままバインドできます。

Answer 2

CanExecute を実装したコマンドをバインドしてください。

#追記

次のコードでは、起動時に People に要素が一つ入っているのでクリアボタンが有効です。それを押すと People がクリアされてボタンが無効になります。

MainWindow.xaml

<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:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Grid>
        <Button Command="{Binding ClearCommand}">Clear</Button>
    </Grid>
</Window>

ViewModel.cs

using Reactive.Bindings;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Linq;
using System.Reactive.Linq;
using System.Runtime.CompilerServices;

namespace WpfApp1
{
	public class ViewModel : INotifyPropertyChanged
	{
		public event PropertyChangedEventHandler PropertyChanged;
		protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null)
		{
			PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
		}

		public ObservableCollection<string> People { get; } = new ObservableCollection<string>();

		public ReactiveCommand ClearCommand { get; private set; }

		public ViewModel()
		{
			ClearCommand = Observable
				.FromEventPattern<NotifyCollectionChangedEventArgs>(People, nameof(People.CollectionChanged))
				.Select(_ => People.Count > 0)
				.ToReactiveCommand(false);
			ClearCommand.Subscribe(People.Clear);
			People.Add("who");
		}
	}
}

Comments

[Zuishin]

ReactiveCommand だと簡単です。RoutedCommand でもできますが、CanExecuteChanged を発行するのが煩わしいです。

[galmacher]

ご回答ありがとうございます。
ReactiveCommandを使ってやってみたいと思います。
やり方としては以下のようになるのかなと思っています。
クリアボタンのCommand = ReactiveProperty<bool>.ToReactiveCommand();
・上記のイメージであっておりますか。
・その場合、 ReactiveProperty<bool>のtrue/falseをObservableCollectionのCountプロパティを見て切り替えることが必要だと思いますが、どのように実現すればよいでしょうか。

[Zuishin]

サンプルを追記しました。

[Zuishin]

ReactiveProperty<bool>のtrue/false は必要ありません。ボタンはコマンドの CanExecute によって自動的に有効・無効になります。
他で必要ならば これと同様に.ToReactiveCommand(false) を .ToReactiveProperty(false) にして ReactiveProperty<bool> を作ってください。

[galmacher]

毎度サンプルありがとうございます。
Countというint型の変更通知をどうやって受ければいいのだろうと思っていたのですが、
Collectionの変更通知が発生した際にCountの中身を見に行くという理解です。
勉強になります。ありがとうございました。

Answer 3

ItemsControlが空かどうかでボタンの活性非活性を制御したい

Button.IsEnabledにItemsControl.HasItemsをバインドするのが簡単です。
ItemsControl.HasItems Property (System.Windows.Controls) | Microsoft Learn

<Window
  x:Class="Q164167.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="800"
  Height="450"
  ThemeMode="System">
  <DockPanel>
    <UniformGrid DockPanel.Dock="Bottom" Rows="1">
      <Button HorizontalAlignment="Stretch" Click="AddButton_Click" Content="Add" />
      <Button
        HorizontalAlignment="Stretch"
        Click="ClearButton_Click"
        Content="Clear"
        IsEnabled="{Binding HasItems, ElementName=itemsControl}" />
    </UniformGrid>
    <ItemsControl x:Name="itemsControl" ItemsSource="{Binding People}" />
  </DockPanel>
</Window>

using System.Collections.ObjectModel;
using System.IO;
using System.Windows;

namespace Q164167;

public partial class MainWindow : Window
{
    public ObservableCollection<Person> People { get; } = [];

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
    }

    private void AddButton_Click(object sender, RoutedEventArgs e)
        => People.Add(new($"{People.Count + 1}", Path.GetRandomFileName()[..8]));
    private void ClearButton_Click(object sender, RoutedEventArgs e) => People.Clear();
}

public record Person(string Id, string Name);

---

Countというint型の変更通知をどうやって受ければいいのだろうと思っていた

ObservableCollectionはINotifyPropertyChangedも実装しますが、明示的な実装なのでキャストする必要があります。

((INotifyPropertyChanged)People).PropertyChanged += (s, e) => { };

ObservableCollection<T>.INotifyPropertyChanged.PropertyChanged イベント (System.Collections.ObjectModel) | Microsoft Learn