WPF Window Resizer(Attached Property)

Introduction

WPF를 이용해 Application을 개발 할 때 기본 Window모양이 아닌 임의의 디자인의 Window로 구현해야 하는 경우가 있습니다. 이때 아래 그림과 같이 WindowStyle 속성과 AllowsTransparency 속성을 이용해 기본 Frame을 나타나지 않도록 구현 할 수 있는데요.

WindowStyle을 None으로 설정할 경우 기본 제목 표시줄을 사라지지만 윈도우의 테두리에 크기를 변경할 때 사용하는 테두리가 남아 있는데요. 이를 제거하기 위해서 AllowsTransparency 속성을 True 지정하면 이 테두리가 사라지게 됩니다. 그런데, 한가지 문제점은 AllowsTransparency 속성이 True일 경우에는 기본적으로 마우스를 이용해 크기조절이 불가능하기 때문에 크기조절 부분을 직접 구현해줘야 하는 단점이 있습니다.

이번시간에는 위와 같은 상황에서 간단하게 크기를 조절하거나 창을 움직일 수 있도록 하는 WindowResizer를 소개합니다. 개인적으로 만들어 사용하던 코드인데 마침 정리 할 기회가 되어 공유합니다. 아래 동영상은 샘플로 사용된 코드의 시연 영상입니다.

How to use WindowResizer

WindowResizer를 사용하기 위해서는 아래와 같이 XAML에 WindowResizer의 네임스페이스를 추가하고, 리사이즈 영역으로 사용할 객체에 WindowResizer.Direction 속성을 Left, Right, Top, TopLeft, TopRight, Bottom, BottomLeft, BottomRight, Drag중 하나로 지정하면 됩니다.

<Window x:Class="WIT.WPF.Samples.WindowResizerExample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:w="clr-namespace:WIT.WPF.Samples.WindowResizerExample" Title="Window Resizer Sample - witstudio.net" WindowStyle="None" AllowsTransparency="True" Height="200" Width="200" > <Grid> <Rectangle Fill="Black" Height="10" VerticalAlignment="Top" w:WindowResizer.Direction="Top"/> <Rectangle Fill="Black" Height="10" VerticalAlignment="Bottom" w:WindowResizer.Direction="Bottom"/> <Rectangle Fill="Black" Width="10" HorizontalAlignment="Left" w:WindowResizer.Direction="Left"/> <Rectangle Fill="Black" Width="10" HorizontalAlignment="Right" w:WindowResizer.Direction="Right"/> <Rectangle Fill="#42a0e1" Height="10" Width="10" VerticalAlignment="Top" HorizontalAlignment="Left" w:WindowResizer.Direction="TopLeft"/> <Rectangle Fill="#42a0e1" Height="10" Width="10" VerticalAlignment="Top" HorizontalAlignment="Right" w:WindowResizer.Direction="TopRight"/> <Rectangle Fill="#42a0e1" Height="10" Width="10" VerticalAlignment="Bottom" HorizontalAlignment="Left" w:WindowResizer.Direction="BottomLeft"/> <Rectangle Fill="#42a0e1" Height="10" Width="10" VerticalAlignment="Bottom" HorizontalAlignment="Right" w:WindowResizer.Direction="BottomRight"/> <Border Background="#42a0e1" VerticalAlignment="Center" Margin="20" Height="30" w:WindowResizer.Direction="Drag"> <TextBlock Text="Draggable Area" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/> </Border> </Grid> </Window>

그리고 C#코드에서 WindowResizer를 적용하고자 할경우 아래와 같이 사용하실 수 있습니다.
protected void InitializeResizerTarget() { WindowResizer.SetDirection(LeftElement, WindowResizer.ResizeDirection.Left); WindowResizer.SetDirection(RightElement, WindowResizer.ResizeDirection.Right); WindowResizer.SetDirection(TopElement, WindowResizer.ResizeDirection.Top); WindowResizer.SetDirection(BottomElement, WindowResizer.ResizeDirection.Bottom); WindowResizer.SetDirection(TopLeftElement, WindowResizer.ResizeDirection.TopLeft); WindowResizer.SetDirection(TopRightElement, WindowResizer.ResizeDirection.TopRight); WindowResizer.SetDirection(BottomLeftElement, WindowResizer.ResizeDirection.BottomLeft); WindowResizer.SetDirection(BottomRightElement, WindowResizer.ResizeDirection.BottomRight); }
이상이며  아래는 WindowResizer의 샘플 프로젝트와 전체 소스코드파일입니다. 기타 궁금하신점이나 문의사항은 이메일이나 댓글로 남겨주시면 답변드리도록 하겠습니다.

WIT.WPF.Samples.WindowResizerExample.zip