[XAML] 윈도우10 앱에 햄버거 메뉴 추가

Windows Universal App이나 다른 플랫폼의 앱을 보면 다음과 같은 형태의 메뉴를 볼 수 있습니다.

왼쪽 상단의 버튼을 누르면 다음과 같이 메뉴가 펼쳐집니다.

햄버거 메뉴(Hamburger Menu)라고 불리는 메뉴입니다.

간단하게 햄버거 메뉴를 추가하는 방법에 대해서 알아보도록 하겠습니다.

먼저 Visual Studio 2015에서 프로젝트를 생성합니다.

Templates > Visual C# > Windows > Universal로 이동해서 Blank App을 생성합니다.

프로젝트 이름은 HamburgerDemo 라고 작성하고 OK를 누릅니다.

프로젝트가 생성되며 윈도우 10은 하나의 프로젝트로 생성이 됩니다.

햄버거 메뉴는 XAML의 SplitView를 통해서 구현이 가능합니다.

MainPage.xaml 파일을 열어서 다음과 같이 <Grid> 태그 사이에 XAML 코드를 입력합니다.

    <SplitView>
        <SplitView.Pane>
            
        </SplitView.Pane>
        <Frame x:Name="scenarioFrame">
            <StackPanel>
                <TextBlock Text="Hello!!"/>
            </StackPanel>
        </Frame>
    </SplitView>

아직은 정상적으로 표시가 되지 않습니다.

이제 그리고 SplitView 태그를 다음과 같이 변경합니다.

<SplitView x:Name="MySplitView" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">

이름은 MySplitView로 설정하고 접힌 상태로 표시되도록 합니다.

그리고 펼쳐졌을 때의 길이와 접혔을 때의 길이를 설정합니다.

이제 <SplitView.Pane> 태그 사이에 실제 버튼들을 추가합니다.

            <StackPanel Background="Gray">
                <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#x_E700;"
                    Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#x_E80F;"
                    Width="50" Height="50" Background="Transparent"/>
                    <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="&#x_E77B;"
                        Width="50" Height="50" Background="Transparent"/>
                    <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="&#x_E715;"
                        Width="50" Height="50" Background="Transparent"/>
                    <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
            </StackPanel>

각 버튼의 Content에서 _를 반드시 제거해야 합니다.

Segoe MDL2 Assets에 자주 사용하는 아이콘들이 있는데 정상적으로 표시가 되지 않아 _를 추가했습니다.

이제 VisualStateManager를 추가해서 넓은 화면과 좁은 화면에서의 처리를 추가합니다.

SplitView는 몇가지 DisplayMode를 가지게 됩니다.

Inline의 경우 펼쳐질 때 오른쪽의 컨텐츠 화면을 밀면서 펼쳐집니다.

Overlay는 컨텐츠 화면이 그대로 있는 상태에서 메뉴가 덮어지는 형태로 펼쳐집니다.

그리고 CompactInline과 CompactOverlay는 기본적으로는 Inline, Overlay와 유사합니다.

다만 SplitView의 CompactPaneLength에 정수값을 지정하면 접힐 때 해당 길이만큼이 화면에 표시됩니다.

가장 위에서 햄버거 메뉴의 예제로 표시된 이미지와 동일한 형태로 접히게 됩니다.

PC 화면의 경우 오른쪽의 컨텐츠 공간이 충분하기 때문에 밀면서 메뉴가 표시되는 CompactInline을 사용합니다.

윈도폰의 경우는 Overlay가 적합합니다.

<Grid> 태그의 여는 부분 바로 다음에 VisualStateManager를 추가합니다.

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="wideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="641" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MySplitView.DisplayMode" Value="CompactInline"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="narrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MySplitView.DisplayMode" Value="Overlay"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

마지막으로 간단한 코드를 작성합니다.

햄버거 메뉴가 펼쳐졌을 때 클릭하면 접히도록 하고 그 반대의 기능 역시 할 수 있도록 코드를 추가합니다.

HamburgerButton 컨트롤에 보면 Click 이벤트를 처리할 HamburgerButton_Click이라는 이벤트 핸들러가 보입니다.

MainPage.cs 파일에 다음을 추가합니다.

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
        MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}

이제 실행을 하면 햄버거 메뉴가 표시되는 것을 확인할 수 있습니다.

그리고 왼쪽 상단의 버튼을 누르면 정상적으로 메뉴가 확장되는 것을 확인할 수 있습니다.

전체 XAML 코드는 아래와 같습니다.

빈 MainPage.xaml에 그대로 복사해서 붙여넣으면 됩니다.

<Page
    x:Class="HamburgerDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HamburgerDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="wideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="641" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MySplitView.DisplayMode" Value="CompactInline"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="narrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MySplitView.DisplayMode" Value="Overlay"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <SplitView x:Name="MySplitView" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">
            <SplitView.Pane>
                <StackPanel Background="Gray">
                    <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#x_E700;"
                    Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#x_E80F;"
                    Width="50" Height="50" Background="Transparent"/>
                        <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="&#x_E77B;"
                        Width="50" Height="50" Background="Transparent"/>
                        <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="&#x_E715;"
                        Width="50" Height="50" Background="Transparent"/>
                        <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
                    </StackPanel>
                </StackPanel>
            </SplitView.Pane>
            <Frame x:Name="scenarioFrame">
                <StackPanel>
                    <TextBlock Text="Hello!!"/>
                </StackPanel>
            </Frame>
        </SplitView>
        
    </Grid>
</Page>

이 방법 대신 Grid를 Column으로 나누고 왼쪽에 햄버거 버튼 메뉴를 두고 그 옆에 SplitView를 두기도 합니다.

MSDN의 몇몇 샘플은 이런 방식으로 구현되어 있기도 합니다.

이것으로 간단하게 햄버거 메뉴를 추가할 수 있게 되었습니다.