スナックバー
- [アーティクル]
-
-
Snackbar
は、指定時刻に作動するアラートで、既定で画面の下部に表示されます。 これは、設定が可能な一定時間を経過すると閉じられます。 Snackbar
は完全にカスタマイズ可能で、任意の IView
に固定できます。
Snackbar
では、アプリが実行した、または実行するプロセスを、ユーザーに通知します。 これは、画面の下部に一時的に表示されます。
Snackbar
機能にアクセスするには、次のプラットフォーム固有の設定が必要です。
Snackbar
を使用する場合は、次の 2 つのステップを実行する必要があります。
1.MauiAppBuilder でスナックバーの使用を有効にする
UseMauiCommunityToolkit
を使用する場合は、options
パラメータを使用して、Windows でのスナックバーの使用を次のように有効にします。
var builder = MauiApp.CreateBuilder()
.UseMauiCommunityToolkit(options =>
{
options.SetShouldEnableSnackbarOnWindows(true);
})
上記では、ライフサイクル イベント (OnLaunched
と OnClosed
) を構成することで、必要なハンドラーが自動的に登録されます。
2.Package.appxmanifest ファイルに ToastNotification 登録を含める
スナックバー アクションを処理するには、次のように Platform\Windows\Package.appxmanifest
ファイルを変更する必要があります。
- Package.appxmanifest の開始
<Package>
タグに、次の XML 名前空間を追加します。
xmlns:com="http://schemas.microsoft.com/appx/manifest/com/windows10"
xmlns:desktop="http://schemas.microsoft.com/appx/manifest/desktop/windows10"
- Package.appxmanifest の開始
<Package>
タグで、さらに uap
rescap
com
と desktop
を含むように IgnorableNamespaces
を更新します。
IgnorableNamespaces="uap rescap com desktop"
例: 完成した <Package>
タグ
Snackbar
のサポートが追加された、完成した開始 <Package>
タグの例を次に示します。
<Package
xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
xmlns:com="http://schemas.microsoft.com/appx/manifest/com/windows10"
xmlns:desktop="http://schemas.microsoft.com/appx/manifest/desktop/windows10"
IgnorableNamespaces="uap rescap com desktop">
- Package.appxmanifest で、各
<Application>
タグ内に次の拡張機能を追加します。
<Extensions>
<!-- Specify which CLSID to activate when notification is clicked -->
<desktop:Extension Category="windows.toastNotificationActivation">
<desktop:ToastNotificationActivation ToastActivatorCLSID="6e919706-2634-4d97-a93c-2213b2acc334" />
</desktop:Extension>
<!-- Register COM CLSID -->
<com:Extension Category="windows.comServer">
<com:ComServer>
<com:ExeServer Executable="YOUR-PATH-TO-EXECUTABLE" DisplayName="$targetnametoken$" Arguments="----AppNotificationActivated:"> <!-- Example path to executable: CommunityToolkit.Maui.Sample\CommunityToolkit.Maui.Sample.exe -->
<com:Class Id="6e919706-2634-4d97-a93c-2213b2acc334" />
</com:ExeServer>
</com:ComServer>
</com:Extension>
</Extensions>
例: 完成した <Applications>
タグ
Snackbar
のサポートが追加された、完成した <Applications>
タグの例を次に示します。
<Applications>
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
<uap:VisualElements
DisplayName="$placeholder$"
Description="$placeholder$"
Square150x150Logo="$placeholder$.png"
Square44x44Logo="$placeholder$.png"
BackgroundColor="transparent">
<uap:DefaultTile Square71x71Logo="$placeholder$.png" Wide310x150Logo="$placeholder$.png" Square310x310Logo="$placeholder$.png" />
<uap:SplashScreen Image="$placeholder$.png" />
</uap:VisualElements>
<Extensions>
<desktop:Extension Category="windows.toastNotificationActivation">
<desktop:ToastNotificationActivation ToastActivatorCLSID="6e919706-2634-4d97-a93c-2213b2acc334" />
</desktop:Extension>
<com:Extension Category="windows.comServer">
<com:ComServer>
<com:ExeServer Executable="YOUR-PATH-TO-EXECUTABLE" DisplayName="$targetnametoken$" Arguments="----AppNotificationActivated:"> <!-- Example path to executable: CommunityToolkit.Maui.Sample\CommunityToolkit.Maui.Sample.exe -->
<com:Class Id="6e919706-2634-4d97-a93c-2213b2acc334" />
</com:ExeServer>
</com:ComServer>
</com:Extension>
</Extensions>
</Application>
</Applications>
例: Snackbar
をサポートするように更新された Package.appxmanifest
ファイル
Windows で Snackbar
をサポートするように更新された Package.appxmanifest
ファイルの例を次に示します。
<?xml version="1.0" encoding="utf-8"?>
<Package
xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
xmlns:com="http://schemas.microsoft.com/appx/manifest/com/windows10"
xmlns:desktop="http://schemas.microsoft.com/appx/manifest/desktop/windows10"
IgnorableNamespaces="uap rescap com desktop">
<Identity Name="maui-package-name-placeholder" Publisher="CN=Microsoft" Version="0.0.0.0" />
<Properties>
<DisplayName>$placeholder$</DisplayName>
<PublisherDisplayName>Microsoft</PublisherDisplayName>
<Logo>$placeholder$.png</Logo>
</Properties>
<Dependencies>
<TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
<TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
</Dependencies>
<Resources>
<Resource Language="x-generate" />
</Resources>
<Applications>
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
<uap:VisualElements
DisplayName="$placeholder$"
Description="$placeholder$"
Square150x150Logo="$placeholder$.png"
Square44x44Logo="$placeholder$.png"
BackgroundColor="transparent">
<uap:DefaultTile Square71x71Logo="$placeholder$.png" Wide310x150Logo="$placeholder$.png" Square310x310Logo="$placeholder$.png" />
<uap:SplashScreen Image="$placeholder$.png" />
</uap:VisualElements>
<Extensions>
<desktop:Extension Category="windows.toastNotificationActivation">
<desktop:ToastNotificationActivation ToastActivatorCLSID="6e919706-2634-4d97-a93c-2213b2acc334" />
</desktop:Extension>
<com:Extension Category="windows.comServer">
<com:ComServer>
<com:ExeServer Executable="YOUR-PATH-TO-EXECUTABLE" DisplayName="$targetnametoken$" Arguments="----AppNotificationActivated:"> <!-- Example path to executable: CommunityToolkit.Maui.Sample\CommunityToolkit.Maui.Sample.exe -->
<com:Class Id="6e919706-2634-4d97-a93c-2213b2acc334" />
</com:ExeServer>
</com:ComServer>
</com:Extension>
</Extensions>
</Application>
</Applications>
<Capabilities>
<rescap:Capability Name="runFullTrust" />
</Capabilities>
</Package>
アクティブ化の処理の詳細については、「C# アプリからローカル トースト通知を送信する」を参照してください
構文
Snackbar
は、C# を使用して呼び出されます。
C#
Snackbar
を表示するには、静的メソッド Make
を使用して、これを作成する必要があります。
using CommunityToolkit.Maui.Alerts;
CancellationTokenSource cancellationTokenSource = new CancellationTokenSource();
var snackbarOptions = new SnackbarOptions
{
BackgroundColor = Colors.Red,
TextColor = Colors.Green,
ActionButtonTextColor = Colors.Yellow,
CornerRadius = new CornerRadius(10),
Font = Font.SystemFontOfSize(14),
ActionButtonFont = Font.SystemFontOfSize(14),
CharacterSpacing = 0.5
};
string text = "This is a Snackbar";
string actionButtonText = "Click Here to Dismiss";
Action action = async () => await DisplayAlert("Snackbar ActionButton Tapped", "The user has tapped the Snackbar ActionButton", "OK");
TimeSpan duration = TimeSpan.FromSeconds(3);
var snackbar = Snackbar.Make(text, action, actionButtonText, duration, snackbarOptions);
await snackbar.Show(cancellationTokenSource.Token);
Snackbar.Make()
を呼び出す際には、そのパラメーター string text
が必須です。 その他のパラメーターはすべて省略可能です。
次のスクリーンショットに、Snackbar の結果を示します。
Snackbar
を任意の VisualElement
に固定する拡張メソッドもあります。
await MyVisualElement.DisplaySnackbar("Snackbar is awesome. It is anchored to MyVisualElement");
警告
Windows 上 の Snackbar
は VisualElement
に固定することはできません。また、常に既定の Windows 通知として表示されます。
SnackBar
には、次の 2 つのイベントが含まれています。
public static event EventHandler Shown
public static event EventHandler Dismissed
また、プロパティ public static bool IsShown { get; }
も含まれています。
Snackbar.Shown += (s, e) => { Console.WriteLine(Snackbar.IsShown); };
Snackbar.Dismissed += (s, e) => { Console.WriteLine(Snackbar.IsShown); };
Properties
プロパティ |
タイプ |
説明 |
テキスト |
string |
テキスト メッセージ。 必須 |
アクション |
Action |
アクション ボタンのクリックで呼び出すアクション。 |
ActionButtonText |
string |
アクション ボタンのテキスト。 |
アンカー |
IView |
Snackbar のアンカー。 Snackbar は、このビューの近くに表示されます。 null の場合、Snackbar は画面の下部に表示されます。 |
Duration |
TimeSpan |
Snackbar の期間。 |
VisualOptions |
SnackbarOptions |
Snackbar のビジュアル オプション。 |
SnackbarOptions
SnackbarOptions
により、既定の Snackbar
スタイルをカスタマイズできます。
Properties
プロパティ |
タイプ |
説明 |
規定値 |
CharacterSpacing |
double |
メッセージの文字間隔。 |
0.0d |
Font |
Font |
メッセージのフォント。 |
Font.SystemFontOfSize(14) |
TextColor |
Color |
メッセージのテキストの色。 |
Colors.Black |
ActionButtonFont |
Font |
アクション ボタンのフォント。 |
Font.SystemFontOfSize(14) |
ActionButtonTextColor |
Color |
アクション ボタンのテキストの色。 |
Colors.Black |
BackgroundColor |
Color |
背景色。 |
Colors.LightGray |
CornerRadius |
CornerRadius |
角の半径。 |
new CornerRadius(4, 4, 4, 4) |
メソッド
メソッド |
説明 |
表示 |
要求された Snackbar を表示します。 これにより、現在表示されている Snackbar はすべて閉じられます |
無視 |
要求された Snackbar を閉じます。 |
Note
一度に表示できる Snackbar
は 1つだけです。 Show
メソッドを 2 度目に呼び出すと、最初の Snackbar
は、2 番目の Snackbar
が表示される前に自動的に閉じられます。
例
この機能の動作状態の例は、.「NET MAUI Community Toolkit サンプル アプリケーション」でご覧になれます。
API
Snackbar
のソース コードは、.NET MAUI Community Toolkit の GitHub リポジトリにあります。