스낵바

아티클
03/29/2024

기본적으로 Snackbar 화면 아래쪽에 표시되는 시간 제한 경고입니다. 구성 가능한 시간 후에 해제됩니다. Snackbar 는 완전히 사용자 지정할 수 있으며 모든 IView에 고정할 수 있습니다.

앱 Snackbar 이 수행했거나 수행할 프로세스를 사용자에게 알릴 수 있습니다. 화면 아래쪽으로 일시적으로 나타납니다.

플랫폼별 초기화

기능에 액세스 Snackbar 하려면 다음 플랫폼별 설정이 필요합니다.

설정은 필요하지 않습니다.

사용하는 Snackbar 경우 다음 두 단계를 수행해야 합니다.

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> 는 태그에서도 포함하도록 업데이트 IgnorableNamespaces 하고 desktop다음을 수행 uap rescap com 합니다.

IgnorableNamespaces="uap rescap com desktop"

예: 완료된 `<Package>` 태그

다음은 다음에 대한 지원을 추가한 완료된 여 <Package> 는 태그의 예입니다.Snackbar

<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>` 태그

다음은 다음에 대한 지원을 추가한 완료된 <Applications> 태그의 예입니다.Snackbar

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

예: 지원하도록 업데이트된 `Package.appxmanifest` 파일 `Snackbar`

다음은 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 가 필요합니다. 다른 모든 매개 변수는 선택적 요소입니다.

다음 스크린샷은 결과 스낵바를 보여줍니다.

Android
iOS

Android의 스낵바 스크린샷

확장 메서드도 있습니다. 이 메서드는 다음 항목에 VisualElement고정됩니다Snackbar.

await MyVisualElement.DisplaySnackbar("Snackbar is awesome. It is anchored to MyVisualElement");

Warning

Snackbar windows에서는 고정 VisualElement 할 수 없으며 항상 기본 Windows 알림으로 표시됩니다.

SnackBar 에는 다음 두 개의 이벤트가 포함됩니다.

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

속성

속성	Type	설명
Text	`string`	문자 메시지. Required
작업	`Action`	작업 단추 클릭 시 호출할 작업입니다.
ActionButtonText	`string`	작업 단추 텍스트입니다.
기준 위치	`IView`	`Snackbar` 닻. `Snackbar` 이 보기 근처에 나타납니다. `Snackbar` 이 경우 `null`화면 아래쪽에 표시됩니다.
기간	`TimeSpan`	`Snackbar` 기간.
VisualOptions	`SnackbarOptions`	`Snackbar` 시각적 옵션입니다.

SnackbarOptions

SnackbarOptions 기본 Snackbar 스타일을 사용자 지정할 수 있습니다.

속성

속성	Type	설명	기본값
CharacterSpacing	`double`	메시지 문자 간격입니다.	`0.0d`
글꼴	`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`된 을 해제합니다.

참고 항목

동시에 1 Snackbar 만 표시할 수 있습니다. 메서드를 Show 두 번째로 호출하면 두 번째 메서드가 표시되기 전에 첫 번째 Snackbar Snackbar 메서드가 자동으로 해제됩니다.

예제

.NET MAUI 커뮤니티 도구 키트 샘플 애플리케이션에서 작동 중인 이 기능의 예를 찾을 수 있습니다.

API

.NET MAUI 커뮤니티 도구 키트 GitHub 리포지토리에서 오버에 대한 Snackbar 소스 코드를 찾을 수 있습니다.

다음을 통해 공유

스낵바