[WPF] 타이틀 바 만들기_닫기, 최소화, 사이즈 조절버튼(1)

안녕하세요. 

오늘은 WPF에서 기본으로 제공하는 타이틀 바가 아닌 타이틀바를 직접 커스텀 해보겠습니다.

 

어떤 프로그램을 만들때 기본제공되는 타이틀바도 좋지만 커스텀한다면 더욱 프로그램이 예뻐보이겠죠?

 

시작하겠습니다.

 

먼저 WPF프로젝트를 하나 만들겠습니다.

 

저같은경우에는 타이틀바를 맨위에서 높이 30정도로만 주고 만들겠습니다. 크기는 마음대로 하셔도 무방합니다.

 

        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>

윗부분을 타이틀 바로 사용할 예정입니다.

 

그리고 여기서 저는 첫 RowDefinition에 다시 5개의 Column을 나누겠습니다.

순서는 아이콘(Image), 타이틀바 제목(내용)부분(Dock), 최소화(Button), 최대화(Button), 닫기(Button)

순으로 제작을 해보겠습니다.

 

앞서 분배한 RowDefinition 중 첫 번째 row에 할당하며 비율은 

아이콘(30), Dock(1*), 최소화 버튼(30), 최대화 버튼(30), 닫기 버튼(30)로 하겠습니다.

 

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30"/>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="30"/>
                <ColumnDefinition Width="30"/>
                <ColumnDefinition Width="30"/>
            </Grid.ColumnDefinitions>

이렇게 설정하면 되겠네요.

다음은 이미지, 타이틀, 버튼입니다.

 

오늘은 버튼(최소화, 최대 or 노말, 닫기) 버튼 부분을 구현하고자 합니다.

            <Button Grid.Column="2" Background="Transparent" Content="최소" Click="ToMinButton_Click" />
            <Button Name="SizeButton" Grid.Column="3" Background="Transparent" Content="최대" Click="SizeButton_Click"/>
            <Button Grid.Column="4" Background="Transparent" Content="닫기" Click="CloseButton_Click"/>

네 이렇게 지정하겠습니다.

Click이벤트의 이름을 보면 각각 버튼이 어떤 동작을 할 예정인지 유추가능하실거라 생각이 되네요.

 

그럼이제 '닫기' 버튼부터 이벤트를 추가해보겠습니다.

아! 시작전에 MVVM으로 안하나? 라는 생각이 들 수 있습니다.

그러나 MVVM은 Business Logic을 담는 부분으로 알고있기에 이런 타이틀바는 코드비하인드인 cs파일에 구현하도록 하겠습니다.

 

그럼 바로 '닫기' 버튼부터만나보시죠!

        private void CloseButton_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

닫기버튼으 구현입니다. 간단하죠?

this.Close() 코드 한 줄만넣어주면 간단하게 구현 할 수 있습니다.

 

다음은 '최소화' 버튼입니다. 누르면 어플리케이션이 샥~ 사라집니다.

역시 한 줄로 해결 가능합니다.

        private void ToMinButton_Click(object sender, RoutedEventArgs e)
        {
            this.WindowState = WindowState.Minimized;
        }

 

그리고 노멀 or 최대화입니다.

이부분은 노멀사이즈 일때는 최대화를

최대화일때는 노멀사이즈가 되도록 나눠줘야 하는 부분을 생각해주셔야 합니다.

        private void SizeButton_Click(object sender, RoutedEventArgs e)
        {
            if (this.WindowState == WindowState.Maximized)
            {
                this.WindowState = WindowState.Normal;
                SizeButton.Content = "최대";
            }  
            else if (this.WindowState == WindowState.Normal)
            {
                this.WindowState = WindowState.Maximized;
                SizeButton.Content = "최소";
            }
                
        }

현재 어플리케이션의 상태가 Maximized라면 버튼 클릭시 노멀사이즈로

어플리케이션 창의 상태가 노멀사이즈면 최대화 사이즈로 변경해 줍니다.

 

그리고 실제 윈도우 환경에서도 최대, 노멀일때 각각 아이콘이 달라지기에 저도 그렇게 설정하겠습니다.

 

구현화면

이상입니다. 감사합니다. :D

 

*********************************************

 

추가글

 

제가 몰랐는데 최대화시 밑의 테스크 바도 가리는오류가 있었네요.

급하게 수정코드를 추가합니다.

 

            InitializeComponent();
            this.MaxHeight = SystemParameters.MaximizedPrimaryScreenHeight;

해당 코드를 넣어 최대 높이를 정해주면 최대화시에도 테스크바를 덮지 않는걸 확인하실 수 있습니다.

 

출처

https://stackoverflow.com/questions/6890472/wpf-maximize-window-with-windowstate-problem-application-will-hide-windows-ta

WPF : Maximize window with WindowState Problem (application will hide windows taskbar)

 

남기겠습니다.

 

문제시 삭제하겠습니다.

 

감사합니다.:D