[wpf]서랍 메뉴 : Drawer Menu

최종 동작

서랍 메뉴 혹은 메뉴 서랍은 보통 모바일 앱이나 웹 앱에서 자주 쓰입니다.

이것을 wpf로 제작할 경우 다음과 같이 따라 하시면 됩니다.

 

1. 프로젝트 구성하기

[새 프로젝트 만들기]에서 [WPF 앱(. NET Framework)]를 선택합니다.

 

프로젝트 이름과 위치를 원하는 대로 설정해주시면 됩니다.

 

설정을 마친 후 [만들기] 버튼을 클릭하게 되면 새로운 프로젝트 구성이 완료됩니다.

 

창의 크기를 자유롭게 조정합니다. 조정이 필요 없으시면 조정 안 하셔도 됩니다. :D

저는 Width만 Height와 같은 크기로 변경하였습니다.

 

2. 메뉴 서랍 부분 Grid 만들기

<Grid></Grid> 사이에 다음과 같은 Grid를 하나 생성합니다.

<Grid x:Name="GridMenu" Width="150" HorizontalAlignment="Left" Margin="-150, 0, 0, 0" Background="White">

 

각 항목을 간단히 정리하면 다음과 같습니다.

x:Name	그리드의 이름
Width	그리드의 가로 폭 사이즈
HorizontalAlignment	가로 정렬(Left, Center, Right, Stretch)
Margin	가장자리 여유 공간으로 "왼쪽, 위쪽, 오른쪽, 아래"를 나타냄 ','없이 스페이스바로도 구분 가능 음수 값은 해당 항목의 반대로 설정
Background	배경 색상

만약 HorizontalAlignment를 Left 정렬하지 않거나 Margin을 Width의 음수 값만큼 주지 않는다면 서랍 메뉴를 열지 않았을 때에도 보이게 됩니다.

 

이 예제는 왼쪽에서 오른쪽으로 나오는 서랍 메뉴이기 때문에 다음과 같이 설정했습니다.

만약 서랍 메뉴를 아래에서 위로 나오는 메뉴로 하고 싶으실 경우는 다음과 같이 설정하시면 됩니다.

 

3. 서랍 메뉴를 여는 Button과 닫는 Button 만들기

  1) 여는 Button

2번에서 만들었던 메뉴 서랍 Grid 위에 Button을 생성합니다.

<Button x:Name="BtnOpen" HorizontalAlignment="Left" VerticalAlignment="Top" Width="30" Height="30" Content="메뉴"/>

 

  2) 닫는 Button

2번에서 만들었던 메뉴 서랍 Grid 안에 Button을 생성합니다.

<Button x:Name="BtnClose" HorizontalAlignment="Right" VerticalAlignment="Top" Width="30" Height="30" Content="닫기"/>

 

4. 메뉴를 열고 닫는 애니메이션 Storyboard 만들기

Storyboard를 만들기 전에 <Grid>를 일단 닫아줍니다. 빨간색 원부분을 클릭해서 닫으시면 됩니다.

 

닫은 <Grid> 위에 <Window.Resources></Window.Resources>를 추가합니다.

<Window.Resources> 안에 여는 Storyboard와 닫는 Storyboard를 추가하면 됩니다.

 

1) 여는 Storyboard

Storyboard의 Key값은 여는 버튼의 Name 그리고 DoubleAnimationUsingKeyFrames의 Storyboard.TargetName을 꼭 서랍 메뉴 Grid Name으로 적어줘야 합니다.

애니메이션은 x축의 값을 0.5초 동안 0에서 150으로 변경시키는 값입니다. 여기서 150으로 설정한 이유는 서랍 메뉴의 폭입니다.

<Storyboard x:Key="OpenMenu">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu">

        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/>
    </DoubleAnimationUsingKeyFrames>

</Storyboard>

 

 

2) 닫는 Storyboard

Storyboard의 Key값은 닫는 버튼의 Name 그리고 DoubleAnimationUsingKeyFrames의 Storyboard.TargetName을 꼭 서랍 메뉴 Grid Name으로 적어줘야 합니다.

애니메이션은 여는 Storyboard와 반대되게 설정하면 됩니다.

<Storyboard x:Key="CloseMenu">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu">
        <EasingDoubleKeyFrame KeyTime="0" Value="150"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
    </DoubleAnimationUsingKeyFrames>

</Storyboard>

 

이 애니메이션 기능을 쓰려면 서랍 메뉴에서 몇 가지를 추가해야 합니다.

서랍 메뉴 안의 닫기 Button 위에 다음을 추가해줍니다. 아래의 기능을 사용하겠다는 의미로 추가해줘야 합니다. 추가하지 않으면 오류가 발생합니다.

<Grid.RenderTransform> 

    <TransformGroup>
        <ScaleTransform/>
        <SkewTransform/>
        <RotateTransform/>
        <TranslateTransform/>

    </TransformGroup>
</Grid.RenderTransform>

 

5. EventTrigger 설정

4번에서 만든 Storyboard를 EventTrigger로 연결시켜줘야 합니다. 그 이유는 버튼을 울었을 때 이벤트가 일어나게끔 만들기 위해서입니다.

<Window.Resources></Window.Resources> 아래에 <Window.Triggers></Window.Triggers>를 추가합니다.

(보기 편하기 위해서 사용하지 않는 부분은 접어두었습니다.)

<Window.Triggers> 안에 다음의 내용을 추가합니다.

<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="BtnOpen">

    <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>

</EventTrigger>

<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="BtnClose">

    <BeginStoryboard Storyboard="{StaticResource CloseMenu}"/>

</EventTrigger>

 

여기까지만 하셔도 서랍 메뉴는 완성입니다. 확인을 해보면 다음과 같습니다.

서랍 메뉴의 배경색이 하얀색이어서 확인하기 힘드시면 서랍 메뉴의 Background 값을 다르게 변경하시면 됩니다.

 

추가적으로 서랍 메뉴가 열릴 때 뒤의 배경 색이 변하게도 설정 가능합니다.

1. Grid 안에 다음과 같이 추가합니다. 여기서 Opacity는 투명도 설정입니다. 0일 경우 투명으로 설정됩니다.

2. 애니메이션 Storyboard에 투명도를 변경하는 것을 추가해 줍니다.

 

서랍 메뉴가 열려있는 동안 바탕에 있는 컴포넌트들을 사용하지 않게 처리하시려면 [메뉴] 버튼을 눌렀을 때 컴포넌트들의 IsEnable를 False로 변경해주시면 됩니다.