[WPF] 타이틀바 없는 None 스타일 윈도우에 시스템 버튼 추가하기

WPF 윈도우 타입을 None으로 하면 테두리와 타이틀바도 사라져서 깔끔해지지만, 최소화 및 닫기 등 시스템 버튼도 사라져서 불편해진다. 그래서, None 스타일을 유지하면서도 이런 시스템 버튼을 다시 추가하고 싶은 경우가 있다.

 

닫기 버튼은 x 글자를 넣고, 최소화 버튼은 언더바( _ ) 글자로 대신 넣어도 되지만, 최대화 및 복구버튼은 딱히 방법이 없다. 그래서 찾아보니, 예전부터 윈도우에는 이런 특수한 기호를 표현하기 위한 폰트가 이미 존재하고 있었다.

 

해당 폰트의 이름은 "Webdings"이다. 이미 윈도우 98부터 사용되고 있었다고 하니 호환성 걱정은 필요 없다.

자세한 내용은 위키 참고 => en.wikipedia.org/wiki/Webdings

Webdings - Wikipedia

 

위와 같이 기호만 들어 있는 폰트인데, 시스템 버튼에 필요한 내용은 빨간 박스 안에 있는 4개이다.

각각, 다음과 같다.

 

0 : 최소화

1 : 최대화

2 : 복귀

r : 닫기

 

xaml 코드는 대략 다음과 같다.

            <Button FontFamily="Webdings"
                    x:Name="ChangeViewButton"
                    Content="2"/>
            <Button FontFamily="Webdings"
                    x:Name="MinimizeButton"
                    Content="0"/>
            <Button FontFamily="Webdings"
                    x:Name="MaximizeButton"
                    Content="1"/>
            <Button FontFamily="Webdings"
                    x:Name="CloseButton"
                    Content="r"/>

하지만 이렇게만 만들어서 넣으면 이쁘지 않다.

Webdings 폰트를 이용해서 시스템 버튼을 다시 추가한 이미지

 

테두리와 배경색을 없애는 스타일을 만들어서 사용하면 더 이쁘게 나온다.

    <Style x:Key="SystemButton" TargetType="{x:Type Button}">
        <Setter Property="FontFamily" Value="Webdings"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Foreground" Value="Gray"/>
        <Setter Property="MinWidth" Value="40"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Background" Value="{x:Null}"/>
        <Setter Property="BorderBrush" Value="{x:Null}"/>
    </Style>

위와 같은 스타일을 만들고,

            <Button Style="{DynamicResource SystemButton}" 
                    x:Name="ChangeViewButton"
                    Content="2"/>
            <Button Style="{DynamicResource SystemButton}" 
                    x:Name="MinimizeButton"
                    Content="0"/>
            <Button Style="{DynamicResource SystemButton}" 
                    x:Name="MaximizeButton"
                    Content="1"/>
            <Button Style="{DynamicResource SystemButton}" 
                    x:Name="CloseButton"
                    Content="r"/>

버튼에서 해당 스타일을 가져다 쓰자.

 

그러면 이렇게 이쁘게 나온다.