Posted by: Zeeshan Amjad | July 29, 2009

Creating non rectangle window in WPF


 

Creating non rectangle window in WPF is not a difficult task. In the simplest way we can create a non rectangle window by setting window style to none, to remove the system menu, title bar and maximize/minimize button and set its back ground color to transparent. Then create one border as a content element of this window and change the corner of the border to circles. Here is a simplest C# code to demonstrate this.

  1: using System;
  2: using System.Windows;
  3: using System.Windows.Media;
  4: using System.Windows.Controls;
  5: 
  6: namespace NonRectWindow
  7: {
  8:     public class MyWindow : Window
  9:     {
 10:         public MyWindow()
 11:         {
 12:             this.AllowsTransparency = true;
 13:             this.WindowStyle = WindowStyle.None;
 14:             this.Height = 300;
 15:             this.Width = 400;
 16:             Background = Brushes.Transparent;
 17: 
 18:             Border border = new Border();
 19:             this.Content = border;
 20:             border.CornerRadius = new CornerRadius(100);
 21:             border.Background = Brushes.Blue;
 22:         }
 23:     }
 24: 
 25:     public class MyApp : Application
 26:     {
 27:         [STAThread]
 28:         static void Main()
 29:         {
 30:             MyWindow win = new MyWindow();
 31: 
 32:             MyApp app = new MyApp();
 33:             app.Run(win);
 34:         }
 35:     }
 36: }
 37: 

We can easily port this code to other .Net based language such as VB.Net, VC++, F# etc. In addition we can achieve the same effect with XAML alone. Here is a XAML code to do the same thing.

  1: <Window x:Class="NonRect.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Window1" Height="300" Width="400" 
  5:     AllowsTransparency="True" WindowStyle="None" Background="Transparent">
  6:     <Border Background="Blue">
  7:         <Border.CornerRadius>
  8:             100
  9:         </Border.CornerRadius>
 10:     </Border>
 11: </Window>
 12: 

Here is the output of the program.

NonRectWindow

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: