MSDN WPF 샘플 따라하기 - NonRectangularWindow

NonRectangularWindow

이 샘플에서는 Window 형식의 Background, AllowsTransparency 및 WindowStyle 속성을 사용하여 구성된 비 사각형 창을 만드는 방법을 보여줍니다.

WindowStyle을 None으로 설정하면 최소화, 최대화, 닫기 버튼이 없기 때문에 직접 구현 해줘야 합니다. 그리고 창을 마우스 왼쪽 버튼을 이용해 이동이 가능하도록 하기 위해 MouseLeftButtonDown 이벤트를 이용해 창 드래그를 구현 합니다.

창 구성

1:  <Window x:Class="NonRectangularWindow.MainWindow"  
2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4:      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
5:      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
6:      xmlns:local="clr-namespace:NonRectangularWindow"  
7:      mc:Ignorable="d"  
8:      Title="NonRectangularWindowSample"  
9:      WindowStyle="None"  
10:      AllowsTransparency="True"  
11:      Background="Transparent"  
12:      MouseLeftButtonDown="Window_MouseLeftButtonDown">  
13:    <Canvas Width="200" Height="200">  
14:      <!-- Path를 통해 사각형 가장자리를 둥그렇게 생성 -->  
15:      <Path Stroke="DarkGray" StrokeThickness="2">  
16:        <Path.Fill>  
17:          <LinearGradientBrush StartPoint="0.2,0" EndPoint="0.8,1" >  
18:            <GradientStop Color="White" Offset="0" />  
19:            <GradientStop Color="White" Offset="0.45" />  
20:            <GradientStop Color="LightBlue" Offset="0.9" />  
21:            <GradientStop Color="Gray" Offset="1" />  
22:          </LinearGradientBrush>  
23:        </Path.Fill>  
24:        <Path.Data>  
25:          <PathGeometry>  
26:            <PathFigure StartPoint="40,20" IsClosed="True">  
27:              <LineSegment Point="160,20" />  
28:              <ArcSegment Point="180,40" Size="20,20" SweepDirection="Clockwise" />  
29:              <LineSegment Point="180,80" />  
30:              <ArcSegment Point="160,100" Size="20,20" SweepDirection="Clockwise" />  
31:              <LineSegment Point="90,100" />  
32:              <LineSegment Point="90,150" />  
33:              <LineSegment Point="60,100" />  
34:              <LineSegment Point="40,100" />  
35:              <ArcSegment Point="20,80" Size="20,20" SweepDirection="Clockwise" />  
36:              <LineSegment Point="20,40" />  
37:              <ArcSegment Point="40,20" Size="20,20" SweepDirection="Clockwise" />  
38:            </PathFigure>  
39:          </PathGeometry>  
40:        </Path.Data>  
41:      </Path>  
42:      <!-- 텍스트 -->  
43:      <Label Width="200" Height="120" FontSize="15" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">Drag Me</Label>  
44:      <!-- 닫기 버튼 -->  
45:      <Button Canvas.Left="155" Canvas.Top="30" Click="CloseButtonRectangle_Click">  
46:        <Button.Template>  
47:          <ControlTemplate>  
48:            <Canvas>  
49:              <Rectangle Width="15" Height="15" Stroke="Black" RadiusX="3" RadiusY="3">  
50:                <Rectangle.Fill>  
51:                  <SolidColorBrush x:Name="myAnimateBrush" Color="Red" />  
52:                </Rectangle.Fill>  
53:              </Rectangle>  
54:              <Line X1="3" Y1="3" X2="12" Y2="12" Stroke="White" StrokeThickness="2" />  
55:              <Line X1="12" Y1="3" X2="3" Y2="12" Stroke="White" StrokeThickness="2" />  
56:            </Canvas>  
57:          </ControlTemplate>  
58:        </Button.Template>  
59:      </Button>  
60:    </Canvas>  
61:  </Window>  

창 닫기 및 이동

1:      private void CloseButtonRectangle_Click(object sender, RoutedEventArgs e)  
2:      {  
3:        Close();  
4:      }  
5:      private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)  
6:      {  
7:        DragMove();  
8:      }