Friday, January 27

Create custom window in Wpf Application


Hello Once again, today tutorial is about how to create a custom window in wpf application, and how to integrate this application like other normal window by adding functionality into it. So without any further delay let’s get started, this tutorial is based on WPF technology, in which you code in xaml and c# languages, WPF is an acronym for Windows Presentation Foundation, Microsoft Visual studio c# 2010 or lower version are built with WPF technology.



I’m working on MS visual c# express edition 2010, you can download MS visual c# 2010 set from official site of Microsoft, its free, let’s move on to today’s objective, First of all open a new wpf project, you are provided with an empty window and a grid, both these controls are enclosed in angular brackets, same thing like HTML tags. You can call it WPF tags or this designer language is XAML,  both c# and xaml can be used to design a wpf application, but here I’ll prefer xaml , inside window tag you are seeing some attributes like x:class this is basically your application class, in order to make an object of your application you will only need to access it by Class Name,  and some more attributes you do not need to understand them, like xmlns, if you just run this application without changing anything you will see an empty window which can be resized, minimized, close, maximize. In the properties panel of window you are seeing many properties, but in this tutorial I’ll teach you only those properties which are used to create a custom window application, to make custom window you do not need border of window, and transparency, allow transparency is the property of window tag, and before set this value to true make sure you have set the windows border to none. If you do not set border to none your application will crash. So set AllowTransparency to true and WindowStyle to none and set Window Background to transparent, now your application is not having any border, this is all what you need to do with window tag, now come to the grid tag, grid is a layout control it allows you to add multiple components in it, like Rectangle, TextBox, ComboBox etc. Properties of grid are also available, you need to set the background color to transparent. By default grid’s background is set to null/Transparent. but if you have set its value to some solid color you will have to change it. From toolbox just drag and drop rectangle shape on to grid and adjust the rectangle with grid width, height and position , properties which will be used are: Fill, RadiusX, RadiusY, Fill Property of rectangle is basically add color to its background, you can use either solid color or some gradient (linear, radial), just open fill property of rectangle and select the desired color you want to give your application. In order to round the corner of rectangle you need to give some values to RadiusX and RadiusY, when you wil run your application you will be able to see only a colored rectangle which is having rounded radius, and no close, minimize, maximize buttons. This custom window is unable to be dragged and resized. So you have to do it with your coding either xaml or c#. in order to drag the window you have to call an event of MouseDown inside rectangle in which you want your application to be dragged when you click on it. In the c# code only write this line.
private void rectangle1_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }
Now you are able to move your application anywhere you like. Now add different controls to make your application attractive like add another rectangle for body of your application, the above rectangle is toolbar. Border of rectangle is byDefault 1 value wide,  you can change its value by changing StrokeThickness, you can give color to it, only thing you need to change is the Stroke property of rectangle. Now to add opacity effect in your wpf application you need to change the colors (Which are filled as a background color of Rectangle) intensity. Changing in the intensities will change opacity of your entire application. Now you need to create your own close, and minimized buttons. From toolbox drag any component you like. Because whatever component you are using you will have to code by yourself. So I take two buttons one is to close application, and other is to minimize application. Edit content of button like in order to make close button, write Close in content of button you just added. Now call Click event inside Close button tag, because you want when you click on close button you application may get close. In c# just write  
      
private void button1_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
Now the last thing which is undone is to add a minimize button, drop another button from toolboz, change content of button, and call Click event, and in c# write
private void button2_Click(object sender, RoutedEventArgs e)
        {
            this.WindowState = System.Windows.WindowState.Minimized;
        }
Here is all the stuff you need to do to create customized window in wpf application, feel free to ask anything. Thanks and Goodbye.

ScreenShot:

C# Code:
namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void rectangle1_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }

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

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            this.WindowState = System.Windows.WindowState.Minimized;
        }
    }
}


Xaml Code:


<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" WindowStyle="None" AllowsTransparency="True" Background="{x:Null}">
    <Grid Background="{x:Null}">
        <Rectangle Height="39" HorizontalAlignment="Left" MouseDown="rectangle1_MouseDown" Name="rectangle1" VerticalAlignment="Top" Width="503" RadiusX="15" RadiusY="15" StrokeThickness="2">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#BCF5F5F5" Offset="0" />
                    <GradientStop Color="#C6868686" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.Fill>
            <Rectangle.Stroke>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF868686" Offset="0" />
                    <GradientStop Color="WhiteSmoke" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.Stroke>
        </Rectangle>
        <Rectangle Height="266" HorizontalAlignment="Left" Margin="0,45,0,0" Name="rectangle2" VerticalAlignment="Top" Width="503" RadiusX="15" RadiusY="15" StrokeThickness="2">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#D3868686" Offset="0" />
                    <GradientStop Color="WhiteSmoke" Offset="1" />
                    <GradientStop Color="#CCE2E2E2" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.Fill>
            <Rectangle.Stroke>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="WhiteSmoke" Offset="0" />
                    <GradientStop Color="#FF868686" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.Stroke>
        </Rectangle>
        <Button Content="Close" Height="23" Click="button1_Click" HorizontalAlignment="Left" Margin="417,9,0,0" Name="button1" VerticalAlignment="Top" Width="59" />
        <Button Content="Minimize" Click="button2_Click" Height="23" HorizontalAlignment="Left" Margin="348,9,0,0" Name="button2" VerticalAlignment="Top" Width="63" />
    </Grid>
</Window>

3 comments:

  1. Awesome article. Thanks a lot.

    ReplyDelete
  2. The window don't update accordingly #bug

    ReplyDelete
  3. @Lasitha What do you want to do with your application? and its just a guide if you want to customize your Window shape.

    ReplyDelete