How to create a borderless window which can be drag and move in Silverlight Out Of Browser Model?

In out of browser model, if you choose Borderless style, the TitleBar will disappear and you can't drag and move the whole window, to solve this problem there are several solution, one of them is to use

Application.Current.MainWindow.DragMove(); method,

Ok, let's create a small application to test this:

Create a Silverlight Application, make sure it will be running in out of browser model. In the MainPage UserControl's LayoutRoot Grid, add two rows and a Rectangle, fill the Rectangle's content with some solid color(here I cheese Blue) like this:

<Grid x:Name="LayoutRoot" Background="White">

<Grid.RowDefinitions>

<RowDefinition Height="1*" />

<RowDefinition Height="10*" />

</Grid.RowDefinitions>

<Rectangle Name="rectangle1" Stroke="Black" StrokeThickness="1" Fill="Blue"/>

</Grid>

The blue Rectangle will be our new TitleBar which could be used to drag and move the whole window. Let's add the core code behind.

Add a MouseLeftButtonDown Event to the Rectangle, like this:

<Rectangle Name="rectangle1" Stroke="Black" StrokeThickness="1" Fill="Blue" MouseLeftButtonDown="rectangle1_MouseLeftButtonDown"/>

Implement the event's code behind:

private void rectangle1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

Application.Current.MainWindow.DragMove();

}

Now run the application(make sure it's running in out of browser and Bordless Model), you can see a bordless window with a big blue TitleBar, use mouse to drag and move the title bar, it works just as we expected

one thing I have to mention, to make the Rectangle drag and move, you have to Fill this Rectangle with something, ether you fill with some Color or some other Control. Otherwise, it will not react to the mouse click.

Now, the window could be drag and move, but how to close it? How to maxim it? Minim it? Well the answer are all in the Application.Current.MainWindow.WindowState Property The corresponding method are:

Application.Current.MainWindow.WindowState = WindowState.Maximized;

Application.Current.MainWindow.WindowState = WindowState.Minimized;

Application.Current.MainWindow.WindowState = WindowState.Normal;

Now let's add a content menu to the Blue Rectangle and add Maxim, Minim and Normal command, Like this:

<Rectangle Name="rectangle1" Stroke="Black" StrokeThickness="1" Fill="Blue" MouseLeftButtonDown="rectangle1_MouseLeftButtonDown">

<toolkit:ContextMenuService.ContextMenu>

<toolkit:ContextMenu>

<toolkit:MenuItem x:Name="menuMaxin" Header="Maxim" Click="menuMaxin_Click"/>

<toolkit:MenuItem x:Name="menuMinim" Header="Minim" Click="menuMinim_Click"/>

<toolkit:MenuItem x:Name="menuNormal" Header="Normal" Click="menuNormal_Click"/>

</toolkit:ContextMenu>

</toolkit:ContextMenuService.ContextMenu>

</Rectangle>

To use the Content Menu, You have to add System.Windows.Controls.Input.Toolkit to your project's Reference

let's fill the code behind:

private void menuMaxin_Click(object sender, RoutedEventArgs e)

{

Application.Current.MainWindow.WindowState = WindowState.Maximized;

}

private void menuMinim_Click(object sender, RoutedEventArgs e)

{

Application.Current.MainWindow.WindowState = WindowState.Minimized;

}

private void menuNormal_Click(object sender, RoutedEventArgs e)

{

Application.Current.MainWindow.WindowState = WindowState.Normal;

}

that's, when running the application, you can Maxim, Minim and resume by clicking the content menu

this application is not looked nice, it just telling you how to control Windows behaviour in Out of Browser model, you and add some Icon on the Top-Right corner to make the application more reasonable.

You can download the demo here: