Friday 29 March 2013

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 Background="Red">

        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </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>
        <TextBox Grid.Row="0" Grid.Column="1" Background="Pink" />
        <TextBox Grid.Row="1" Grid.Column="1" />
        <TextBox Grid.Row="2" Grid.Column="1" />
        <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 Background="Red" Margin="20 30 40 50">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </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>
        <TextBox Grid.Row="0" Grid.Column="1" Background="Pink" Margin="30" />
        <TextBox Grid.Row="1" Grid.Column="1" />
        <TextBox Grid.Row="2" Grid.Column="1" />
        <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 Background="Red" Margin="20 30 40 50">
        <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>
        <TextBox Grid.Row="0" Grid.Column="1" Background="Pink" Margin="30" />
        <TextBox Grid.Row="1" Grid.Column="1" />
        <TextBox Grid.Row="2" Grid.Column="1" />
        <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 Background="Red" Margin="20 30 40 50" Width="600">
        <Grid.RowDefinitions>
            <RowDef
initio
n/>


          <RowDef
initio
n/>


          <RowDef
initio
n/>


          <RowDef
initio
n/>


      </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="*"/>
        </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>
        <TextBox Grid.Row="0" Grid.Column="1" Background="Pink" Margin="30" />
        <TextBox Grid.Row="1" Grid.Column="1" Height="40" Width="300" />
        <TextBox Grid.Row="2" Grid.Column="1" />
        <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.

5 comments: