Practicing what we preach

Let’s get started with our first WPF application.
1. Open Visual Studio.
2. Click on File menu and New Project option.
3. If all the prerequisites are installed, in the project type column (on the left) you will have a "NET Framework 3.0" option. Select that and choose the "Windows Application (WPF)" among the installed templates.
4. As soon as you do this, Visual studio will open a Window1.xaml and Window1.xaml.cs files for you. The xaml file will already have a container (Grid) in it.
5. Type the following code within the Grid.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Label VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0">Simple WPF Application</Label>
    <Button VerticalAlignment="Center" HorizontalAlignment="Center" Width="60" Height="40" Background="AliceBlue" Grid.Row="1">Click Me</Button>
</Grid>

Explanation:
The code is pretty much self explanatory. But just to make sure that you understand it completely I will try and explain it.
Inside the grid, we declare 2 rows (similarly columns can also be defined.)
Next we create a label and place it in the centre by specifying the Vertical and Horizontal alignment (makes life so much easier, doesn’t it? Users should try out the other alignments available and see the placement.)
The label is made to sit in the first row by specifying the grid row as 0. The label’s text is going to show “Simple WPF Application”.
Next we have a button in the second row. Again the button is made to sit in the centre and this time I have given a width and height property. A background color is given to the button (try giving a foreground property and change the text color). The button’s text will be “Click Me”.
Debug the application (In the Debug menu option, click on “Start Debugging”). You will see your first simple app which should look like below.


That was simple right. Let me make our button do a little more than just sit around. And at the same time I will introduce the concept of “Code Behind”.

<Button Click="OnButtonClick" VerticalAlignment="Center" HorizontalAlignment="Center" Width="60" Height="40" Background="AliceBlue" Grid.Row="1">Click Me</Button> 

Replace the button tag with this tag. This says that, on click of the button, call the “OnButtonClick” method.
Now open the Window.xaml.cs file. It will already have a constructor in it. Lets add a method after the constructor.

private void OnButtonClick(object sender, RoutedEventArgs e) 
{
    Button ourButton = sender as Button;
    RotateTransform rotate = new RotateTransform(90);
    ourButton.RenderTransform = rotate; 
}

This method is an event handler for the Click event of the button. The button will be the sender of the event but it will be of type object. Hence in the first line we type cast it back to a button. Then we create an object of the RotateTransform class and set the angle of rotation to 90 degrees. Next we assign this rotation to the button.

It’s your turn now:
These are simple exercises that will help you in getting familiar with writing code in WPF.
1. Change the background color of the button.
2. Change the foreground color (use Foreground property just like we used Background property) for the label and the button.
3. Create 2 columns as well. Put the label in Column 0, Row 0 and the button in Column 1, Row 1. Try the various combinations to see how the layout of a grid is.
4. Replace Grid with StackPanel (you will have to remove the Grid.Row properties as well as the row/column definitions). Next try using a DockPanel as well.
5. Now let us do a little more transformations. In the cs file, we can have other kinds of transformations as well. (SkewTransform, ScaleTransform, TranslateTransform). Replace the RotateTransform with these transformations.Now let us do all the transformations at one. I have written code to form a group of transformations and then assign this to the button. Here I just have rotation and skew. Try giving all the transformations and giving different degrees

Button ourButton = sender as Button;
RotateTransform rotate = new RotateTransform(90);
SkewTransform skew = new SkewTransform(5, 5);
TransformGroup transform = new TransformGroup();
transform.Children.Add(rotate); transform.Children.Add(skew);
ourButton.RenderTransform = transform; 

6. Initially give the value in the constructor of the transformation. Next try changing it by setting the properties.
For e.g. rotate.Angle = 180;

Starting of a brand new day

Till recently, we used to use GDI for 2D viewing. This served its purpose but then when you think about it; all machines nowadays come with a graphics card. The monitors have good resolutions. RAM is inexpensive and so applications can be designed to use more RAM and look better. The need of the hour was a way to use all these advantages and make applications have a better UI than already present and Voila! WPF. Hence WPF is a graphical sub system that uses the DirectX engine for the UI display.

This blog is intended to help beginners start off with WPF. I hope readers will be able to use this as the first step and start churning out applications with such ease that it will shock the developer herself/himself (that was almost profoundJ).

This first section is just to give the background and make readers familiar with the terms and technology and get the basic understanding of WPF. WPF applications can be stand alone or browser applications. Browser applications will be subjected to the usual security (CAS permissions) that all browser apps are subjected to. Here, I talk about stand alone apps which are having full access and are not run in a sandbox.

Prerequisites: The first step would be to get your environment working. You will need the following software which you can find in http://www.netfx3.com/.
1. Microsoft Windows SDK
2. .Net 3.0 Runtine
3. Visual Studio 2005
4. Visual Studio extensions (formerly known as Orcas)

WPF uses XAML (extendable application markup language) to build UI pages (The files will be called filename.xaml). The code for the functionality is written in code behind (filename.xaml.cs) in C# (VB.Net can also be used. But I have worked with C# and hence will be talking only about that). Before we get started on the code, we will need to get familiar with some basic elements.

Imagine a set of goodies (like a bunch of cookies, chocolates, tarts etc) that you need to arrange on a table. So you put them on a tray and on the tray you can arrange them the way you want to. On similar lines, you have controls (like buttons, images, textboxes, labels etc) which need to be displayed on the screen. These controls will have to be enclosed in a container. Containers can be
1. Grid: This container has a rows and columns. You can place controls inside the grid and specify the row and column number. You can imagine something that looks like the image below. You can specify into which cell each element has to go.

2. StackPanel: This container stacks up elements one below the other depending on the order of the controls created.

3. DockPanel: This container places the elements one after the other. The orientation can be changed and it can be made like a StackPanel but usually it is used to place the elements as indicated below.

4. Canvas: This gives you a plain area (as indicated by the name, a canvas) to put any element anywhere. You need to specify the place by giving the number of pixels to the left and top of the canvas.
Now that we have a fair idea about WPF and the terms associated with it, I suggest that the reader read up on articles. http://msdn2.microsoft.com/en-us/library/ms754130.aspx. I have just touched the surface of the whole concept and have intended to give a starting point to the users so that the readers are not intimidated with the ocean of information available on the net. But with the background given here, the information should be a bit more comprehendible. In the next blog, I will explain how to build simple applications and give the steps on how to get our hands dirty.