Learn WPF: Some Important Properties of Controls in WPF

Some Important Properties of Controls in WPF

In this article I am specifying some properties for controls. These properties are necessary to understand for any WPF application. These are as follows:-

1. Background

If you want to set any background color to your layout then we use background property.

For Example:-

In this example I first give background to grid. After that I set background of label control and textbox too.

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Label Grid.Row="0" Grid.Column="0" Background="Yellow" >Enter your Name</Label>

<Label Grid.Row="1" Grid.Column="0" >Enter your Password</Label>

<Label Grid.Row="2" Grid.Column="0" >Re-Type your Password</Label>

<Button Grid.Row="3" Grid.Column="1">Submit your DATA</Button>

</Grid>

The output of this code as follows:-

Figure 1

2. Margin

It represents the gap of layout from screen. We represent margin (left top right bottom)

For Example:-

In this example first I give margin to the grid layout and after that I assign margin to the label and textbox too. In case of label and textbox I assign margin 30 which means from all four side. You can see the difference. The code is as follows:-

<Window x:Class="WpfApplication2.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Tech Altum" Height="500" Width="700">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Label Grid.Row="0" Grid.Column="0" Background="Yellow" Margin="30" >Enter your Name</Label>

<Label Grid.Row="1" Grid.Column="0" >Enter your Password</Label>

<Label Grid.Row="2" Grid.Column="0" >Re-Type your Password</Label>

<Button Grid.Row="3" Grid.Column="1">Submit your DATA</Button>

</Grid>

</Window>

The output of this code as follows:-

Figure 2

3. Padding

It represents the gap inside the control. If we assign padding to the label then it will first give that padding and after that start writing content.

For Example:-

<Window x:Class="WpfApplication2.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Tech Altum" Height="500" Width="700">

<Grid.RowDefinitions>

<Row

Definition/>

<Row

Definition/>

<Row

Definition/>

<Row

Definition/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<Col

umn

Definition/>

<Col

umn

Definition/>

</Grid.ColumnDefinitions>

<Label Grid.Row="0" Grid.Column="0" Background="Yellow" Margin="30" Padding="10 0">Enter your Name</Label>

<Label Grid.Row="1" Grid.Column="0" Padding="40 5" >Enter your Password</Label>

<Label Grid.Row="2" Grid.Column="0" >Re-Type your Password</Label>

<Button Grid.Row="3" Grid.Column="1">Submit your DATA</Button>

</Grid>

</Window>

The output of this code as follows:-

Figure 3

4. Width and Height

When we need to define the width and height of any control or layout then we use width and height property respectively.

There are 3 types to set width and height.

a) Fixed: - if you assign any height and width then it will be fixed.

b) Auto:-in case of auto it will take width automatically according to other control

c) * :- it indicates rest of the space

Following is the example where I explain all 3 types:-

<Window x:Class="WpfApplication2.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Tech Altum" Height="500" Width="700">

<Grid.RowDefinitions>

<RowDef

initio

n/>

<RowDef

initio

n/>

<RowDef

initio

n/>

<RowDef

initio

n/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Label Grid.Row="0" Grid.Column="0" Background="Yellow" Margin="30" Padding="10 0">Enter your Name</Label>

<Label Grid.Row="1" Grid.Column="0" Padding="40 5" >Enter your Password</Label>

<Label Grid.Row="2" Grid.Column="0" >Re-Type your Password</Label>

<Button Grid.Row="3" Grid.Column="1">Submit your DATA</Button>

</Grid>

</Window>

In this example you can see that I give fixed width to the grid that is 600.

Now come to the column. In first column I assign width 200 i.e. fixed width. In second column I assign width auto, now check the highlighted textbox which is assign in this column and its width is 300 so this column will take width 300 means it assign it width according to controls automatically. And in third column I assign width * which means rest of the space so it will take 100.

The output of this example as follows:-

Figure 4

Hope you enjoyed the article. There are many more properties we use in WPF. I will discuss according to need in my next articles.

Friday, 29 March 2013

Some Important Properties of Controls in WPF

5 comments: