Borderless and Draggable Window in WPF

Introduction

This article shows how to change a window's appearance by creating a borderless and draggable window in WPF using C# and XAML.The primary purpose of the windows is to host content that displays information and enables the user to interact with information.

Here I use a handler called a MouseDown event for calling a DragMove method to make a window drag-gable.

private void rectangle2_MouseDown(object sender, MouseButtonEventArgs e)

{

this.DragMove();

}

Step 1

To create a WPF application, use the following procedure:

Open the Visual Studio.
Select the C# language and "WPF" Application.
Name the project as "Borderless and draggable window".
Click on the "OK" button .

Step 2

To get a borderless window , you need to set the following attributes:

WindowStyle = "None"; that makes the window borderless.
AllowTransparency ="False".

Step 3

Now we start designing the window.

Go to "view" -> "Toolbox".
Drag and Drop the 2 rectangles onto the window named "rectangle1" and "rectangle2" .
Now go to the MainWindow.xaml and write the following code between the rectangle1 tag.

<Rectangle.OpacityMask>

</LinearGradientBrush>

</Rectangle.OpacityMask>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

Similarly write the following code between the rectangle2 tag.

Then Drag and Drop some other control onto the window, such as calendar, label and 3 buttons. Here is the final source code of the MainWindow.xaml:

<Window x:Class="Dragable_window_in_wpf.MainWindow"

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

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

Title="MainWindow" Height="361" Width="526" WindowStyle="None" AllowsTransparency="False" Loaded="Window_Loaded" IsHitTestVisible="True" ResizeMode="NoResize" >

<Window.Background>

</Window.Background>

<Rectangle.OpacityMask>

</LinearGradientBrush>

</Rectangle.OpacityMask>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Grid>
</Window>

After writing the code the window looks as:

Step 4

Go to the MainWindows.xaml.cs and write the code given below:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace Dragable_window_in_wpf

{

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

SizeToContent = System.Windows.SizeToContent.Manual;

}

private void Window_Loaded(object sender, RoutedEventArgs e)

{

}

private void rectangle2_MouseDown(object sender, MouseButtonEventArgs e)

{

this.DragMove();

}

private void rectangle1_MouseDown(object sender, MouseButtonEventArgs e)

{

this.DragMove();

}

private void button1_Click(object sender, RoutedEventArgs e)

{

this.Close();

}

private void button3_Click(object sender, RoutedEventArgs e)

{

this.WindowState = WindowState.Minimized;

}

private void button2_Click(object sender, RoutedEventArgs e)

{

this.WindowState = WindowState.Maximized;

}

Output

Now press F5:

When we click on the "minimize [-] " icon it minimizes the window. Similarly when click on the "cross [*]" icon it shuts down the window and if we click on the "maximize [[]] icon it maximizes the window so that it looks as:

b1.maxium.jpg