ReactiveProperty バリデーション 画面起動前に値をセットすると赤枠が消えない

Question

前提・実現したいこと

ReactivePropertyの勉強をしています。
ReactivePropertyでバリデーションを設定しているのですが、予め登録されているデータを編集ボタンでメモリ上の値をTextBoxに表示する動きを想定しているのですが、画面描画前に値を設定するとエラーになっていないはずがTextBoxが赤枠で表示されてしまいます。

使用環境
VisualStudio2019
.NETFramework4.7.2
ReactivePropertyv7.8.0

該当のソースコード

<Window x:Class="ReactivePropertyTestApp.View.ValidationListWindow"
        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:ReactivePropertyTestApp.View"
        xmlns:vm="clr-namespace:ReactivePropertyTestApp.ViewModel"
        mc:Ignorable="d"
        Title="ValidationListWindow" Height="450" Width="800">

    <Window.DataContext>
        <vm:ValidationListViewModel/>
    </Window.DataContext>
    
    <Grid>
        <StackPanel>
            <ListBox ItemsSource="{Binding TestListVM}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}"/>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <Button Content="追加" Click="Button_Click" Width="70" Height="30"/>
            <Button Content="編集" Click="Button_Click_1" Width="70" Height="30"/>
        </StackPanel>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace ReactivePropertyTestApp.View
{
    /// <summary>
    /// ValidationListWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class ValidationListWindow : Window
    {
        public ValidationListWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ValidationTestWindow validationTestWindow = new ValidationTestWindow(0);
            validationTestWindow.ShowDialog();
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            ValidationTestWindow validationTestWindow = new ValidationTestWindow(1);
            validationTestWindow.ShowDialog();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Collections.ObjectModel;

using ReactivePropertyTestApp.Model;
using Reactive.Bindings;

namespace ReactivePropertyTestApp.ViewModel
{
    class ValidationListViewModel
    {
        public ReadOnlyReactiveCollection<Test> TestListVM { get; }

        public ValidationListViewModel()
        {
            TestListVM = TestData.Instance.TestList.ToReadOnlyReactiveCollection();
        }
    }
}

<Window x:Class="ReactivePropertyTestApp.View.ValidationTestWindow"
        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:ReactivePropertyTestApp.View"
        xmlns:vm="clr-namespace:ReactivePropertyTestApp.ViewModel"
        mc:Ignorable="d"
        Title="ValidationTestWindow" Height="450" Width="800">

    <Window.DataContext>
        <vm:ValidationTestWindowViewModel/>
    </Window.DataContext>
    
    <Grid>
        <StackPanel VerticalAlignment="Center">
            <TextBox Width="200" Height="30" VerticalContentAlignment="Center"
                     Text="{Binding NameTextBox.Value,UpdateSourceTrigger=PropertyChanged}"
                     ToolTip="{Binding NameValidationErrorMessage.Value}"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Content="保存" Width="50" Height="30" Click="Button_Click"/>
                <Button Content="入れ替え" Width="50" Height="30" Click="Button_Click_1"/>

            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

using ReactivePropertyTestApp.ViewModel;

namespace ReactivePropertyTestApp.View
{
    /// <summary>
    /// ValidationTestWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class ValidationTestWindow : Window
    {
        private ValidationTestWindowViewModel viewModel;

        public ValidationTestWindow(int pMode)
        {
            InitializeComponent();
            viewModel = this.DataContext as ValidationTestWindowViewModel;
            if (pMode == 1)
            {
                viewModel.nameChange();
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            viewModel.saveName();
            this.Close();
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            viewModel.nameChange();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

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

using ReactivePropertyTestApp.Model;

namespace ReactivePropertyTestApp.ViewModel
{
    class ValidationTestWindowViewModel : ViewModelBase
    {
        [NameValidation]
        public ReactiveProperty<string> NameTextBox { get; set; }
        public ReadOnlyReactivePropertySlim<string> NameValidationErrorMessage { get; }

        public ValidationTestWindowViewModel()
        {
            NameTextBox = new ReactiveProperty<string>().SetValidateAttribute(() => NameTextBox).AddTo(Disposables);
            NameValidationErrorMessage = NameTextBox.ObserveValidationErrorMessage().ToReadOnlyReactivePropertySlim();
        }

        public void nameChange()
        {
            NameTextBox.Value = TestData.Instance.TestList[0].Name;
        }

        public void saveName()
        {
            TestData.Instance.TestList.Add(new Test() { Name = NameTextBox.Value });
        }
    }
}

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ReactivePropertyTestApp.Model
{
    class NameValidationAttribute : ValidationAttribute
    {
        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            var inputValue = value as string;
            ErrorMessage = string.Empty;

            if (string.IsNullOrWhiteSpace(inputValue) == true)
            {
                return new ValidationResult("値を入力してください。");
            }

            if (inputValue.Count() > 8)
            {
                ErrorMessage = $"8文字以内で入力してください。";
            }

            if (string.IsNullOrEmpty(ErrorMessage) == true)
            {
                return ValidationResult.Success;
            }
            else
            {
                return new ValidationResult(ErrorMessage);
            }
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ReactivePropertyTestApp.Model
{
    class Test : BindableBase
    {
        private string name;
        public string Name
        {
            get { return name; }
            set { SetProperty(ref name, value); }
        }
    }
}

追加されているものを選択して編集ボタンを押すと

正常な値が入力されているが赤枠になってしまう。
ToolTipには何も表示されない。

不足している情報があればご指摘ください。

試したこと

NameTextBoxのHasErrorは値セット後falseになっていることは確認出来ました。
下記URLが似ている内容っぽいのですがコードが確認出来ないのと、内容があまり理解できていません。
https://github.com/runceel/ReactiveProperty/issues/85

この方法なら赤枠が表示されなくなる等の情報をお持ちでしたらご教示いただけないでしょうか。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

最終的な結論は当該issueを確認してください。
２枚目以降のウィンドウでバリデーションエラー赤枠が残る · Issue #258 · runceel/ReactiveProperty

対応版がリリースされました。
ReactiveProperty 7.10.0 をリリースしました
Getting start for WPF | ReactiveProperty documentation

全部書き換えたい気分ですが^^; 経緯が分からなくなってしまうので残します。
が、以下は見る必要はありません。

はっきり言って分かってませんが、

* ReactivePropertyMode.IgnoreInitialValidationErrorを入れる
* Validation.ErrorTemplateを設定する

どちらかをしたら消えました。

そういう仕様（という名のバグ？）な気がします（深堀する気はありません）
一番手間がかからなそうな回避策はこんなんでしょうか？（バカバカしいがw

<Window.Resources>
  <Style BasedOn="{StaticResource {x:Type TextBox}}" TargetType="{x:Type TextBox}">
    <Style.Triggers>
      <Trigger Property="Validation.HasError" Value="False">
        <Setter Property="Validation.ErrorTemplate" Value="{x:Null}" />
      </Trigger>
    </Style.Triggers>
  </Style>
</Window.Resources>

どこかに言及があると思いますし回避策も同じようなものだと思いますが、これといったところを見つけられませんでした^^;

---

最小限のコードを作って検証したところ、ReactivePropertyが何かおかしいです。
最初のWindowは問題ないのですが、そこからさらにWindowを開くと赤枠が残ります。

すべて最新版を使用、.NET48・.NET5とも同様。比較相手は↓です。
NuGet Gallery | CommunityToolkit.Mvvm 7.0.1
ObservableValidator - Windows Community Toolkit | Microsoft Docs

<Window
  x:Class="Questions334418.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Questions334418"
  Width="800"
  Height="450">
  <Window.DataContext>
    <local:ViewModel />
  </Window.DataContext>
  <StackPanel VerticalAlignment="Center">
    <Button Click="Button_Click" Content="open" />
    <TextBox Text="{Binding RP_Text.Value, UpdateSourceTrigger=PropertyChanged}" />
    <TextBox Text="{Binding OV_Text, UpdateSourceTrigger=PropertyChanged}" />
  </StackPanel>
</Window>

using CommunityToolkit.Mvvm.ComponentModel;
using Reactive.Bindings;
using System.ComponentModel.DataAnnotations;
using System.Windows;

namespace Questions334418
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // xamlのWindow.DataContextが残っていると上書きしようがおかしなまま。
            //DataContext = new ViewModel();

            var vm = DataContext as ViewModel;
            vm.RP_Text.Value = "a";
            vm.OV_Text = "a";
        }

        private void Button_Click(object sender, RoutedEventArgs e) => new MainWindow().Show();
    }

    public class ViewModel : ObservableValidator
    {
        [Required(ErrorMessage = "値を入力してください。")]
        //[StringLength(8, ErrorMessage = "8文字以内で入力してください。")]
        public ReactiveProperty<string> RP_Text { get; }

        [Required(ErrorMessage = "値を入力してください。")]
        //[StringLength(8, ErrorMessage = "8文字以内で入力してください。")]
        public string OV_Text { get => text; set => SetProperty(ref text, value, true); }
        private string text;

        public ViewModel() => RP_Text = new ReactiveProperty<string>().SetValidateAttribute(() => RP_Text);
    }
}

---

コードでDataContextを設定するという回避法はあんまりなので（DIできないし挙動が変わるというのも気持ちが悪い）、ImmediateSchedulerを指定するのがいいのかもしれません。
それによりDataContextの設定方法によらず同じ挙動になりました。

ただしUIスレッドを複数作ってはいけない等の制限事項があります。
UI スレッドへのイベントの自動ディスパッチ

Comments

[dai49]

回答ありがとうございます。
IgnoreInitialValidationErrorは必須項目は最初からエラー表示させたほうが分かりやすいと思ったので見送りました。

Validation.ErrorTemplateで下記のように設定しましたが変わりませんでした。
どのように設定したかご教示いただけますでしょうか。
<Window.Resources>
<ControlTemplate x:Key="ValidationTemp">
<Border BorderBrush="Red"
BorderThickness="1"
Width="{Binding ElementName=adornedElement, Path=ActualWidth}"
Height="{Binding ElementName=adornedElement,Path=ActualHeight}"
>
<AdornedElementPlaceholder Name="adornedElement"/>
</Border>
</ControlTemplate>
</Window.Resources>

[TN8001]

> IgnoreInitialValidationErrorは必須項目は最初からエラー表示させたほうが分かりやすいと思ったので見送りました。

そうではないんです。私もそう思ったのですがやってみてください。

> どのように設定したかご教示いただけますでしょうか。

すいませんこれは消えたように見えただけでした^^;

<Window.Resources>
<ControlTemplate x:Key="ValidationTemplate">
<StackPanel>
<ItemsControl ItemsSource="{Binding AdornedElement.(Validation.Errors), ElementName=adornedelem}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Foreground="Red" Text="{Binding ErrorContent}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<AdornedElementPlaceholder x:Name="adornedelem" />
</StackPanel>
</ControlTemplate>
</Window.Resources>
<Grid>
<StackPanel VerticalAlignment="Center">
<TextBox
Width="200"
Height="30"
VerticalContentAlignment="Center"
Text="{Binding NameTextBox.Value, UpdateSourceTrigger=PropertyChanged}"
ToolTip="{Binding NameValidationErrorMessage.Value}"
Validation.ErrorTemplate="{StaticResource ValidationTemplate}" />

[dai49]

回答ありがとうございます。
編集ボタンでの動作で赤枠が表示されないのはいいのですが、画像二枚目のWindowを追加ボタンと編集ボタンで使いまわしていて、.IgnoreInitialValidationErrorを指定してしまうと追加ボタンの時にTextBoxが空でもエラーにならないので、それを避けるのと何か設定不足や間違いがあると思い質問させていただきました。
説明不足で申し訳ございません。

[TN8001]

失礼しました。編集ばかりあれこれやってましたｗ

なるほどなかなか根深そうですね。
かずきさんでもわからないとなると、私程度ではどうにもなりそうにありません^^;

（動作不良時に）目立たないErrorTemplateを当てるぐらいしか思いつきませんね。。。

[dai49]

回答ありがとうございます。
編集していただいたコードでも赤枠は消えませんでした。
色々試していた結果、いまいち原因が分かっていませんが下記のように変更したら編集時も赤枠が消えました。
ValidationTestWindow.xamlの
<Window.DataContext>
<vm:ValidationTestWindowViewModel/>
</Window.DataContext>
を消して
d:DataContext="{d:DesignInstance vm:ValidationTestWindowViewModel}"
に変更し、コードビハインドでDataContextに代入する。
変更した経緯としましては、コンストラクタでの値変更は反映されるので引数で新規と編集で処理を分けようとしたためです。
コンストラクタを変更する前に動作させたら編集での赤枠表示が無くなっていました。
上記変更で正常になる要因についてお気づきになることがありましたらご教示いただけますでしょうか。

[TN8001]

スタイルはValidationTestWindowに入ってるんですよね？

「HasError=false だけど赤枠が残ってしまう」 という症状だから、

HasError じゃなかったら ErrorTemplate をなしにする

というバカバカしいトリガーなわけですが、それが効かないっていうのはちょっと考えにくいですねぇ。
何か提示コード外の要因があると思います。こちらでは再現できません。

> 上記変更で正常になる要因

原因はわかりました。理由はわかりません^^;
解消法はdai49さんの通り「xamlをやめる」です。

[Hey_CH]

こちらで同じ現象を再現できているかはわかりませんが、
XAMLをやめた場合「this.DataContext = viewModel;」のような感じにすると思うのですが
これを「InitializeComponent();」より上に記述すると、現象が再発しませんか？

現象が再発したとき「if (pMode == 1) viewModel.nameChange();」も「InitializeComponent();」より上に記述すると、赤枠が無くなる、という風になりました。

これが何を意味するかは僕には全くわかりません。
（詳しい人が見たら、あそこが悪いんじゃね？って気づく可能性）

[dai49]

TN8001様
別のStyleが当たっていたのが原因でした。
こちらでも赤枠が消えることが確認出来ました。
失礼いたしました。

Hey_CH様
こちらでも記載いただいた内容にすると現象が再現しました。
私も原因については分からないので、ひとまずはInitializeComponent();を行った後にDataContextへの代入を行う必要がありそうですね。

[TN8001]

直接聞いてみました。

[２枚目以降のウィンドウでバリデーションエラー赤枠が残る · Issue #258 · runceel/ReactiveProperty](https://github.com/runceel/ReactiveProperty/issues/258

[Hey_CH]

TN8001さん　ありがとうございます！

[Hey_CH]

new ReactiveProperty<string>(mode: ReactivePropertyMode.Default | ReactivePropertyMode.IgnoreInitialValidationError)を試してみたのですが
TN8001さんの最小限のコードではうまくいくのですが
質問者さんのコードでは、空文字列を追加した後、編集ボタンを押すと赤枠が表示されません。（報告）
【追記】
この赤枠が表示されない原因はViewModelのプロパティに「null」を設定するとIsValid関数自体が呼び出されない事によるものだという事がわかりました。（これで良いの？とは思うが、本件とは関係無し）

[dai49]

TN8001様
聞いていただきありがとうございます。

Hey_CH様
確か.IgnoreInitialValidationErrorは初回のエラーをスキップするというオプションだったと思いますので、初回のnullエラーはスキップされたため赤枠は表示されないのではないでしょうか。

[Hey_CH]

dai49さん
文字列が長い場合は赤枠が表示されるんですよね～。
【追記】した現象は、追加ボタンを押した後、何もせずに保存ボタンを押して追加後、編集ボタンを押すと赤枠が表示されないというものですね。
（空文字列が設定されてるかと思ってたらnullが設定されていて、その時IsValidが呼ばれない）
なので、この質問の問題とは別に「NameValidationのような事をする場合nullが設定されないようにしなければいけない」という事があるかもしれません。

[dai49]

初期値がnullのため、何も入力しないとnullで保存されてしまっていることと、mode: ReactivePropertyMode.Defaultが設定されているので、初期値null→nameChange()でnull代入で値が変化していないのでIsValidが呼ばれない？と思いました。
試しにReactivePropertyMode.Defaultを外したら
・追加画面では赤枠なし
・何もせずに保存ボタンを押して追加後、編集ボタンを押すと赤枠が表示されました。

[Hey_CH]

すいません、TN8001さんが書いてくださった最小限のコードでnullを設定したときIsValidが呼ばれなかったのでValidationAttributeの基本的動作が「nullが設定された場合IsValidを呼ばない動き」をするものだと思い込んでいました。
ReactivePropertyにおいてDefault（DistinctUntilChanged）では値が変わった時にIsValidを呼ぶんですね。
（但し、null以外の値からnullに変わった場合はIsValidは呼ばれない→ややこしい）
お騒がせして申し訳ありませんでした。

[dai49]

Hey_CH様
いえ、動作確認していただきありがとうございます。
null以外の値からnullに変わった場合はIsValidは呼ばれない動作になっているのですね。

[TN8001]

お忙しいようでissueへのリアクションをいただけていないのですが、私個人としてはこれで解決というか納得しました。

[２枚目以降のウィンドウでバリデーションエラー赤枠が残る · Issue #258 · runceel/ReactiveProperty](https://github.com/runceel/ReactiveProperty/issues/258#issuecomment-826304383

[okazuki0130]

Issue での報告ありがとうございました、この挙動を改善する方法を確認したので Issue のほうに記載してみました。

因みに、null 以外の値から null に変わったときに IsValid が呼ばれない件ですが、これって ValidationContext を直接使って null 値の入っているプロパティを検証してみても同じ挙動になりませんか？？

[dai49]

TN8001様
okazuki0130様
ご対応いただきありがとうございます。
いただいた対応方法で自分のコードでもTN8001様のコードでも期待通りの動作になることが確認出来ました。
ただ全く理解ができていないので、勉強します。

IsValid が呼ばれない件は先ほど動作確認してみたところ、こちらの環境だとnullのときもIsValidが呼ばれる動作になっていたのですが、.Valueに直接null代入する方法で問題ないでしょうか。

[Hey_CH]

okazuki0130さん IsValidが呼ばれない件にも言及いただきありがとうございます。
ただ、浅学のため「ValidationContextを直接使って検証する」という意味がわからず
var vm=new ViewModel();
var context = new ValidationContext(vm, null, null);
var results = new List<ValidationResult>();
var isValid = Validator.TryValidateObject(vm, context, results, true);
みたいな感じでやってみたところ、普通にIsValidが呼ばれました。
また、TN8001さんのコードにViewModelのプロパティにnullを設定するボタンを追加してみたところ、これもIsValidが呼ばれました。
そのため、この現象は、僕が質問者さんのコードを動くようにした状況でしか発生しないものだと考えられます。
大変お騒がせして申し訳ありませんでした。
（ちなみに、質問者さんのコードのpublic ValidationTestWindow(int pMode)メソッドのviewModel.nameChange();の部分をviewModel.NameTextBox.Value = null; に書き換えて実行し、追加ボタン押下時のウィンドウで適当な文字列を入力し、保存ボタン押下後、編集ボタンを押すとIsValidが呼ばれないという現象が発生しました。）

[okazuki0130]

ReactiveProperty 7.10.0でこの質問の問題への対応を入れました。
ReactiveProperty.WPFパッケージを追加して（ReactivePropertyパッケージは依存関係にあるので、プロジェクト内で追加してる場合は削除して大丈夫です）ください。
Reactive.Bindings.Schedulers.ReactivePropertyWpfScheduler が今回追加したスケジューラになります。