Making a shape window movable through mouse

Question

I have made a form in Microsoft Expression Blend WPF. The form fields are on a formatted rectangle. What I did is hide the original window. Now every thing looks perfect except when I run the application I am not able to move the form using mouse. What could be the solution for this??

Here is a screenshot.

Answer 1

To achieve this effect, try the following.

On the Window element:

1. Set the WindowStyle property to None.
2. Set the Background to Null.
3. Set AllowsTransparency to True.

Group your content inside a Border element. Borders are much better than Rectangles for this kind of work. Set these properties on the Border:

1. Background to the desired color with 5-10% Alpha channel.
2. BorderBrush to the desired color. (You may or may not want to set the Alpha channel of this as well)
3. BorderThickness to the desired thicknesses.

Run the app and you'll be roughly at your OP state. Now, to add window drag, capture the MouseDown event on the Window and all you need to do is call DragMove().

Here is a sample WPF app you should be able to run:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    x:Class="ShapedWindow.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640"
    Height="480"
    WindowStyle="None"
    Background="{x:Null}"
    AllowsTransparency="True"
    MouseDown="Window_MouseDown">
<Border x:Name="LayoutRoot"
        BorderBrush="Black"
        CornerRadius="50"
        BorderThickness="2,2,3,3"
        Background="#18EF3B3B">
    <Grid>
        <Button x:Name="CloseButton"
                Content="Close"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Width="75"
                Margin="0,19,26,0"
                Click="CloseButton_Click" />
    </Grid>
</Border>

And the code behind:

using System;
using System.Collections.Generic;
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.Shapes;

namespace ShapedWindow
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();

            // Insert code required on object creation below this point.
        }

        private void CloseButton_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

        private void Window_MouseDown(object sender, MouseButtonEventArgs e)
        {
            DragMove();
        }
    }
}