[C#/WPF] Storyboard 엘리먼트 : 슬라이딩 패널 만들기

TestProject.zip

0.01MB

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="Storyboard 엘리먼트 : 슬라이딩 패널 만들기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Storyboard x:Key="OpenMenuStoryboardKey">
            <ThicknessAnimation
                Storyboard.TargetProperty="Margin"
                DecelerationRatio="0.9"
                Duration="0:0:0.5"
                From="-150 0 0 0"
                To="0 0 0 0" />
        </Storyboard>
        <Storyboard x:Key="CloseMenuStoryboardKey">
            <ThicknessAnimation
                Storyboard.TargetProperty="Margin"
                DecelerationRatio="0.9"
                Duration="0:0:0.5"
                From="0 0 0,0"
                To="-150 0 0 0" />
        </Storyboard>
    </Window.Resources>
    <Grid>
        <StackPanel Name="leftMenuStackPanel" Panel.ZIndex="2"
            HorizontalAlignment="Left"
            VerticalAlignment="Stretch"
            Margin="-150 0 0 0"
            Orientation="Horizontal">
            <Border
                Width="150"
                BorderBrush="#af1719"
                BorderThickness="1"
                Background="GhostWhite">
                <Button Name="clostButton"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Top"
                    Height="40"
                    BorderBrush="AliceBlue"
                    HorizontalContentAlignment="Center"
                    FontWeight="SemiBold"
                    Content="메뉴 닫기" />
            </Border>
            <StackPanel Orientation="Vertical">
                <Grid Margin="0 21 0 0">
                    <Button Name="showButton"
                        Width="20"
                        Height="20"
                        BorderThickness="0"
                        ToolTip="메뉴 열기"
                        Content="O" />
                </Grid>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

 

728x90

 

▶ MainWindow.xaml.cs

using System;
using System.Windows;
using System.Windows.Media.Animation;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            this.showButton.Click  += showButton_Click;
            this.clostButton.Click += closeButton_Click;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 표시 버튼 클릭시 처리하기 - showButton_Click(sender, e)

        /// <summary>
        /// 표시 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void showButton_Click(object sender, RoutedEventArgs e)
        {
            this.showButton.Visibility = Visibility.Collapsed;

            Storyboard storyboard = Resources["OpenMenuStoryboardKey"] as Storyboard;

            storyboard.Begin(leftMenuStackPanel);
        }

        #endregion
        #region 닫기 버튼 클릭시 처리하기 - closeButton_Click(sender, e)

        /// <summary>
        /// 닫기 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void closeButton_Click(object sender, RoutedEventArgs e)
        {
            Storyboard closeStoryboard = Resources["CloseMenuStoryboardKey"] as Storyboard;

            closeStoryboard.Completed += closeStorboard_Completed;

            closeStoryboard.Begin(leftMenuStackPanel);
        }

        #endregion

        #region 닫기 스토리보드 완료시 처리하기 - closeStorboard_Completed(sender, e)

        /// <summary>
        /// 닫기 스토리보드 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void closeStorboard_Completed(object sender, EventArgs e)
        {
            this.showButton.Visibility = Visibility.Visible;
        }

        #endregion
    }
}