[C#] WPF로 Mac 스타일 Topbar 만들기

 

오랜만에 포스팅이다. 

오랜만에 C#으로 S/W만드는 프로젝트에 들어가기도 했고,

그래서 이번에는 C# WPF 관련해서 여러 작업들중 UI작업에 치중해서 쓸만한 포스팅을 하려고 한다. 

이번 프로젝트는 완전히 내 의향대로 만들면 됐기에 맥 스타일의 UI를 구성해보려고 했다. 

이렇게 신호등에 아이콘도 Hover되게 넣엇다 ㅎㅎ

이제 구현을 들어가자면 

크게 3단계로 나눠진다.

1. 메인 윈도우의 topbar를 없애기
2. 전체 화면에 가장 위에 Tapbar를 대신할 LayoutControl 만들기
3. LayoutControl내 기능 구현하기

메인 윈도우의 Topbar 없애기

이건 사실 간단하다. xaml 내에서 Window 태그 안에 아래 옵션을 넣어주면 된다.

                 WindowStyle="None"

그러면 이제 

이런 모양의 Topbar는 사라진다.

 

Topbar를 대신할  UI만들기

나같은 경우 그리드로 구현했는데, 그리드의 Row를 여러줄로 하고 맨 위에를 30px로 고정하여 구현했다.

나는 그리드안에 LayoutControl로 사용했다.

        <dxlc:LayoutControl Grid.ColumnSpan="3" Padding="0" Background="Transparent">
            <dxlc:LayoutGroup HorizontalAlignment="Right" VerticalAlignment="Top" Margin="5" Padding="0">
                <Button x:Name="btnMax" Style="{StaticResource RoundWindowButtonStyle}" Click="btnMax_Click" Tag="max" Background="#27C93F"/>
                <Button x:Name="btnMin" Style="{StaticResource RoundWindowButtonStyle}" Click="btnMin_Click" Tag="min" Background="#FFBD2E"/>
                <Button x:Name="btnClose" Style="{StaticResource RoundWindowButtonStyle}" Click="btnClose_Click" Tag="close" Background="#FF5F56"/>
            </dxlc:LayoutGroup>
        </dxlc:LayoutControl>

Custom Topbar 기능 구현

이제 드디어 중요한 부분인데, 

Topbar의 기능은 크게 2가지이다. 1, 화면 이동, 2, 최소 최대화

 

코드비하인드

        private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (e.ButtonState == MouseButtonState.Pressed)
            {
                this.DragMove();
            }
        }

전체 그리드에 해당 이벤트를 걸었는데, 조금더 디테일하게 걸고자 하면 높이를 계산해서 걸면 된다.