Brushes In WPF

Brush ( Part -1 )

Hey Guys!! This post will help you to learn about different types of brushes in WPF. Using brushes one can apply different patterns and colours to the background and foreground of the controls in WPF. In this post we will see how to create different fill patterns using brushes to apply them in some controls.

It is not much fun to use only one color in the background of a page. You might have seen lots of websites having attractive or flashy backgrounds. Before WPF came in the market, .Net deveopers used to take some help of flash, photoshop or some other tools to create images those can be used as backgrounds for the page. But, .Net 3.5 provides very easy way of creating such flashy or attractive colors to your application. One can use animations and different shapes also to add beauty to your application. We will cover shapes and animation in next posts. Let's now concentrate on how we can use Brushes to make our application more attractive. There are mainly six types of brushes in WPF.

1. SolidColorBrush
2. LinearGradientBrush
3. RadialGradientBrush
4. DrawingBrush
5. ImageBrush
6. VisualBrush

We will see first three in detail in this post. Let's start it one by one.

(1) SolidColorBrush - In previous post we have learned how to add canvas. We will apply some background color for it. Here is a code that will set background color "AliceBlue".

XAML Code:

<Canvas Name="cnvPaint" Height="700" Width="700">
<Canvas.Background>
<SolidColorBrush Color="AliceBlue"/>
</Canvas.Background>
</Canvas>

C# Code:

SolidColorBrush s = new SolidColorBrush(Colors.Blue);
cnvMain.Background = s;

OR

cnvMain.Background = new SolidColorBrush(Colors.Blue);

As you can see in above C# code, we can use some of the basic colors from Colors class. We can create our own brush and can set some appropriate properties .

From here on, we will have only XAML code. I think, you can write C# code by your self now. You just have to create object of the brush you want to use and can set the same properties shown in XAML code for that object and can use you brush at run time.

(2) LinearGradientBrush - The following piece of code shows how one can add LinearGradientBrush. Just copy and paste it to see the magic!!

XAML Code:

<Rectangle Height="150" Width="150">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
<GradientStop Color="Black" Offset="0.15"/>
<GradientStop Color="White" Offset="0.30"/>
<GradientStop Color="Red" Offset="0.45"/>
<GradientStop Color="Yellow" Offset="0.60"/>
<GradientStop Color="Brown" Offset="0.75"/>
<GradientStop Color="CadetBlue" Offset="0.90"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

XAML Code:

<Rectangle Canvas.Left="160" Height="150" Width="150">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="Black" Offset="0.005"/>
<GradientStop Color="White" Offset="0.010"/>
<GradientStop Color="Black" Offset="0.015"/>
<GradientStop Color="White" Offset="0.020"/>
<GradientStop Color="Black" Offset="0.025"/>
<GradientStop Color="White" Offset="0.030"/>
<GradientStop Color="Black" Offset="0.035"/>
<GradientStop Color="White" Offset="0.50"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

You can change the value for starrt point and end point to see the change. use {(0,1),(0,0)}, {(0,0),(1,1)} etc.

(3) RadialGradientBrush - The following piece of code shows how one can add RadialGradientBrush. Just copy and paste it to see the magic!!

XAML Code:

<Rectangle Canvas.Top="160" Canvas.Left="160" Height="150" Width="150">
<Rectangle.Fill>
<RadialGradientBrush Center="0,0" GradientOrigin="1,1" >
<GradientStop Color="Red" Offset="0.0"/>
<GradientStop Color="White" Offset="0.10"/>
<GradientStop Color="Blue" Offset="0.20"/>
<GradientStop Color="White" Offset="0.30"/>
<GradientStop Color="Black" Offset="0.40"/>
<GradientStop Color="White" Offset="0.50"/>
<GradientStop Color="BurlyWood" Offset="0.60"/>
<GradientStop Color="White" Offset="0.70"/>
<GradientStop Color="Red" Offset="0.80"/>
<GradientStop Color="White" Offset="0.90"/>
<GradientStop Color="Red" Offset="1.00"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>

HAPPY CODING!!

---

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!!

---