[C# WPF] Window화면 Custom하기

이번에 소개해드리는 것은 WPF에서 기본적으로 제공하는 Window창의 테두리를 저희 입맛에 맞게 바꾸는 것을 해보겠습니다. WPF에는 Window, UserControl, Page등으로 화면을 만들 수 있습니다. 그 중 Window에는 화면 빌드시 Window의 기본적인 요소들이 있는데 이러한 기본요소가 실제 프로젝트를 만들때는 오히려 까다로운 존재일 수 있습니다.

그렇다면 이러한 윈도우의 속성을 제거한 후 타이틀바를 새로 만드는 방법이 훨씬 커스텀하기 편할것입니다. 

방법은 간단합니다. Window의 속성에서 WindowStyle="None"으로 설정해주시기만 하면 해결됩니다. 그 후 위쪽에 타이틀바를 만들고 우상단에 최소화 최대화 종료 버튼을 추가하는 것으로 해결할 수 있습니다.

이전 포스팅을 보니 MVVM 디자인 패턴에 대하여 설명하였는데 WPF를 하면서 엄격하게 MVVM 패턴을 고수하다보면 쉽게 갈 수 있는 길도 어려운 경우가 발생하는 것을 느꼇습니다. 그렇기에 화면과 코드비하인드의 관계를 조금은 수용하는 것도 필요한 것이 제 생각입니다.

본격적으로 타이틀바를 만들어보도록 하겠습니다.

<Window x:Class="WindowCustom.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:WindowCustom"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" 
        WindowStyle="None"
        AllowsTransparency="True"
        >
 
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
 
        <!-- 타이틀바에 해당하는 공간 -->
        <Grid Grid.Row="0">
 
            <Rectangle MouseLeftButtonDown="Rectangle_MouseDown" 
                       Fill="BlueViolet">
                
            </Rectangle>
 
            <DockPanel HorizontalAlignment="Right">
                <Button x:Name="ToMiniButton" 
                        Click="ToMiniButton_Click"
                        Width="30"
                        Height="30"></Button>
                <Button x:Name="ToMaxButton" 
                        Click="ToMaxOrNormalButton_Click"
                        Width="30"
                        Height="30"></Button>
                <Button x:Name="CloseButton" 
                        Click="CloseButton_Click"
                        Width="30"
                        Height="30"></Button>
 
            </DockPanel>
            
        </Grid>
 
        <!-- 화면의 콘텐츠를 넣을 공간 -->
        <Grid Grid.Row="1">
            
        </Grid>
        
    </Grid>
    
</Window>
 

위의 코드는 뷰에 해당하는 코드로써 타이틀바를 만들고 우측에 버튼을 두고 일반적인 윈도우 동작기능을 할 수 있도록 만들었습니다. 기본적인 이벤트를 이용해서 쉽게 화면을 제어할 수 있는 커스텀 윈도우입니다. 이 후의 작업은 스타일작업이며 프로젝트의 테마에 따라 개발자가 마음대로 커스텀 하면 됩니다.

아래의 코드는 코드비하인드의 코드입니다.

using System.Windows;
using System.Windows.Input;
 
namespace WindowCustom
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
 
 
 
        private void Rectangle_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }
        
        private void ToMiniButton_Click(object sender, RoutedEventArgs e)
        {
            this.WindowState = System.Windows.WindowState.Minimized;
        }
      
        private void ToMaxOrNormalButton_Click(object sender, RoutedEventArgs e)
        {
            if (this.WindowState == System.Windows.WindowState.Maximized)
            {
                this.WindowState = System.Windows.WindowState.Normal;
            } else if (this.WindowState == System.Windows.WindowState.Normal)
            {
                this.WindowState = System.Windows.WindowState.Maximized;
            }
        }
        
        private void CloseButton_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
    }
}
 

이렇게 하면 간단한 커스텀 윈도우를 만들 수 있습니다.