Avalonia UI - メッセージボックスのソースを表示

== 概要 ==
Avalonia UIでは、現在、ネイティブのメッセージボックスコンポーネントを提供していない。<br>
この機能は、ツールキットの機能の拡張と強化を継続的に追求しているため、将来の開発に向けて検討中である。<br>
<br>
メッセージボックスコンポーネントを必要とする開発者は、サードパーティ製ライブラリを使用する必要がある。<br>
<br>
* MsBox.Avaloniaライブラリ
*: https://github.com/AvaloniaCommunity/MessageBox.Avalonia
* actipro Avalonia Controls
*: https://www.actiprosoftware.com/products/controls/avalonia
<br>
また、Avalonia.Dialogsクラス、あるいは、DialogHost.Avaloniaクラスを使用してダイアログベースのメッセージボックスウインドウを定義することもできる。<br>
<br><br>

== MsBox.Avaloniaライブラリ ==
==== MsBox.Avaloniaライブラリとは ====
MsBox.Avaloniaは、Avalonia UIフレームワーク用のメッセージボックスライブラリである。<br>
このライブラリを使用することにより、開発者はAvalonia UIアプリケーションに洗練されたカスタマイズ可能なメッセージボックスを簡単に実装できる。<br>
<br>
MsBox.Avaloniaの主な特徴として、高度なカスタマイズ性が挙げられる。<br>
開発者はメッセージボックスのタイトル、本文、ボタン、アイコンなどを自由に設定することができる。<br>
また、表示するボタンの種類や配置も柔軟に変更可能であり、アプリケーションの要件に合わせて調整できる。<br>
<br>
シンプルなAPIを提供しており、数行のコードでメッセージボックスを表示することができる。<br>
非同期操作にも対応しているため、モダンなC#プログラミングの流れに沿った実装が可能である。<br>
<br>
デザイン面では、Avalonia UIの美しさを損なうことなく、アプリケーションの全体的な外観と調和するメッセージボックスを定義できる。<br>
さらに、ダークモード、ライトモード等の異なるテーマにも対応している。<br>
<br>
MsBox.Avaloniaは、単純な情報表示からユーザの確認や選択を求める複雑な対話まで、様々な用途に適している。<br>
例えば、操作の確認、エラー通知、警告メッセージの表示等に使用できる。<br>
<br>
MsBox.Avaloniaは、NuGetパッケージマネージャーを通じて簡単にプロジェクトに追加できるため、必要な名前空間をインポートするだけですぐに使用を開始することができる。<br>
<br>
<u>MsBox.Avaloniaライブラリは、MITライセンスに準拠している。</u><br>
<br>
* MsBox.AvaloniaのGithub
*: https://github.com/AvaloniaCommunity/MessageBox.Avalonia
<br>
==== MsBox.Avaloniaライブラリのインストール ====
RiderまたはVisual StudioからNuGetを使用して、MsBox.Avaloniaライブラリをインストールする。<br>
* Riderの場合
*# プロジェクトを開く。
*# [ツール]メインメニュー - [Nuget] - [ソリューション の Nuget パッケージを管理] (または、[<プロジェクト名> の Nuget パッケージを管理])を選択する。
*# メイン画面下部にある[パッケージ]タブから <u>MsBox.Avalonia</u> と入力して検索する。
*# メイン画面下部の右にある[+]ボタンを押下して、MsBox.Avaloniaライブラリをインストールする。
*: <br>
* Visual Studioの場合
*# プロジェクトを開く。
*# NuGetパッケージマネージャーを開く。
*#* [ツール]メインメニュー - [NuGetパッケージマネージャー]を選択して、[ソリューションのNuGetパッケージの管理]を選択する。
*#* または、ソリューションエクスプローラーでプロジェクトを右クリックして、コンテキストメニューから[NuGetパッケージの管理]を選択する。
*# MsBox.Avaloniaライブラリを検索する。
*#: NuGetパッケージマネージャーの検索ボックスに <u>MsBox.Avalonia</u> と入力して検索する。
*# MsBox.Avaloniaライブラリのインストール
*#: 検索結果からMsBox.Avaloniaライブラリを選択して、[インストール]ボタンを押下する。
*# インストールの確認ダイアログが表示されるので、[OK]ボタンを押下してインストールを完了する。
*# 参照の確認
*#: インストールが完了した後、プロジェクトの参照にMsBox.Avaloniaライブラリが追加されていることを確認する。
*: <br>
* パッケージマネージャーコンソールからインストールする場合
*# プロジェクトを開く。
*# [表示]メインメニュー - [その他のウィンドウ] - [パッケージマネージャーコンソール]を選択して、パッケージマネージャーコンソールを開く。
*# パッケージマネージャーコンソールから、MsBox.Avaloniaライブラリをダウンロードしてインストールする。
*#: <code>Install-Package MsBox.Avalonia</code>
*# ソリューションエクスプローラーのプロジェクトの参照において、MsBox.Avaloniaライブラリが追加されていることを確認する。
*: <br>
* <code>dotnet</code>コマンドを使用する場合
*# ターミナルを開く。
*# プロジェクトのルートディレクトリに移動する。
*# MsBox.Avaloniaライブラリをインストールする。
*#: 最新の安定版をインストールする場合
*#: <code>dotnet add package MsBox.Avalonia</code>
*#: <br>
*#: バージョンを指定してインストールする場合
*#: <code>dotnet add package MsBox.Avalonia --version <バージョン></code>
*#: <br>
*: <u>※注意</u>
*: <u>プロジェクトがGit等のバージョン管理システムを使用している場合、これらの変更がトラッキングされることを確認すること。</u>
*: <u>プロジェクトを再ビルドして、新しく追加されたパッケージが正しく統合されていることを確認することを推奨する。</u>
<br>
プロジェクトにおいて、MsBox.Avaloniaライブラリを使用する場合は、ソースコードファイルの先頭にusingステートメントを追加する。<br>
 <syntaxhighlight lang="c#">
 using MsBox.Avalonia;
 using MsBox.Avalonia.Enums;
 </syntaxhighlight>
<br>
==== ボタンの種類 ====
* [OK]ボタンのみ
*: ButtonEnum.Ok
* [はい] / [いいえ]ボタン
*: ButtonEnum.YesNo
* [OK] / [キャンセル]ボタン
*: ButtonEnum.OkCancel
* [OK] / [中止]ボタン
*: ButtonEnum.OkAbort
* [はい] / [いいえ] / [キャンセル]ボタン
*: ButtonEnum.YesNoCancel
<br>
==== アイコンの種類 ====
* 警告
*: Icon.Warning
* エラー
*: Icon.Error
* 情報
*: Icon.Info
* 質問
*: Icon.Question
* 成功
*: Icon.Success
<br>
==== メッセージボックスの表示 ====
MessageBoxManager.GetMessageBoxStandardメソッドを実行して、メッセージボックスを定義する。<br>
タイトル、メッセージ、ボタンの種類、アイコンを指定することができる。<br>
<br>
ShowAsyncメソッドを実行して、メッセージボックスを非同期で表示する。<br>
<br>
 <syntaxhighlight lang="c#">
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
 using MsBox.Avalonia;
 using MsBox.Avalonia.Enums;
 
 public partial class MainWindow : Window
 {
    public MainWindow()
    {
       InitializeComponent();
    }
 
    private void InitializeComponent()
    {
       AvaloniaXamlLoader.Load(this);
    }
 
    public async void ShowMessageBox(object sender, RoutedEventArgs e)
    {
       var messageBoxStandardWindow = MessageBoxManager.GetMessageBoxStandard("<タイトル>",
                                                                              "<メッセージボックスの本文>",
                                                                              ButtonEnum.OkCancel,
                                                                              Icon.Info);
       // メッセージボックスを表示
       var result = await messageBoxStandardWindow.ShowAsync();
 
       if (result == ButtonResult.Ok)
       {  // OKボタンが押下された場合
          await MessageBoxManager.GetMessageBoxStandard("結果", "OKボタンが押下された").ShowAsync();
       }
       else
       {
          // Cancelボタンが押下された場合
          await MessageBoxManager.GetMessageBoxStandard("結果", "キャンセルボタンが押下された").ShowAsync();
       }
    }
 }
 </syntaxhighlight>
<br>
MsBox.Avaloniaライブラリのカスタムメッセージボックスを使用する場合は、MessageBoxManagerクラスのGetMessageBoxCustomメソッドを使用する。<br>
 <syntaxhighlight lang="c#">
 var msgbox = MessageBoxManager.GetMessageBoxCustom("<タイトル>",
                                                    "<メッセージ本文>",
                                                    "はい",        // ボタン1
                                                    "いいえ",      // ボタン2
                                                    "キャンセル",,  // ボタン3
                                                    Icon.Question);
 </syntaxhighlight>
<br><br>

== カスタムメッセージボックス ==
==== プロパティ ====
カスタムメッセージボックスでは、多くのプロパティや設定を追加して、より柔軟で機能的なメッセージボックスを定義することができる。<br>
<br>
===== ウインドウのプロパティ =====
* Width / Height
*: ウインドウの固定サイズを設定
* MinWidth / MinHeight
*: 最小サイズを設定
* MaxWidth / MaxHeight
*: 最大サイズを設定
* WindowStartupLocation
*: ウインドウの初期位置を指定
*: 例: 中央、オーナーの中央
* Topmost
*: 常に最前面に表示するかどうかを指定する。
* ShowInTaskbar
*: タスクバーに表示するかどうかを指定する。
* CanResize
*: ユーザによるリサイズを許可するかどうかを指定する。
* SystemDecorations
*: ウインドウの装飾 (最小化、最大化、閉じるボタン) の表示設定
<br>
===== コンテンツのレイアウト =====
* Padding
*: ウイィンドウ内のコンテンツの余白
* Margin
*: 各コントロールの外側の余白
* HorizontalAlignment / VerticalAlignment
*: コンテンツの水平・垂直方向の配置
* Spacing
*: StackPanel内の要素間の間隔
<br>
===== テキストブロックのプロパティ =====
* FontSize
*: フォントサイズ
* FontWeight
*: フォントの太さ
* FontFamily
*: フォントファミリー
* Foreground
*: テキストの色
* TextWrapping
*: テキストの折り返し設定
* TextAlignment
*: テキストの配置
<br>
===== ボタンのプロパティ =====
* Width / Height
*: ボタンのサイズ
* Background
*: ボタンの背景色
* Foreground
*: ボタンのテキスト色
* BorderBrush / BorderThickness
*: ボタンの枠線の色と太さ
* CornerRadius
*: ボタンの角の丸み
<br>
===== アイコンとイメージ =====
メッセージボックスにアイコンやイメージを追加する。<br>
例: 警告、エラー、情報等<br>
<br>
===== 複数のボタン =====
* [OK]、[キャンセル]、[Yes]、[NO]等の複数のボタンを追加する。
* 各ボタンに対応するDialogResultを設定する。
<br>
===== カスタムスタイル =====
* Styleプロパティを使用して、ウインドウや各コントロールにカスタムスタイルを適用する。
<br>
===== アニメーション =====
* 表示時や閉じる時のアニメーション効果を追加する。
<br>
===== キーボードショートカット =====
[Esc]キーでウインドウを閉じる等、キーボードショートカットを設定する。<br>
<br>
===== アクセシビリティ =====
AutomationProperties.NameやAutomationProperties.HelpTextを使用して、スクリーンリーダーのサポートを改善する。<br>
<br>
==== 使用例 1 ====
以下の例では、Avalonia UIを使用してカスタムメッセージボックスを定義している。<br>
<br>
"OK"という名前のボタンを検索しているため、ボタンにNameプロパティに"OK"を設定する、あるいは、別の方法でボタンを参照する必要があることに注意する。<br>
<br>
 <syntaxhighlight lang="c#">
 // メッセージボックスを表示するヘルパーメソッド
 // タイトルとメッセージを受け取り、カスタムメッセージボックスを非同期に表示する
 private async Task ShowMessageAsync(string title, string message)
 {
    await new MessageBoxWindow(title, message).ShowDialog(this);
 }
 
 // シンプルなメッセージボックスウィンドウのクラス
 public class MessageBoxWindow : Window
 {
    public MessageBoxWindow(string title, string message)
    {
       Title = title;
 
       // ウインドウのサイズは内容に合わせて自動調整される
       SizeToContent = SizeToContent.WidthAndHeight;
 
       // StackPanelを使用して、本文と[OK]ボタンを縦に配置
       Content = new StackPanel
       {
          Children =
          {
             new TextBlock { Text = message, Margin = new Thickness(20) },
             new Button { Content = "OK", HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Center, Margin = new Thickness(0, 0, 0, 20) }
          }
       };
 
       // [OK]ボタンがクリックされた時にウインドウを閉じるイベントハンドラを設定
       this.FindControl<Button>("OK").Click += (sender, args) => Close();
    }
 }
 </syntaxhighlight>
<br>
==== 使用例 2 ====
以下の例では、Avalonia UIを使用して、カスタムメッセージボックスにアイコン、イメージ、複数のボタンを追加・定義している。<br>
<br>
* アイコンおよびイメージの追加
*: MessageBoxIcon enumを使用して、情報、警告、エラー、質問のアイコンを選択することができる。
*: アイコンはGrid内の左側に配置される。
*: アイコン画像は、"avares://"URIを使用して参照される。
*: 実際の使用時には、プロジェクト内の正しいパスに画像ファイルを配置する必要がある。
*: <br>
* 複数のボタンの追加
*: MessageBoxButton enumを使用して、OK、OKCancel、YesNo、YesNoCancelのボタン構成を選択することができる。
*: ボタンはStackPanel内に動的に追加されて、右下に配置される。
*: 各ボタンにはクリックイベントハンドラが設定され、適切な結果 (true、false、null) を返す。
<br>
 <syntaxhighlight lang="c#">
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Layout;
 using Avalonia.Media.Imaging;
 using System;
 using System.Threading.Tasks;
 
 public class CustomMessageBox : Window
 {
    public enum MessageBoxButton
    {
       OK,
       OKCancel,
       YesNo,
       YesNoCancel
    }
 
    public enum MessageBoxIcon
    {
       None,
       Information,
       Warning,
       Error,
       Question
    }
 
    private TaskCompletionSource<bool?> _resultTcs;
 
    public CustomMessageBox()
    {
       this.InitializeComponent();
    }
 
    private void InitializeComponent()
    {
       Title = "Message";
       SizeToContent = SizeToContent.WidthAndHeight;
       MinWidth  = 300;
       MinHeight = 100;
    }
 
    public static Task<bool?> Show(Window owner, string message, string title = "Message", 
                                   MessageBoxButton buttons = MessageBoxButton.OK, MessageBoxIcon icon = MessageBoxIcon.None)
    {
       var messageBox = new CustomMessageBox
       {
          Title = title
       };
 
       var grid = new Grid
       {
          ColumnDefinitions = new ColumnDefinitions("Auto,*"),
          RowDefinitions = new RowDefinitions("*,Auto")
       };
 
       // アイコンの指定
       if (icon != MessageBoxIcon.None)
       {
          var iconImage = new Image
          {
             Width  = 32,
             Height = 32,
             Margin = new Thickness(10),
             VerticalAlignment = VerticalAlignment.Top
          };
 
          string iconPath = icon switch
          {
             MessageBoxIcon.Information => "avares://YourAssemblyName/Assets/information.png",
             MessageBoxIcon.Warning => "avares://YourAssemblyName/Assets/warning.png",
             MessageBoxIcon.Error => "avares://YourAssemblyName/Assets/error.png",
             MessageBoxIcon.Question => "avares://YourAssemblyName/Assets/question.png",
                _ => throw new ArgumentOutOfRangeException(nameof(icon))
          };
 
          iconImage.Source = new Bitmap(iconPath);
          Grid.SetColumn(iconImage, 0);
          Grid.SetRow(iconImage, 0);
          grid.Children.Add(iconImage);
       }
 
       // メッセージを指定
       var messageTextBlock = new TextBlock
       {
          Text         = message,
          TextWrapping = Avalonia.Media.TextWrapping.Wrap,
          Margin = new Thickness(10)
       };
       Grid.SetColumn(messageTextBlock, 1);
       Grid.SetRow(messageTextBlock, 0);
       grid.Children.Add(messageTextBlock);
 
       // ボタンの指定
       var buttonPanel = new StackPanel
       {
          Orientation         = Orientation.Horizontal,
          HorizontalAlignment = HorizontalAlignment.Right,
          Margin = new Thickness(0, 10, 10, 10)
       };
 
       void AddButton(string content, bool? dialogResult)
       {
          var button = new Button { Content = content, MinWidth = 60, Margin = new Thickness(5, 0, 0, 0) };
          button.Click += (_, __) => 
          {
             messageBox._resultTcs.SetResult(dialogResult);
             messageBox.Close();
          };
          buttonPanel.Children.Add(button);
       }
 
       switch (buttons)
       {
          case MessageBoxButton.OK:
               AddButton("OK", true);
               break;
          case MessageBoxButton.OKCancel:
               AddButton("OK", true);
               AddButton("Cancel", false);
               break;
          case MessageBoxButton.YesNo:
               AddButton("Yes", true);
               AddButton("No", false);
               break;
          case MessageBoxButton.YesNoCancel:
               AddButton("Yes", true);
               AddButton("No", false);
               AddButton("Cancel", null);
               break;
       }
 
       Grid.SetColumn(buttonPanel, 1);
       Grid.SetRow(buttonPanel, 1);
       grid.Children.Add(buttonPanel);
 
       messageBox.Content = grid;
       messageBox._resultTcs = new TaskCompletionSource<bool?>();
 
       if (owner != null)
       {
          messageBox.ShowDialog(owner);
       }
       else
       {
          messageBox.Show();
       }
 
       return messageBox._resultTcs.Task;
    }
 }
 </syntaxhighlight>
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:C_Sharp]]