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.