「Avalonia UI - ダイアログ」の版間の差分

2024年9月25日 (水) 16:27時点における版

概要

Avalonia UIは、クロスプラットフォームのUI開発フレームワークであり、C#を使用してデスクトップアプリケーションを構築できる。
このフレームワークでは、ダイアログは重要なUIコンポーネントの一つとして位置付けられている。

ダイアログは、ユーザに情報を表示する、または、入力を求めるための一時的なウインドウである。
主に、警告メッセージの表示、確認の要求、データ入力の促進等に使用される。

Avalonia UIでは、標準的なダイアログとカスタムダイアログの両方を実装することができる。
標準的なダイアログには、メッセージボックス、ファイル選択ダイアログ、ディレクトリ選択ダイアログ等が含まれる。
これらは、Avalonia.Dialogsネームスペースに含まれるクラスを使用して簡単に実装することができる。

カスタムダイアログを作成する場合、通常はWindowクラスを継承して、必要なコンテンツやボタンを追加する。
MVVMパターンに従って実装することにより、ビジネスロジックとUIを分離して、保守性の高いコードを記述することができる。

ダイアログの表示方法には同期的なものと非同期的なものがある。
同期的な方法では、ダイアログが閉じられるまでコードの実行がブロックされる。
一方、非同期的な方法では、ダイアログを表示しながら他の処理を続行できる。

Avalonia UIでは、ダイアログのスタイリングも柔軟に行うことができる。
XAMLを使用してダイアログの外観をカスタマイズして、アプリケーション全体のデザインに合わせることが可能である。

ダイアログの結果の処理において、ユーザの選択や入力に基づいて、適切なアクションを実行するようにコードを設計する必要がある。

MsBox.Avaloniaライブラリ

MsBox.Avaloniaライブラリとは

MsBox.Avaloniaは、Avalonia UIフレームワーク用のメッセージボックスライブラリである。
このライブラリを使用することにより、開発者はAvalonia UIアプリケーションに洗練されたカスタマイズ可能なメッセージボックスを簡単に実装できる。

MsBox.Avaloniaの主な特徴として、高度なカスタマイズ性が挙げられる。
開発者はメッセージボックスのタイトル、本文、ボタン、アイコンなどを自由に設定することができる。
また、表示するボタンの種類や配置も柔軟に変更可能であり、アプリケーションの要件に合わせて調整できる。

シンプルなAPIを提供しており、数行のコードでメッセージボックスを表示することができる。
非同期操作にも対応しているため、モダンなC#プログラミングの流れに沿った実装が可能である。

デザイン面では、Avalonia UIの美しさを損なうことなく、アプリケーションの全体的な外観と調和するメッセージボックスを定義できる。
さらに、ダークモード、ライトモード等の異なるテーマにも対応している。

MsBox.Avaloniaは、単純な情報表示からユーザの確認や選択を求める複雑な対話まで、様々な用途に適している。
例えば、操作の確認、エラー通知、警告メッセージの表示等に使用できる。

MsBox.Avaloniaは、NuGetパッケージマネージャーを通じて簡単にプロジェクトに追加できるため、必要な名前空間をインポートするだけですぐに使用を開始することができる。

MsBox.Avaloniaライブラリは、MITライセンスに準拠している。

MsBox.AvaloniaのGithub
https://github.com/AvaloniaCommunity/MessageBox.Avalonia

MsBox.Avaloniaライブラリのインストール

RiderまたはVisual StudioからNuGetを使用して、MsBox.Avaloniaライブラリをインストールする。

Riderの場合
1. プロジェクトを開く。
2. [ツール]メインメニュー - [Nuget] - [ソリューションの Nuget パッケージを管理] (または、[<プロジェクト名> の Nuget パッケージを管理])を選択する。
3. メイン画面下部にある[パッケージ]タブから MsBox.Avalonia と入力して検索する。
4. メイン画面下部の右にある[+]ボタンを押下して、MsBox.Avaloniaライブラリをインストールする。
Visual Studioの場合
1. プロジェクトを開く。
2. NuGetパッケージマネージャーを開く。
  - [ツール]メインメニュー - [NuGetパッケージマネージャー]を選択して、[ソリューションのNuGetパッケージの管理]を選択する。
  - または、ソリューションエクスプローラーでプロジェクトを右クリックして、コンテキストメニューから[NuGetパッケージの管理]を選択する。
3. MsBox.Avaloniaライブラリを検索する。
  NuGetパッケージマネージャーの検索ボックスに MsBox.Avalonia と入力して検索する。
4. MsBox.Avaloniaライブラリのインストール
  検索結果からMsBox.Avaloniaライブラリを選択して、[インストール]ボタンを押下する。
5. インストールの確認ダイアログが表示されるので、[OK]ボタンを押下してインストールを完了する。
6. 参照の確認
  インストールが完了した後、プロジェクトの参照にMsBox.Avaloniaライブラリが追加されていることを確認する。
パッケージマネージャーコンソールからインストールする場合
1. プロジェクトを開く。
2. [表示]メインメニュー - [その他のウィンドウ] - [パッケージマネージャーコンソール]を選択して、パッケージマネージャーコンソールを開く。
3. パッケージマネージャーコンソールから、MsBox.Avaloniaライブラリをダウンロードしてインストールする。
  Install-Package MsBox.Avalonia
4. ソリューションエクスプローラーのプロジェクトの参照において、MsBox.Avaloniaライブラリが追加されていることを確認する。
dotnetコマンドを使用する場合
1. ターミナルを開く。
2. プロジェクトのルートディレクトリに移動する。
3. MsBox.Avaloniaライブラリをインストールする。
  最新の安定版をインストールする場合
  
  dotnet add package MsBox.Avalonia
  
  バージョンを指定してインストールする場合
  
  dotnet add package MsBox.Avalonia --version <バージョン>
※注意

プロジェクトがGit等のバージョン管理システムを使用している場合、これらの変更がトラッキングされることを確認すること。

プロジェクトを再ビルドして、新しく追加されたパッケージが正しく統合されていることを確認することを推奨する。

プロジェクトにおいて、MsBox.Avaloniaライブラリを使用する場合は、ソースコードファイルの先頭にusingステートメントを追加する。

 using MsBox.Avalonia;
 using MsBox.Avalonia.Enums;

メッセージボックスの表示

MessageBoxManager.GetMessageBoxStandardメソッドを実行して、メッセージボックスを定義する。
タイトル、メッセージ、ボタンの種類、アイコンを指定することができる。

ShowAsyncメソッドを実行して、メッセージボックスを非同期で表示する。

 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();
       }
    }
 }

カスタムメッセージボックス

プロパティ

カスタムメッセージボックスでは、多くのプロパティや設定を追加して、より柔軟で機能的なメッセージボックスを定義することができる。

ウインドウのプロパティ

Width / Height
ウインドウの固定サイズを設定
MinWidth / MinHeight
最小サイズを設定
MaxWidth / MaxHeight
最大サイズを設定
WindowStartupLocation
ウインドウの初期位置を指定

例: 中央、オーナーの中央
Topmost
常に最前面に表示するかどうかを指定する。
ShowInTaskbar
タスクバーに表示するかどうかを指定する。
CanResize
ユーザによるリサイズを許可するかどうかを指定する。
SystemDecorations
ウインドウの装飾 (最小化、最大化、閉じるボタン) の表示設定

コンテンツのレイアウト

Padding
ウイィンドウ内のコンテンツの余白
Margin
各コントロールの外側の余白
HorizontalAlignment / VerticalAlignment
コンテンツの水平・垂直方向の配置
Spacing
StackPanel内の要素間の間隔

テキストブロックのプロパティ

FontSize
フォントサイズ
FontWeight
フォントの太さ
FontFamily
フォントファミリー
Foreground
テキストの色
TextWrapping
テキストの折り返し設定
TextAlignment
テキストの配置

ボタンのプロパティ

Width / Height
ボタンのサイズ
Background
ボタンの背景色
Foreground
ボタンのテキスト色
BorderBrush / BorderThickness
ボタンの枠線の色と太さ
CornerRadius
ボタンの角の丸み

アイコンとイメージ

メッセージボックスにアイコンやイメージを追加する。
例: 警告、エラー、情報等

複数のボタン

[OK]、[キャンセル]、[Yes]、[NO]等の複数のボタンを追加する。
各ボタンに対応するDialogResultを設定する。

カスタムスタイル

Styleプロパティを使用して、ウインドウや各コントロールにカスタムスタイルを適用する。

アニメーション

表示時や閉じる時のアニメーション効果を追加する。

キーボードショートカット

[Esc]キーでウインドウを閉じる等、キーボードショートカットを設定する。

アクセシビリティ

AutomationProperties.NameやAutomationProperties.HelpTextを使用して、スクリーンリーダーのサポートを改善する。

使用例 1

以下の例では、Avalonia UIを使用してカスタムメッセージボックスを定義している。

"OK"という名前のボタンを検索しているため、ボタンにNameプロパティに"OK"を設定する、あるいは、別の方法でボタンを参照する必要があることに注意する。

 // メッセージボックスを表示するヘルパーメソッド
 // タイトルとメッセージを受け取り、カスタムメッセージボックスを非同期に表示する
 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();
    }
 }

使用例 2

以下の例では、Avalonia UIを使用して、カスタムメッセージボックスにアイコン、イメージ、複数のボタンを追加・定義している。

アイコンおよびイメージの追加
MessageBoxIcon enumを使用して、情報、警告、エラー、質問のアイコンを選択することができる。

アイコンはGrid内の左側に配置される。

アイコン画像は、"avares://"URIを使用して参照される。

実際の使用時には、プロジェクト内の正しいパスに画像ファイルを配置する必要がある。
複数のボタンの追加
MessageBoxButton enumを使用して、OK、OKCancel、YesNo、YesNoCancelのボタン構成を選択することができる。

ボタンはStackPanel内に動的に追加されて、右下に配置される。

各ボタンにはクリックイベントハンドラが設定され、適切な結果 (true、false、null) を返す。

 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;
    }
 }

ファイル選択タイアログ

OpenFileDialogのプロパティ

下表に、ファイル選択ダイアログのプロパティのうち、設定を意識する必要がある主なプロパティを示す。

表. OpenFileDialogの主なプロパティ

プロパティ名	データ型	意味
AllowMultiple	bool	複数ファイルの選択を許可するかどうかを指定する。許可する場合はtrue、単一のファイルのみの場合はfalseを指定する。(既定値 : false)
Directory	string	ダイアログが開かれる初期ディレクトリを指定する。
Filters	List<FileDialogFilter>	ダイアログに表示されるファイルタイプを制限する。
InitialFileName	string	ダイアログに表示される初期ファイル名を指定する。
Title	string	ファイル選択ダイアログのウインドウタイトルを指定する。

WinFormsにあるような以下に示すプロパティは存在しない。
そのため、Avalonia UIでの代替方法を以下に示す。

AddExtension (拡張子が入力されない場合、自動的に拡張子を付けるかどうか)
Avalonia UIでは、この機能は自動的に処理される。

Filtersプロパティで指定された拡張子が使用される。
CheckFileExistsプロパティ / CheckPathExistsプロパティ
Avalonia UIでは、これらの検証はファイル選択後に手動で行う必要がある。
FileNameプロパティ / FileNamesプロパティ (選択したファイルパスを取得)
Avalonia UIでは、OpenFileDialogクラスのShowAsyncメソッドの戻り値を使用する。
FilterIndexプロパティ (ファイルの種類のプルダウンの選択肢リストの初期選択インデックスを指定)
Avalonia UIでは、Filtersプロパティを使用してファイルタイプを制御する。

特定のフィルタを選択する場合は、Filtersリストの順序を調整する。
Multiselectプロパティ (複数のファイルを選択できるかどうかを指定)
Avalonia UIでは、AllowMultipleプロパティを使用する。

dialog.AllowMultiple = true; // 複数ファイルの選択を許可
ReadOnlyCheckedプロパティ (読み取り専用として開くチェックボックスのON/OFFを設定または取得)
ShowReadOnlyプロパティ (読み取り専用として開くチェックボックスを表示するかどうかを設定)
Avalonia UIでは、これらの機能は直接サポートされていない。

必要に応じてカスタムダイアログを実装する、あるいは、ファイル選択後に読み取り専用の状態を確認・設定するロジックを実装する必要がある。
SafeFileNameプロパティ (選択した拡張子を含むファイル名のみ(パスは含まない)を取得)
SafeFileNamesプロパティ (選択した複数の拡張子を含むファイル名のみ(パスは含まない)を取得)
Avalonia UIでは、これらの概念は直接サポートされていない。

必要に応じて、選択されたファイルパスから安全なファイル名を抽出するロジックを実装する必要がある。
ShowHelpプロパティ (ヘルプボタン[?]を表示するかどうかを指定)
Avalonia UIのファイルダイアログでは、ヘルプ機能は標準では提供されていない。

必要に応じて、別途ヘルプ機能を実装する必要がある。

Filtersプロパティ (ファイルの種類) の設定

ダイアログで開くことができるファイルの種類は、Filtersプロパティにフィルタ文字列を設定する。

フィルタ文字列の設定を以下に示す。

FileDialogFilterクラスの使用
各フィルタはFileDialogFilterオブジェクトとして定義される。
Nameプロパティ
ユーザに表示されるフィルタの名前。
Extensionsプロパティ
拡張子のリストであり、ワイルドカード (*) を含めずに指定する。
複数の拡張子
1つのフィルタに複数の拡張子を含めることができる。
全てのファイル
全てのファイルを表す場合は、拡張子として "*" を使用する。
フィルタの順序
リストに追加した順序でユーザに表示される。

WinFormsとの主な違いを、以下に示す。

Avalonia UIでは、拡張子にワイルドカード (*) を含めずに、単に拡張子名のみを指定する。
複数の拡張子やファイルタイプを1つのフィルタにまとめる場合、Extensionsリストに全ての拡張子を追加する。
フィルタ間の区切り (|) は使用せず、代わりに別のFileDialogFilterオブジェクトを作成する。

 using Avalonia.Controls;
 using System.Collections.Generic;
 
 public class FileDialogExample
 {
    public void ShowFileDialog()
    {
       var dialog = new OpenFileDialog();
 
       // Filtersプロパティの設定方法 1
       // List<FileDialogFilter>の使用
       dialog.Filters = new List<FileDialogFilter>
       {
          new FileDialogFilter { Name = "すべてのファイル", Extensions = new List<string> { "*" } },
          new FileDialogFilter { Name = "テキストファイル", Extensions = new List<string> { "txt" } },
          new FileDialogFilter { Name = "テキストファイルとすべてのファイル", Extensions = new List<string> { "txt", "*" } },
          new FileDialogFilter { Name = "XMLファイル", Extensions = new List<string> { "xml" } },
          new FileDialogFilter { Name = "HTMLファイル", Extensions = new List<string> { "html", "htm" } },
          new FileDialogFilter { Name = "XMLファイルとHTMLファイルとすべてのファイル", Extensions = new List<string> { "xml", "html", "htm", "*" } },
          new FileDialogFilter { Name = "イメージファイル", Extensions = new List<string> { "png", "jpg", "gif", "bmp" } }
       };
 
       // Filtersプロパティの設定方法 2
       // FiltersのAddメソッドの使用
       dialog.Filters.Add(new FileDialogFilter { Name = "すべてのファイル", Extensions = { "*" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "テキストファイル", Extensions = { "txt" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "テキストファイルとすべてのファイル", Extensions = new List<string> { "txt", "*" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "XMLファイル", Extensions = { "xml" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "HTMLファイル", Extensions = new List<string> { "html", "htm" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "XMLファイルとHTMLファイルとすべてのファイル", Extensions = new List<string> { "xml", "html", "htm", "*" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "イメージファイル", Extensions = new List<string> { "png", "jpg", "gif", "bmp" } });
 
       // ファイル選択ダイアログを表示
       var result = await dialog.ShowAsync(this);
       if (result != null)
       {
          foreach (var path in result)
          {
             System.Console.WriteLine($"Selected file: {path}");
          }
       }
    }
 }

使用例

ダイアログを表示する場合は、OpenFileDialogクラスのShowAsyncメソッドを実行する。
ShowAsyncメソッドは、非同期で動作してTask<string[]>型を返す。
これにより、UIがブロックされることなくファイル選択操作を行うことができる。

ShowAsyncメソッドの戻り値がnullではないこと、および、配列の長さが0より大きいことを常に確認することが重要である。
これにより、ユーザがファイルを選択せずにダイアログを閉じた場合や操作をキャンセルした場合にも適切に対応することができる。

 using Avalonia.Controls;
 using System.Collections.Generic;
 
 var dialog = new OpenFileDialog();
 dialog.Filters.Add(new FileDialogFilter() { Name = "テキストファイル", Extensions = { "txt" } });
 dialog.AllowMultiple = false;
 dialog.Directory = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
 dialog.Title = "テキストファイルを選択してください";
 
 var result = await dialog.ShowAsync(this);
 if (result != null && result.Length > 0)
 {
    string selectedFilePath    = result[0];  // 単一ファイルの場合
    string[] selectedFilePaths = result;     // 複数ファイルの場合
 
    // 選択されたファイルを処理
    // ...略
 }

ファイル選択タイアログ (StorageProviderクラス)

StorageProviderのプロパティ

下表に、ファイル選択ダイアログのプロパティのうち、設定を意識する必要がある主なプロパティを示す。

表. StorageProviderクラスの主なプロパティ

プロパティ名	データ型	意味
AllowMultiple	bool	複数のアイテムの選択を許可するかどうかを指定する。複数のアイテムを選択する場合 : true 単一のファイルのみの場合 : false (既定値 : false)
FileTypeFilter (厳密にはプロパティではない)	IReadOnlyList<FilePickerFileType>型	`FilePickerOpenOptions`等のオプションクラスのプロパティとして使用する。選択可能なファイルタイプを制限するためのフィルタのリストを指定する。
SuggestedStartLocation (厳密にはプロパティではない)	IStorageFolder型	ファイルピッカーやフォルダピッカーが開く初期ディレクトリを指定する。 `FilePickerOpenOptions`や`FolderPickerOpenOptions`等のオプションクラスのプロパティとして使用する。未指定または`null`を指定した場合、ファイルピッカーやフォルダピッカーは、システムやアプリケーションのデフォルトの開始位置を使用する。多くの場合、ユーザのドキュメントディレクトリ、または、最後にファイルピッカーを使用した場所になる。
Title	string	ファイル選択ダイアログのウインドウタイトルを指定する。

FileTypeFilter (ファイルの種類) の設定

ダイアログで開くことができるファイルの種類は、FilePickerOpenOptionsクラスのFileTypeFilterプロパティにフィルタ文字列を設定する。

フィルタ文字列の設定を以下に示す。

FilePickerOpenOptionsクラス (オプションクラス) の使用
FilePickerOpenOptionsクラスのインスタンスを作成し、そのFileTypeFilterプロパティにフィルタを設定する。
FilePickerFileTypeクラスの使用
各フィルタはFilePickerFileTypeオブジェクトとして定義されます。コンストラクタの引数にフィルタの名前を指定する。
Patterns
Patternsプロパティに、フィルタに含める拡張子のパターンを指定する。
複数の拡張子
1つのフィルタに複数の拡張子を含めることができる。

例えば、"HTMLファイル"フィルタでは、"*.html" と "*.htm" の両方を指定する。
全てのファイル
全てのファイルを表す場合は、拡張子として "*" を使用する。

例えば、"すべてのファイル"フィルタがこれに該当する。
フィルタの順序
リストに追加した順序でユーザに表示される。

以下の例では、"すべてのファイル"が最初に表示されて、以降"テキストファイル"、"XMLファイル"等の順で表示される。

この設定により、ユーザは様々なファイルタイプから選択できる。
特定のファイル形式に絞り込む場合や全てのファイルを表示することもできる。

 var storageProvider = TopLevel.GetTopLevel(this)?.StorageProvider;
 
 var options = new FilePickerOpenOptions
 {
    FileTypeFilter = new[] 
    {
       new FilePickerFileType("すべてのファイル") { Patterns = new[] { "*" } },
       new FilePickerFileType("テキストファイル") { Patterns = new[] { "*.txt" } },
       new FilePickerFileType("XMLファイル")     { Patterns = new[] { "*.xml" } },
       new FilePickerFileType("HTMLファイル")    { Patterns = new[] { "*.html", "*.htm" } },
       new FilePickerFileType("Webファイル")     { Patterns = new[] { "*.html", "*.htm", "*.css", "*.js" } },
       new FilePickerFileType("XMLファイルとHTMLファイル") { Patterns = new[] { "*.xml", "*.html", "*.htm" } },
       new FilePickerFileType("イメージファイル") { Patterns = new[] { "*.png", "*.jpg", "*.gif", "*.bmp", "*.webp" } }
    }
 };
 
 var file = await storageProvider.OpenFilePickerAsync(options);

使用例

以下の例では、FilePickerOpenOptionsクラスを使用してstorageProviderクラスを設定した後、ディレクトリ選択ダイアログを開いている。

SuggestedStartLocationやFileTypeFilterは、StorageProviderクラスの直接のプロパティではないことに注意する。

 using Avalonia.Platform.Storage;
 using System.IO;
 using System.Threading.Tasks;
 
 public class MyClass
 {
    public async Task OpenFileAsync()
    {
       var storageProvider = TopLevel.GetTopLevel(this)?.StorageProvider;
       if (storageProvider != null)
       {
          var options = new FilePickerOpenOptions
          {
             SuggestedStartLocation = await StorageProvider.TryGetFolderFromPathAsync($"/usr/local/bin"),
             FileTypeFilter = new[] 
             {
                new FilePickerFileType("Text Files") { Patterns = new[] { "*.txt" } },
                new FilePickerFileType("All Files") { Patterns = new[] { "*" } }
             },
             AllowMultiple = false
          };
 
          var file = await storageProvider.OpenFilePickerAsync(options);
 
          if (file.Count > 0)
          {  // ファイルが選択された場合の処理
             // ...略
          }
       }
    }
 }

ファイル保存タイアログ (SaveFileDialogクラス)

SaveFileDialogのプロパティ

下表に、ファイル選択ダイアログのプロパティのうち、設定を意識する必要がある主なプロパティを示す。

表. SaveFileDialogの主なプロパティ

プロパティ名	データ型	意味
DefaultExtension	string	ユーザが拡張子を指定しなかった場合に使用される既定の拡張子を設定または取得する。
Directory	string	ダイアログが開かれる初期ディレクトリを指定する。
Filters	List<FileDialogFilter>	ファイル種類のフィルタのリストを指定および取得する。ユーザが選択できるファイル形式を制限するのに使用する。
InitialDirectory	string	ダイアログが最初に開かれるディレクトリを指定および取得する。 `Directory`プロパティと似ているが、こちらはより優先度が高い。
InitialFileName	string	ダイアログに表示される初期ファイル名を指定する。
ShowOverwritePrompt	bool	既存のファイルを上書きする前に確認ダイアログを表示するかどうかを指定および取得する。
Title	string	ファイル選択ダイアログのウインドウタイトルを指定する。

以下の例では、各プロパティを指定して、ファイル保存ダイアログの動作をカスタマイズしている。

 var saveFileDialog = new SaveFileDialog
 {
    Title = "プロジェクトを保存",
    InitialFileName = "新規プロジェクト",
    Directory = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),
    DefaultExtension = ".proj",
 
    Filters = new List<FileDialogFilter>
    {
        new FileDialogFilter { Name = "プロジェクトファイル", Extensions = { "proj" } },
        new FileDialogFilter { Name = "すべてのファイル", Extensions = { "*" } }
    },
 
    ShowOverwritePrompt = true
 };

Filtersプロパティ (ファイルの種類) の設定

ダイアログで開くことができるファイルの種類は、Filtersプロパティにフィルタ文字列を設定する。

フィルタ文字列の設定を以下に示す。

FileDialogFilterクラスの使用
各フィルタはFileDialogFilterオブジェクトとして定義される。
Nameプロパティ
ユーザに表示されるフィルタの名前。
Extensionsプロパティ
拡張子のリストであり、ワイルドカード (*) を含めずに指定する。
複数の拡張子
1つのフィルタに複数の拡張子を含めることができる。
全てのファイル
全てのファイルを表す場合は、拡張子として "*" を使用する。
フィルタの順序
リストに追加した順序でユーザに表示される。

WinFormsとの主な違いを、以下に示す。

Avalonia UIでは、拡張子にワイルドカード (*) を含めずに、単に拡張子名のみを指定する。
複数の拡張子やファイルタイプを1つのフィルタにまとめる場合、Extensionsリストに全ての拡張子を追加する。
フィルタ間の区切り (|) は使用せず、代わりに別のFileDialogFilterオブジェクトを作成する。

 using Avalonia.Controls;
 using System.Collections.Generic;
 
 public class FileDialogExample
 {
    public void ShowFileDialog()
    {
       var dialog = new SaveFileDialog();
 
       // Filtersプロパティの設定方法 1
       // List<FileDialogFilter>の使用
       dialog.Filters = new List<FileDialogFilter>
       {
          new FileDialogFilter { Name = "すべてのファイル", Extensions = new List<string> { "*" } },
          new FileDialogFilter { Name = "テキストファイル", Extensions = new List<string> { "txt" } },
          new FileDialogFilter { Name = "テキストファイルとすべてのファイル", Extensions = new List<string> { "txt", "*" } },
          new FileDialogFilter { Name = "XMLファイル", Extensions = new List<string> { "xml" } },
          new FileDialogFilter { Name = "HTMLファイル", Extensions = new List<string> { "html", "htm" } },
          new FileDialogFilter { Name = "XMLファイルとHTMLファイルとすべてのファイル", Extensions = new List<string> { "xml", "html", "htm", "*" } },
          new FileDialogFilter { Name = "イメージファイル", Extensions = new List<string> { "png", "jpg", "gif", "bmp" } }
       };
 
       // Filtersプロパティの設定方法 2
       // FiltersのAddメソッドの使用
       dialog.Filters.Add(new FileDialogFilter { Name = "すべてのファイル", Extensions = { "*" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "テキストファイル", Extensions = { "txt" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "テキストファイルとすべてのファイル", Extensions = new List<string> { "txt", "*" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "XMLファイル", Extensions = { "xml" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "HTMLファイル", Extensions = new List<string> { "html", "htm" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "XMLファイルとHTMLファイルとすべてのファイル", Extensions = new List<string> { "xml", "html", "htm", "*" } });
       dialog.Filters.Add(new FileDialogFilter { Name = "イメージファイル", Extensions = new List<string> { "png", "jpg", "gif", "bmp" } });
 
       // ファイル選択ダイアログを表示
       var result = await dialog.ShowAsync(this);
       if (result != null)
       {
          foreach (var path in result)
          {
             System.Console.WriteLine($"Selected file: {path}");
          }
       }
    }
 }

使用例

以下の例では、Avalonia UIを使用してファイル保存ダイアログを実装している。

 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
 using System;
 using System.IO;
 using System.Threading.Tasks;
 
 namespace AvaloniaFileSaveDialog
 {
    public partial class MainWindow : Window
    {
       public MainWindow()
       {
          InitializeComponent();
       }
 
       private void InitializeComponent()
       {
          AvaloniaXamlLoader.Load(this);
       }
 
       // 保存ボタンを押下
       public async void OnSaveButtonClicked(object sender, RoutedEventArgs e)
       {
          try
          {
             string content = "これはファイルの内容です";  // 保存する内容
             string savedFilePath = await ShowSaveFileDialogAsync();
 
             if (!string.IsNullOrEmpty(savedFilePath))
             {
                await SaveFileAsync(savedFilePath, content);
                Console.WriteLine("成功", $"ファイルを正常に保存: {savedFilePath}");
             }
          }
          catch (Exception ex)
          {
             Console.WriteLine("エラー", $"ファイルの保存中にエラーが発生: {ex.Message}");
          }
       }
 
       // ファイル保存ダイアログを表示して、選択されたファイルパスを返す
       private async Task<string> ShowSaveFileDialogAsync()
       {
          var saveFileDialog = new SaveFileDialog();
 
          // ダイアログのタイトル
          saveFileDialog.Title = "ファイルを保存";
 
          // .txtファイルのフィルタを追加
          saveFileDialog.Filters.Add(new FileDialogFilter { Name = "テキストファイル", Extensions = { "txt" } });
 
          string result = await saveFileDialog.ShowAsync(this);
          return result;
       }
 
       // 指定されたパスにファイルを非同期で保存
       private async Task SaveFileAsync(string filePath, string content)
       {
          await File.WriteAllTextAsync(filePath, content);
       }
    }
 }

ディレクトリ選択タイアログ

OpenFolderDialogクラスのプロパティ

下表に、ディレクトリ選択ダイアログのプロパティのうち、設定を意識する必要がある主なプロパティを示す。

表. OpenFolderDialogクラスの主なプロパティ

プロパティ名	データ型	意味
AllowMultiple	bool	複数のアイテムの選択を許可するかどうかを指定する。複数のアイテムを選択する場合 : true 単一のファイルのみの場合 : false (既定値 : false)
Directory	string	ダイアログが最初に開くディレクトリのパスを指定する。ユーザが頻繁にアクセスするディレクトリやアプリケーションのデフォルトディレクトリを初期表示するために使用する。例: "ドキュメント"ディレクトリを初期ディレクトリとして指定する場合 `Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments)`
SuggestedStartLocation	IStorageFolder型	ダイアログの推奨される開始位置を指定する。 `Directory`プロパティの代替として使用できる。特定のストレージプロバイダ (例: OneDriveディレクトリ) を初期位置として指定する場合に特に有効である。 ※注意この値が設定されている場合、Directoryプロパティよりも優先される。
Title	string	ディレクトリ選択ダイアログのウインドウタイトルを指定する。

使用例

以下の例では、Avalonia UIを使用してディレクトリ選択ダイアログを使用している。

 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Interactivity;
 using System;
 using System.Threading.Tasks;
 
 public partial class MainWindow : Window
 {
    public MainWindow()
    {
       InitializeComponent();
    }
 
    // ディレクトリ選択ボタンのクリックイベントハンドラ
    private async void OnSelectDirectoryClicked(object sender, RoutedEventArgs e)
    {
       try
       {
          // OpenFolderDialogのインスタンスを生成
          var dialog = new OpenFolderDialog
          {
             // ダイアログのタイトルを設定
             Title = "ディレクトリを選択してください",
 
             // 初期ディレクトリを設定
             Directory = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments)
          };
 
          // SuggestedStartLocationを設定
          // デスクトップディレクトリを推奨開始位置として使用
          var desktopFolder = await StorageProvider.TryGetFolderFromPathAsync(
                                       Environment.GetFolderPath(Environment.SpecialFolder.Desktop));
          if (desktopFolder != null)
          {
             dialog.SuggestedStartLocation = desktopFolder;
          }
          else
          {  // デスクトップフォルダが取得できない場合は、従来のDirectoryプロパティを使用
             dialog.Directory = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
          }
 
          // ダイアログを表示して、ディレクトリを選択するまで待機
          string? result = await dialog.ShowAsync(this);
 
          // 結果の処理
          if (result != null)
          {  // 選択されたディレクトリパスを表示
             Console.WriteLine($"{result}");
          }
          else
          {  // ユーザがキャンセルした場合やディレクトリが選択されなかった場合
             Console.WriteLine("ディレクトリが未選択");
          }
       }
       catch (Exception ex)
       {  // 予期せぬエラーが発生した場合
          await ShowMessage($"エラーが発生: {ex.Message}");
       }
    }
 }

ディレクトリ選択タイアログ (StorageProviderクラス)

StorageProviderクラスのプロパティ

下表に、ディレクトリ選択ダイアログのプロパティのうち、設定を意識する必要がある主なプロパティを示す。

表. StorageProviderクラスの主なプロパティ

プロパティ名	データ型	意味
AllowMultiple	bool	複数のアイテムの選択を許可するかどうかを指定する。複数のアイテムを選択する場合 : true 単一のファイルのみの場合 : false (既定値 : false)
FileTypeFilter	IReadOnlyList<FilePickerFileType>型	`FilePickerOpenOptions`等のオプションクラスのプロパティとして使用する。選択可能なファイルタイプを制限するためのフィルタのリストを指定する。
SuggestedStartLocation	IStorageFolder型	ファイルピッカーやフォルダピッカーが開く初期ディレクトリを指定する。 `FilePickerOpenOptions`や`FolderPickerOpenOptions`等のオプションクラスのプロパティとして使用する。未指定または`null`を指定した場合、ファイルピッカーやフォルダピッカーは、システムやアプリケーションのデフォルトの開始位置を使用する。多くの場合、ユーザのドキュメントディレクトリ、または、最後にファイルピッカーを使用した場所になる。
Title	string	ファイル選択ダイアログのウインドウタイトルを指定する。

使用例

以下の例では、指定された開始位置 ("/usr/local/bin") からディレクトリ選択ダイアログを開き、ユーザが選択したディレクトリのパスを取得している。

 using Avalonia.Platform.Storage;
 using System.IO;
 using System.Threading.Tasks;
 
 public class MyClass
 {
    public async Task OpenDirectoryAsync()
    {
       var storageProvider = TopLevel.GetTopLevel(this)?.StorageProvider;
       if (storageProvider != null)
       {
          var options = new FolderPickerOpenOptions
          {
             SuggestedStartLocation = await storageProvider.TryGetFolderFromPathAsync("/usr/local/bin"),
             AllowMultiple = false
          };
 
          var folders = await storageProvider.OpenFolderPickerAsync(options);
 
          if (folders.Count > 0)
          {
             var selectedFolder = folders[0];
             // 選択されたディレクトリに対する処理
             // 例: ディレクトリのパスを取得
             var path = await selectedFolder.GetPathAsync();
             System.Diagnostics.Debug.WriteLine($"選択ディレクトリ: {path}");
          }
       }
    }
 }

ディレクトリパスのURLデコード

Avalonia UIのストレージシステムは、内部でパスの処理を適切に行うように設計されている。
そのため、IStorageFolder.GetPathAsyncメソッドは、デコードされたパスを返す。

しかし、もしパスに特殊文字が含まれている場合や何らかの理由でURLエンコードされた形式で返される可能性がある場合は、以下に示すようにURLデコードを行うことができる。

 // 方法 1
 
 using System.Web;
 
 var path = await selectedFolder.GetPathAsync();
 var decodedPath = HttpUtility.UrlDecode(path);
 System.Diagnostics.Debug.WriteLine($"選択ディレクトリ: {decodedPath}");

 // 方法 2
 
 using System.Net;
 using System.Linq;
 
 // ディレクトリが空でないことを確認
 if (folders.Any())
 {
    var selectedFolder = folders.First();
    var path = await selectedFolder.GetPathAsync();  // パスを取得
    var decodedPath = WebUtility.UrlDecode(path);    // パスをデコード
    System.Diagnostics.Debug.WriteLine($"選択ディレクトリ: {decodedPath}");
 }
 else
 {
    System.Diagnostics.Debug.WriteLine("ディレクトリが未選択");
 }

「Avalonia UI - ダイアログ」の版間の差分

2024年9月25日 (水) 16:27時点における版

概要

MsBox.Avaloniaライブラリ

MsBox.Avaloniaライブラリとは

MsBox.Avaloniaライブラリのインストール

メッセージボックスの表示

カスタムメッセージボックス

プロパティ

ウインドウのプロパティ

コンテンツのレイアウト

テキストブロックのプロパティ

ボタンのプロパティ

アイコンとイメージ

複数のボタン

カスタムスタイル

アニメーション

キーボードショートカット

アクセシビリティ

使用例 1

使用例 2

ファイル選択タイアログ

OpenFileDialogのプロパティ

Filtersプロパティ (ファイルの種類) の設定

使用例

ファイル選択タイアログ (StorageProviderクラス)

StorageProviderのプロパティ

FileTypeFilter (ファイルの種類) の設定

使用例

ファイル保存タイアログ (SaveFileDialogクラス)

SaveFileDialogのプロパティ

Filtersプロパティ (ファイルの種類) の設定

使用例

ディレクトリ選択タイアログ

OpenFolderDialogクラスのプロパティ

使用例

ディレクトリ選択タイアログ (StorageProviderクラス)

StorageProviderクラスのプロパティ

使用例

ディレクトリパスのURLデコード

案内メニュー

検索