「東雲 忠太郎」の平凡な日常のできごと

「東雲 忠太郎」の平凡な日常のできごと

2024.08.04
XML
カテゴリ: WPFC#.NET


C# WPF でエラーメッセージを表示する方法のサンプルコードを示します。この例では、ユーザーが入力したデータに対してバリデーションを行い、エラーが発生した場合にエラーメッセージを表示します。


## プロジェクトの設定



   Visual Studio で新しい WPF アプリケーションプロジェクトを作成します。


## クラスの構成


### ビュー モデル (ViewModel)


まず、入力データのバリデーションを行い、エラーメッセージを表示するためのビュー モデルを作成します。


```csharp

using System.ComponentModel;

using System.Runtime.CompilerServices;

using System.Windows.Input;


public class MainViewModel : INotifyPropertyChanged, IDataErrorInfo

{

    private string _name;

    private string _email;

    private string _error;


    public string Name

    {

        get => _name;

        set

        {

            _name = value;

            OnPropertyChanged();

        }

    }


    public string Email

    {

        get => _email;

        set

        {

            _email = value;

            OnPropertyChanged();

        }

    }


    public ICommand AddCustomerCommand { get; }


    public MainViewModel()

    {

        AddCustomerCommand = new RelayCommand(AddCustomer, CanAddCustomer);

    }


    private void AddCustomer()

    {

        // 実際のデータベースへの登録処理は省略します

        // エラーメッセージをクリアします

        Error = string.Empty;

    }


    private bool CanAddCustomer()

    {

        return string.IsNullOrEmpty(Error);

    }


    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)

    {

        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    }


    // IDataErrorInfo メンバーの実装

    public string Error

    {

        get => _error;

        private set

        {

            _error = value;

            OnPropertyChanged();

        }

    }


    public string this[string columnName]

    {

        get

        {

            string result = string.Empty;

            switch (columnName)

            {

                case nameof(Name):

                    if (string.IsNullOrWhiteSpace(Name))

                    {

                        result = "Name is required.";

                    }

                    break;

                case nameof(Email):

                    if (string.IsNullOrWhiteSpace(Email))

                    {

                        result = "Email is required.";

                    }

                    else if (!Email.Contains("@"))

                    {

                        result = "Email is not valid.";

                    }

                    break;

            }

            Error = result;

            return result;

        }

    }

}

```


### コマンド (RelayCommand)


`RelayCommand` クラスを使用して、ボタンのコマンドを実装します。


```csharp

using System;

using System.Windows.Input;


public class RelayCommand : ICommand

{

    private readonly Action _execute;

    private readonly Func<bool> _canExecute;


    public RelayCommand(Action execute, Func<bool> canExecute = null)

    {

        _execute = execute;

        _canExecute = canExecute;

    }


    public bool CanExecute(object parameter)

    {

        return _canExecute == null || _canExecute();

    }


    public void Execute(object parameter)

    {

        _execute();

    }


    public event EventHandler CanExecuteChanged

    {

        add => CommandManager.RequerySuggested += value;

        remove => CommandManager.RequerySuggested -= value;

    }

}

```


### ビュー (View)


データを入力し、エラーメッセージを表示するための XAML を作成します。


`MainWindow.xaml`:


```xml

<Window x:Class="WpfApp.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="200" Width="400">

    <Grid>

        <StackPanel>

            <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"

                     Width="200" Height="30" Margin="10" 

                     PlaceholderText="Enter Name" />

            <TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"

                     Width="200" Height="30" Margin="10" 

                     PlaceholderText="Enter Email" />

            <Button Content="Add Customer" 

                    Command="{Binding AddCustomerCommand}" 

                    Width="100" Height="30" Margin="10" />

            <TextBlock Text="{Binding Error}" Foreground="Red" Margin="10" />

        </StackPanel>

    </Grid>

</Window>

```


### ビュー コードビハインド (View Code-Behind)


最後に、ビューのコードビハインドファイルでデータコンテキストを設定します。


`MainWindow.xaml.cs`:


```csharp

public partial class MainWindow : Window

{

    public MainWindow()

    {

        InitializeComponent();

        DataContext = new MainViewModel();

    }

}

```


## コードの説明


1. **ビュー モデル (ViewModel)**:

   - `MainViewModel` クラスは、ユーザーが入力したデータを保持し、バリデーションを行います。`IDataErrorInfo` インターフェイスを実装することで、バリデーションエラーメッセージを提供します。

   - `Name` と `Email` プロパティはバリデーションを行い、エラーがある場合はエラーメッセージを `Error` プロパティに設定します。

   - `AddCustomerCommand` はデータを登録するためのコマンドです。バリデーションに失敗した場合、コマンドは実行できません。


2. **コマンド (RelayCommand)**:

   - `RelayCommand` クラスは、WPF のコマンド機能を実装するための汎用的なクラスです。


3. **ビュー (View)**:

   - `MainWindow.xaml` では、ユーザーが名前とメールアドレスを入力できるようにし、`Add Customer` ボタンでデータを登録します。

   - `TextBlock` を使用してエラーメッセージを表示します。バインディングされた `Error` プロパティの内容が表示されます。


4. **ビュー コードビハインド (View Code-Behind)**:

   - `MainWindow.xaml.cs` では、`DataContext` を `MainViewModel` に設定します。


このサンプルコードを実行すると、ユーザーが `TextBox` に入力したデータがバリデーションされ、エラーが発生した場合は `TextBlock` にエラーメッセージが表示されます。バリデーションエラーがない場合は、`Add Customer` ボタンをクリックしてデータを登録することができます。






お気に入りの記事を「いいね!」で応援しよう

Last updated  2024.08.04 15:20:18


【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

© Rakuten Group, Inc.
X
Design a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: