[C#/WPF/.NET8] Window 엘리먼트 : 테두리를 제거하고 모서리가 둥근 윈도우 만들기

■ Window 엘리먼트를 사용해 테두리를 제거하고 모서리가 둥근 윈도우를 만드는 방법을 보여준다.

▶ MainPage.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    ResizeMode="NoResize"
    Background="Transparent"
    WindowStyle="None"
    AllowsTransparency="True">
    <WindowChrome.WindowChrome>
        <WindowChrome
            ResizeBorderThickness="0"
            CaptionHeight="0" />
    </WindowChrome.WindowChrome>
    <Border
        Margin="10"
        CornerRadius="10"
        Background="White">
        <Border.Effect>
            <DropShadowEffect
                BlurRadius="15"
                Direction="-90"
                RenderingBias="Quality"
                ShadowDepth="2" />
        </Border.Effect>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0"
                Background="Transparent">
                <StackPanel
                    HorizontalAlignment="Right"
                    Margin="0 10 10 0"
                    Orientation="Horizontal">
                    <Button Name="minimizeButton"
                        Width="30"
                        Height="30">
                        <Path
                            StrokeThickness="2"
                            Stroke="Black"
                            Data="M 0 8 H 10" />
                    </Button>
                    <Button Name="maximizeButton"
                        Width="30"
                        Height="30">
                        <Path
                            StrokeThickness="2"
                            Stroke="Black"
                            Data="M 0 0 H 10 V 10 H 0 Z" />
                    </Button>
                    <Button Name="closeButton"
                        Width="30"
                        Height="30">
                        <Path
                            StrokeThickness="2"
                            Stroke="Black"
                            Data="M 0 0 L 10 10 M 0 10 L 10 0" />
                    </Button>
                </StackPanel>
            </Grid>
            <Grid Grid.Row="1">
                <Ellipse
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Width="200"
                    Height="200"
                    Fill="Gold" />
            </Grid>
            <Grid Name="bottomGrid" Grid.Row="2"
                Height="0"
                Background="#e0e0e0">
                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Text="Sliding Panel Content" />
            </Grid>
            <Button Name="settingButton" Grid.Row="1"
                VerticalAlignment="Bottom"
                HorizontalAlignment="Left"
                Margin="10"
                Width="30"
                Height="30"
                Padding="3">
                <Path
                    Stretch="Uniform"
                    Fill="Black"
                    Data=" M 12 8 A 4 4 0 0 1 16 12 A 4 4 0 0 1 12 16 A 4 4 0 0 1 8 12 A 4 4 0 0 1 12 8 M 12 10 A 2 2 0 0 0 10 12 A 2 2 0 0 0 12 14 A 2 2 0 0 0 14 12 A 2 2 0 0 0 12 10 M 10 22 C 9.75 22 9.54 21.82 9.5 21.58 L 9.13 18.93 C 8.5 18.68 7.96 18.34 7.44 17.94 L 4.95 18.95 C 4.73 19.03 4.46 18.95 4.34 18.73 L 2.34 15.27 C 2.21 15.05 2.27 14.78 2.46 14.63 L 4.57 12.97 L 4.5 12 L 4.57 11 L 2.46 9.37 C 2.27 9.22 2.21 8.95 2.34 8.73 L 4.34 5.27 C 4.46 5.05 4.73 4.96 4.95 5.05 L 7.44 6.05 C 7.96 5.66 8.5 5.32 9.13 5.07 L 9.5 2.42 C 9.54 2.18 9.75 2 10 2 H 14 C 14.25 2 14.46 2.18 14.5 2.42 L 14.87 5.07 C 15.5 5.32 16.04 5.66 16.56 6.05 L 19.05 5.05 C 19.27 4.96 19.54 5.05 19.66 5.27 L 21.66 8.73 C 21.79 8.95 21.73 9.22 21.54 9.37 L 19.43 11 L 19.5 12 L 19.43 13 L 21.54 14.63 C 21.73 14.78 21.79 15.05 21.66 15.27 L 19.66 18.73 C 19.54 18.95 19.27 19.04 19.05 18.95 L 16.56 17.95 C 16.04 18.34 15.5 18.68 14.87 18.93 L 14.5 21.58 C 14.46 21.82 14.25 22 14 22 H 10 M 11.25 4 L 10.88 6.61 C 9.68 6.86 8.62 7.5 7.85 8.39 L 5.44 7.35 L 4.69 8.65 L 6.8 10.2 C 6.4 11.37 6.4 12.64 6.8 13.8 L 4.68 15.36 L 5.43 16.66 L 7.86 15.62 C 8.63 16.5 9.68 17.14 10.87 17.38 L 11.24 20 H 12.76 L 13.13 17.39 C 14.32 17.14 15.37 16.5 16.14 15.62 L 18.57 16.66 L 19.32 15.36 L 17.2 13.81 C 17.6 12.64 17.6 11.37 17.2 10.2 L 19.31 8.65 L 18.56 7.35 L 16.15 8.39 C 15.38 7.5 14.32 6.86 13.12 6.62 L 12.75 4 H 11.25 Z" />
            </Button>
        </Grid>
    </Border>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

ResizeMode="NoResize"

Background="Transparent"

WindowStyle="None"

AllowsTransparency="True">

<WindowChrome.WindowChrome>

<WindowChrome

ResizeBorderThickness="0"

CaptionHeight="0" />

</WindowChrome.WindowChrome>

<Border

Margin="10"

CornerRadius="10"

Background="White">

<Border.Effect>

<DropShadowEffect

BlurRadius="15"

Direction="-90"

RenderingBias="Quality"

ShadowDepth="2" />

</Border.Effect>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Grid.Row="0"

Background="Transparent">

<StackPanel

HorizontalAlignment="Right"

Margin="0 10 10 0"

Orientation="Horizontal">

<Button Name="minimizeButton"

Width="30"

Height="30">

<Path

StrokeThickness="2"

Stroke="Black"

Data="M 0 8 H 10" />

</Button>

<Button Name="maximizeButton"

Width="30"

Height="30">

<Path

StrokeThickness="2"

Stroke="Black"

Data="M 0 0 H 10 V 10 H 0 Z" />

</Button>

<Button Name="closeButton"

Width="30"

Height="30">

<Path

StrokeThickness="2"

Stroke="Black"

Data="M 0 0 L 10 10 M 0 10 L 10 0" />

</Button>

</StackPanel>

</Grid>

<Ellipse

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Height="200"

Fill="Gold" />

</Grid>

<Grid Name="bottomGrid" Grid.Row="2"

Height="0"

Background="#e0e0e0">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Text="Sliding Panel Content" />

</Grid>

<Button Name="settingButton" Grid.Row="1"

VerticalAlignment="Bottom"

HorizontalAlignment="Left"

Margin="10"

Width="30"

Height="30"

Padding="3">

<Path

Stretch="Uniform"

Fill="Black"

Data=" M 12 8 A 4 4 0 0 1 16 12 A 4 4 0 0 1 12 16 A 4 4 0 0 1 8 12 A 4 4 0 0 1 12 8 M 12 10 A 2 2 0 0 0 10 12 A 2 2 0 0 0 12 14 A 2 2 0 0 0 14 12 A 2 2 0 0 0 12 10 M 10 22 C 9.75 22 9.54 21.82 9.5 21.58 L 9.13 18.93 C 8.5 18.68 7.96 18.34 7.44 17.94 L 4.95 18.95 C 4.73 19.03 4.46 18.95 4.34 18.73 L 2.34 15.27 C 2.21 15.05 2.27 14.78 2.46 14.63 L 4.57 12.97 L 4.5 12 L 4.57 11 L 2.46 9.37 C 2.27 9.22 2.21 8.95 2.34 8.73 L 4.34 5.27 C 4.46 5.05 4.73 4.96 4.95 5.05 L 7.44 6.05 C 7.96 5.66 8.5 5.32 9.13 5.07 L 9.5 2.42 C 9.54 2.18 9.75 2 10 2 H 14 C 14.25 2 14.46 2.18 14.5 2.42 L 14.87 5.07 C 15.5 5.32 16.04 5.66 16.56 6.05 L 19.05 5.05 C 19.27 4.96 19.54 5.05 19.66 5.27 L 21.66 8.73 C 21.79 8.95 21.73 9.22 21.54 9.37 L 19.43 11 L 19.5 12 L 19.43 13 L 21.54 14.63 C 21.73 14.78 21.79 15.05 21.66 15.27 L 19.66 18.73 C 19.54 18.95 19.27 19.04 19.05 18.95 L 16.56 17.95 C 16.04 18.34 15.5 18.68 14.87 18.93 L 14.5 21.58 C 14.46 21.82 14.25 22 14 22 H 10 M 11.25 4 L 10.88 6.61 C 9.68 6.86 8.62 7.5 7.85 8.39 L 5.44 7.35 L 4.69 8.65 L 6.8 10.2 C 6.4 11.37 6.4 12.64 6.8 13.8 L 4.68 15.36 L 5.43 16.66 L 7.86 15.62 C 8.63 16.5 9.68 17.14 10.87 17.38 L 11.24 20 H 12.76 L 13.13 17.39 C 14.32 17.14 15.37 16.5 16.14 15.62 L 18.57 16.66 L 19.32 15.36 L 17.2 13.81 C 17.6 12.64 17.6 11.37 17.2 10.2 L 19.31 8.65 L 18.56 7.35 L 16.15 8.39 C 15.38 7.5 14.32 6.86 13.12 6.62 L 12.75 4 H 11.25 Z" />

</Button>

</Grid>

</Border>

</Window>

▶ MainPage.xaml.cs


using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media.Animation;

namespace TestProject;

/// <summary>
/// 메인 윈도우
/// </summary>
public partial class MainWindow : Window
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 하단 그리드 표시 여부
    /// </summary>
    private bool isBottomGridVisible = false;

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainWindow()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainWindow()
    {
        InitializeComponent();

        MouseMove                  += Window_MouseMove;
        this.minimizeButton.Click  += minimizeButton_Click;
        this.maximizeButton.Click  += maximizeButton_Click;
        this.closeButton.Click     += closeButton_Click;
        this.settingButton.Click   += settingButton_Click;
        this.bottomGrid.MouseLeave += bottomGrid_MouseLeave;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private
    //////////////////////////////////////////////////////////////////////////////// Event

    #region 윈도우 마우스 이동시 처리하기 - Window_MouseMove(sender, e)

    /// <summary>
    /// 윈도우 마우스 이동시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void Window_MouseMove(object sender, MouseEventArgs e)
    {
        Point mousePoint = e.GetPosition(this);

        if(mousePoint.Y > ActualHeight - 30)
        {
            if(!this.isBottomGridVisible)
            {
                ShowBottomGrid();
            }
        }
    }

    #endregion
    #region 최소화 버튼 클릭시 처리하기 - minimizeButton_Click(sender, e)

    /// <summary>
    /// 최소화 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void minimizeButton_Click(object sender, RoutedEventArgs e)
    {
        WindowState = WindowState.Minimized;
    }

    #endregion
    #region 최대화 버튼 클릭시 처리하기 - maximizeButton_Click(sender, e)

    /// <summary>
    /// 최대화 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void maximizeButton_Click(object sender, RoutedEventArgs e)
    {
        if(WindowState == WindowState.Maximized)
        {
            WindowState = WindowState.Normal;
        }
        else
        {
            WindowState = WindowState.Maximized;
        }
    }

    #endregion
    #region 닫기 버튼 클릭시 처리하기 - closeButton_Click(sender, e)

    /// <summary>
    /// 닫기 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void closeButton_Click(object sender, RoutedEventArgs e)
    {
        Close();
    }

    #endregion
    #region 설정 버튼 클릭시 처리하기 - settingButton_Click(sender, e)

    /// <summary>
    /// 설정 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void settingButton_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show(this, "Settings button clicked!");
    }

    #endregion
    #region 하단 그리드 마우스 이탈시 처리하기 - bottomGrid_MouseLeave(sender, e)

    /// <summary>
    /// 하단 그리드 마우스 이탈시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void bottomGrid_MouseLeave(object sender, MouseEventArgs e)
    {
        if(this.isBottomGridVisible)
        {
            HideBottomGrid();
        }
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////// Function

    #region 하단 그리드 표시하기 - ShowBottomGrid()

    /// <summary>
    /// 하단 그리드 표시하기
    /// </summary>
    private void ShowBottomGrid()
    {
        DoubleAnimation doubleAnimation = new DoubleAnimation(100, TimeSpan.FromSeconds(0.3));

        this.bottomGrid.BeginAnimation(HeightProperty, doubleAnimation);

        this.isBottomGridVisible = true;
    }

    #endregion
    #region 하단 그리드 숨기기- HideBottomGrid()

    /// <summary>
    /// 하단 그리드 숨기기
    /// </summary>
    private void HideBottomGrid()
    {
        DoubleAnimation doubleAnimation = new DoubleAnimation(0, TimeSpan.FromSeconds(0.3));

        this.bottomGrid.BeginAnimation(HeightProperty, doubleAnimation);

        this.isBottomGridVisible = false;
    }

    #endregion
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

using System;

using System.Windows;

using System.Windows.Input;

using System.Windows.Media.Animation;

namespace TestProject;

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 하단 그리드 표시 여부

/// </summary>

private bool isBottomGridVisible = false;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

MouseMove += Window_MouseMove;

this.minimizeButton.Click += minimizeButton_Click;

this.maximizeButton.Click += maximizeButton_Click;

this.closeButton.Click += closeButton_Click;

this.settingButton.Click += settingButton_Click;

this.bottomGrid.MouseLeave += bottomGrid_MouseLeave;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region 윈도우 마우스 이동시 처리하기 - Window_MouseMove(sender, e)

/// <summary>

/// 윈도우 마우스 이동시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void Window_MouseMove(object sender, MouseEventArgs e)

{

Point mousePoint = e.GetPosition(this);

if(mousePoint.Y > ActualHeight - 30)

{

if(!this.isBottomGridVisible)

{

ShowBottomGrid();

}

#endregion

#region 최소화 버튼 클릭시 처리하기 - minimizeButton_Click(sender, e)

/// <summary>

/// 최소화 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void minimizeButton_Click(object sender, RoutedEventArgs e)

{

WindowState = WindowState.Minimized;

}

#endregion

#region 최대화 버튼 클릭시 처리하기 - maximizeButton_Click(sender, e)

/// <summary>

/// 최대화 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void maximizeButton_Click(object sender, RoutedEventArgs e)

{

if(WindowState == WindowState.Maximized)

{

WindowState = WindowState.Normal;

}

else

{

WindowState = WindowState.Maximized;

}

#endregion

#region 닫기 버튼 클릭시 처리하기 - closeButton_Click(sender, e)

/// <summary>

/// 닫기 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void closeButton_Click(object sender, RoutedEventArgs e)

{

Close();

}

#endregion

#region 설정 버튼 클릭시 처리하기 - settingButton_Click(sender, e)

/// <summary>

/// 설정 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void settingButton_Click(object sender, RoutedEventArgs e)

{

MessageBox.Show(this, "Settings button clicked!");

}

#endregion

#region 하단 그리드 마우스 이탈시 처리하기 - bottomGrid_MouseLeave(sender, e)

/// <summary>

/// 하단 그리드 마우스 이탈시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void bottomGrid_MouseLeave(object sender, MouseEventArgs e)

{

if(this.isBottomGridVisible)

{

HideBottomGrid();

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 하단 그리드 표시하기 - ShowBottomGrid()

/// <summary>

/// 하단 그리드 표시하기

/// </summary>

private void ShowBottomGrid()

{

DoubleAnimation doubleAnimation = new DoubleAnimation(100, TimeSpan.FromSeconds(0.3));

this.bottomGrid.BeginAnimation(HeightProperty, doubleAnimation);

this.isBottomGridVisible = true;

}

#endregion

#region 하단 그리드 숨기기- HideBottomGrid()

/// <summary>

/// 하단 그리드 숨기기

/// </summary>

private void HideBottomGrid()

{

DoubleAnimation doubleAnimation = new DoubleAnimation(0, TimeSpan.FromSeconds(0.3));

this.bottomGrid.BeginAnimation(HeightProperty, doubleAnimation);

this.isBottomGridVisible = false;

}

#endregion

}

TestProject.zip