Grid In WPF

Container (Grid Control)

Before you really start working in WPF you first should be aware of the controls those are used as container controls in WPF. Actually, each and every control in WPF is a container control. But Grid and Canvas are the two main controls those are used as container in most of the cases. This section will explain about Grid control in detail.

Grid Control

Like all other controls, Grid is a container control in WPF. It can have 'n' number of children of it. If you have added Buttons, TextBlocks, Textboxes or any other controls inside Grid then those controls are children of Grid, at the same time one can say that Grid is a parent control for them. Compared to Canvas, Grid control is diffrent. For the proper layout and positioning of child controls in grid, we can devide Grid Control in set of Rows and Columns. Just like "Table" control in HTML. We have to define RowDefinitions and ColumnDefinition for the Grid. Let's just start it, then only we will have better idea. First of all try to add Grid in your XAML code, and to do that, use the following piece of code.

XAML Code:

<Grid Name="grMain" Height="500" Width="600" Background="Orange">
</Grid>

C# Code:

Grid grMain = new Grid();
grMain.Height = 500;
grMain.Width = 600;
grMain.Background = new SolidColorBrush(Colors.Orange);

since, page does not have children property, add above Grid in the page using following Code.

pgMain.Content = grMain;

Great!!, we have added a Grid control in Page. Now what? It's time to add child controls inside the Grid. But, wait a minute. Before jumping into a swimming pool, we must check weather it's full of water or not right? same is the case with Grid. If you want to add controls inside a Grid, better checkout weather you have defined RowDefinitions and ColumnDefinitions for the Grid or not.

You can add RowDefinitions using the following piece of code.

XAML Code:

<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

C# Code:

RowDefinition r = new RowDefinition();
r.Height = new GridLength(50, GridUnitType.Pixel);

RowDefinition r1 = new RowDefinition();
r1.Height = new GridLength(100, GridUnitType.Pixel);

RowDefinition r2 = new RowDefinition();
r2.Height = new GridLength(0, GridUnitType.Star);

Create RowDefinitions like this, then use following piece of code to add these RowDefinitions in the Grid Control

grMain.RowDefinitions.Add(r);
grMain.RowDefinitions.Add(r1);
grMain.RowDefinitions.Add(r2);

Here "grMain" is the Name of the Grid Control. Run the application, you would not be able to see the space(Height) acuired by these Rows. To check that, add ShowGridlines="True" in your XAML code or add grMain.ShowGridLines = true; in your code behind file.

That's how we can Devide Grid into set of Rows. Same like this, devide Grid Control into set of columns. To do this, use the followin piece of code.

XAML Code:

<Grid.ColumnDefinitions>
<ColumnDefinition Height="50"/>
<ColumnDefinition Height="100"/>
<ColumnDefinition Height="*"/>
</Grid.ColumnDefinitions>

C# Code:

ColumnDefinition c = new ColumnDefinition();
c.Width = new GridLength(50, GridUnitType.Pixel);

ColumnDefinition c1 = new ColumnDefinition();
c1.Width = new GridLength(100, GridUnitType.Pixel);

ColumnDefinition c2 = new ColumnDefinition();
c2.Width = new GridLength(0, GridUnitType.Star);

grMain.ColumnDefinitions.Add(c);
grMain.ColumnDefinitions.Add(c1);
grMain.ColumnDefinitions.Add(c2);


Now, our Grid Control is ready with three Rows and three Columns. You can add as many Rows or Columns as you want. One thing you must remember is, you have to set "Height" property for Rows and "Width" property for Columns. Let's add some controls inside the Grid control now. Let's add few TextBlocks to have a clear idea.

XAML Code:

<TextBlock Name="tbID" Height="30" Width="50" Grid.Column="0" Grid.Row="0">ID</TextBlock>

<TextBlock Name="tbName" Height="30" Width="70" Grid.Column="1" Grid.Row="0">Name</TextBlock>

<TextBlock Name="tbAddress" Height="30" Width="100" Grid.Column="2" Grid.Row="0">Address</TextBlock>

What do we see here? Something new? right, two new properties Grid.Row and Grid.Column. These two properties define, in which Row and Column, this TextBlock control should be placed inside the Grid. To add it in 1st Row we must set Grid.Row="0". Same applies for the column also. Here is an example, how you can add button at runtime using C# code.

C# Code:

Button btnSubmit = new Button();
btnSubmit.Height = 30;
btnSubmit.Width = 50;
btnSubmit.Content = "Submit";
Grid.SetColumn(btnSubmit, 0);
Grid.SetRow(btnSubmit, 2);
grMain.Children.Add(btnSubmit);

As you can see here, to set Row and Column for a control at runtime we must use Grid.SetColumn() and Grig.SetRow(). As a first argument in this function we have to pass the "Name" of the control and second argument is Row or Column number. Likewise we can add 'n' number of children in the Grid Control.

Here is the final XAML code.

XAML Code:

<Page x:Class="WpfBrowserApplication1.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="pgMain" Loaded="pgMain_Loaded">

<Grid Name="grMain" Height="500" Width="600" Background="Orange" >

<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<TextBlock Name="tbID" Height="30" Width="50" Grid.Column="0" Grid.Row="0">ID</TextBlock>
<TextBlock Name="tbName" Height="30" Width="50" Grid.Column="1" Grid.Row="0">Name</TextBlock>
<TextBlock Name="tbAddress" Height="30" Width="50" Grid.Column="2" Grid.Row="0">Address</TextBlock>

</Grid>
</Page>




HAPPY CODING!!

---

Canvas In WPF

Container (Canvas)


Before you really start working in WPF you first should be aware of the controls those are used as container controls in WPF. Actually, each and every control in WPF is a container control. But Canvas and Grid are the two main controls those are used as container in most of the cases. This section will explain about Canvas control in detail.

Canvas

Like all other controls, Canvas is a container control in WPF. It can have 'n' number of children of it. If you have added Buttons, TextBlocks, Textboxes or any other controls inside Canvas then those controls are children of canvas, at the same time one can say that Canvas is a parent control for them. To add a Canvas in your XAML code, use the following piece of code.

XAML Code:


<Canvas Name="cnvMain" Background="Red" Height="300" Width="300">
</Canvas>


C# Code:


Canvas cnvMain = New Canvas();
cnvMain.Height = 300;
cnvMain.Width = 300;
cnvMain.Background = New SolidColorBrush(Colors.Red);

since, page does not have children property, add above Canvas in the page using following Code.

pgMain.Content = cnvMain;


If you have used canvas as a container control, all the controls those are added as child controls of Canvas should have main two properties.

1) Canvas.Top
2) Canvas.Left

These two properties are used for the proper positioning of the controls which are inside the Canvas. These properties (Left and Top) are related to the parent canvas for any control. An example will help you understand this easily.

If you want to add a TextBlock inside the canvas, you can add it using Following Code.

XAML Code:

<Canvas Name="cnvMain" Background="Red" Height="300" Width="300">
<TextBlock Name="tbTest" Height="40" Width="100" Text="Hello">
</TextBlock>
</Canvas>

C# Code:

TextBlock tbTest = new TextBlock();
tbTest.Height = 40;
tbTest.Width = 100;
tbTest.Text = "Hello";
cnvMain.Children.Add(tbTest);

Check output of the above code. You will see that TextBlock having Text "Hello" Would appear in the Top Left Corner of the Canvas.

Now, if you want to set the position of this control inside the Canvas, you can use Canvas.Left and Canvas.Top property in the XAML code. If you want to set these properties runtime then, you must use following piece of code for that,

tbTest.SetValue(Canvas.LeftProperty, 30.0);
tbTest.SetValue(Canvas.TopProperty, 100.0);

These properties are Attached or dependent properties, means those are dependent upon their parent control. To set such properties we should use, SetValue() function.


These are some of the basic properties. You can use properties which are useful for you. One very important feature provided by Visual Studio is intellisence. Use it and explore the properties related to the controls.

WPF Text Decorations

Text Decorations :

Your Web page looks more attractive if it contains some decorative text. No one would like to read the contents those are not properly decorated. Some times you need to highlight a word or you want to make a word look little different than the other words on your page. Here are some examples that would help you to make your text decorative in WPF. You can do some Text decorations like Underline, StrikeThrough, Over Line, Base Line in WPF. This blogs shows how you can apply these different Text decorations to your web page. To understand all these you must have some idea about TextBlock Control. TextBlock Control is a lightweight control for displaying small amount of float content. You can drag and drop it from toolbox. You can decorate the text using XAML code and setting the property of it. You can also set the Text Decoration style from code bihind file also. Here I have provided both ways of doing. Use what ever is convenient for you.

Apply UnderLine :

XAML Code :

<TextBlock TextDecorations="UnderLine" VerticalAlignment="Center" HorizontalAlignment="Center" Name="tbTest">
Text Decorations
</TextBlock>

C# Code :

tbTest.TextDecorations = TextDecorations.UnderLine;

Apply OverLine :

XAML Code :

<TextBlock TextDecorations="Overline" VerticalAlignment="Center" HorizontalAlignment="Center" Name="tbTest">
Text Decorations
</TextBlock>

C# Code :

tbTest.TextDecorations = TextDecorations.Overline;


Apply BaseLine :

XAML Code :

<TextBlock TextDecorations="Baseline" VerticalAlignment="Center" HorizontalAlignment="Center" Name="tbTest">
Text Decorations
</TextBlock>

C# Code :

tbTest.TextDecorations = TextDecorations.Baseline;

Apply Strikethrough :

XAML Code :

<TextBlock TextDecorations="Strikethrough" VerticalAlignment="Center" HorizontalAlignment="Center" Name="tbTest">
Text Decorations
</TextBlock>

C# Code :

tbTest.TextDecorations = TextDecorations.Strikethrough;

---

WPF ( Windows Presentation Foundation )

As a Beginner when I heard about WPF, I heard that WPF in near future would steal whole market for creating Web as well as Windows applications. I was very excited and searched loads of websites to learn WPF but did not got a short cut to learn it. Some sites provided basic info like full form of it and some provided hi-fi examples. Finally I realized that it is really very tough to learn the technology that is very new and does not have many tutorials on the web. If you want to learn WPF, you must go through all the sample codes available in SDK itself.

One of today’s buzzword is WPF ( Windows Presentation Foundation ) code named Avalon. It is one of the basic component of .Net Framework 3.5. WPF is a set of libraries used to build, execute and manage both Windows and Web based applications. If you are familiar with .Net Framework and HTML then, .Net Framework would not be much demanding for you.

.Net Framework 3.5 = .Net Framework 2.0 + WPF + WCF + WC + WF + LINQ

To learn WPF one must learn XAML (eXtensible Application Markup Language) first because, as ASP.NET is used to design the web pages in .Net 2.0, XAML is used to design the pages in WPF. XAML is based on XML. It is a new description programming language designed by Microsoft to design UI (User Interface) for the managed applications. XAML is used to display the controls on the webpage for WPF.

Every Control in WPF is a container. Means now, you can add images to the Lables also. You might have ssen some List boxes having list items with not only the text but with some images also. This can be achieved with the help of WPF now. Lets have some hands on experience in WPF. For that you must have Visual Studio 2008 or if you have Visual Studio 2005 on your machine then you must download .NET 3.0 SDK. You can find this on microsoft download site.

If you have visual studio 2008 installed on your computer you can start creating some applications in it. For that you have to go to File > New > Project

Here you can see there are two options available for WPF.
(1) WPF Application ( Window )
(2) WPF Browser Application ( Web )

You can select any of these two as per your requirement. If you select Window Application you will have 2 pages named App and Window1 added default in your solution and if you select Web Application you will have 2 pages named App and Page1 added default in your solution . As you can see for each page there would be 2 files .xaml and .xaml.cs (.cs here stands for c# file. If you will select vb as a language then the file name would be .xaml.vb. ).

The first file .xaml is a design file and .xaml.cs is a code behind file. For .Net Framework 2.0 we have the file named .aspx and .aspx.cs. Here XAML is used to design the pages.
XAML stands for eXtensible Application Markup Language. It is very much same as HTML. Like HTML, XAML is used to represent the data.

We take an example of a Web Application. App page is know as Application page. In App.xaml page you can find a property named "StartupUri" that is used to set the start page of the application. Another page would be Page1. You will find a Grid control as a default control in the page. Other than grid one can use Canvas or Stack Panel as a container control also. We will keep Grid as a Parent control for our example. Now, Let us try to add a button control in the webpage. To add it in .xaml file you can drag and drop the Button control inside the Grid from the toolbox . You can set some properties of the control as per your choice. After adding a button in page1.xaml your page code might look like this,

<Page x:Class="WpfBrowserApplication1.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Page1" Loaded="Page_Loaded">
<grid name="grd">
<button name="button1" width="75" height="30">Click Here</button>
</grid>
</Page>

One can set the Name property of the controls, we set Name property of a grid to "grd". After setting name property, one can use that control in the code behind file.

To add a button to the webpage using a c# code use the following code.

Button button1 = new Button();
button1.Content = "Click Me";
button1.Height = 30;
button1.Width = 75;
grd.Children.Add(button1);

Build your application and run. That would display the button on a Webpage having "Click Me" written on it as shown below.



HAPPY CODING!!

---