목차
Snackbar는 무엇이고 MaterialDesign Snackbar는 어떻게 사용할 수 있는 지에 대하여 알아보자.
Snackbar란?
Snackbar란 화면의 상단 혹은 하단에 메세지 또는 알림을 제공하는 것이다. 예를 들면 작업의 진행 상태를 알려주거나 오류가 발생하여 사용자에게 알려줘야 하는 경우에 사용된다. Snackbar의 경우 특정 시간이 지나면 사라지고, 클릭 버튼으로 닫을 수 도 있다. 스마트폰(안드로이드)에서는 Toastbar와 비슷한 역할을 한다.
Snackbar와 Toastbar의 차이점
Toastbar는 알림이나 메세지를 표시하고 일정 시간이 지나면 사라지지만 Snackbar는 사용자가 메세지를 읽고 특정 작업을 더 수행 할 수 있는 특징이 있다. 예를 들면 사용자가 메세지 창을 읽고 닫기 버튼을 클릭하거나 오류 발생 시에 메세지를 전송하는 등 추가적인 옵션 작업이 가능하다. Toastbar는 내용을 전달하는데 목적이 있다면, Snackbar는 프로그램과 상호 작용할 수 있다는 가장 큰 차이점이라고 볼 수 있다.
Material Design Snackbar 구현 결과
아래의 구현 결과는 A버튼 클릭 시 Snackbar메세지를 최대 5초 동안 유지하고, Snackbar Message에 OK 버튼을 배치하여 5초 이전에 클릭 시에는 Snackbar가 닫히도록 구현하였다. 5초가 끝나기 전에 또 다른 메세지가 들어온다면, Queue에 대기하였다가 보여준다.
Material Design Snackbar 코드 구현
STEP1
Material Design 라이브러리 설치 및 설정한 후, 아래와 같이 원하는 위치에 Snackbar컨트롤러를 배치한다. 아래의 코드는 A Button을 클릭 시 Snackbar의 메세지를 띄울 수 있게 구현하였다.
<Window x:Class="MaterialDesignTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MaterialDesignTest"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
Title="MainWindow" Height="250" Width="350">
<Grid>
<Button x:Name="btnA" Content="A Button" Width="150" Click="btnA_Click"></Button>
<materialDesign:Snackbar x:Name="MainSnackbar" MessageQueue="{materialDesign:MessageQueue}"/>
</Grid>
</Window>STEP2
선언한 Snackbar의 MessageQueue에 메세지를 전송하는 코드를 작성한다.
private void btnA_Click(object sender, RoutedEventArgs e)
{
OnShowSnackbar("A Button clicked");
}
private void OnShowSnackbar(string message)
{
MainSnackbar.MessageQueue?.Enqueue(message, "OK", param => Trace.WriteLine("Actioned: " + param), message);
}