WPF Basics Part-1

WPF has some important new concepts that are beyond of what most .NET developers know from WinForms. But it is very useful to understand these concepts before you start developing WPF applications.

WPF Fundamentals

WPF has some important new concepts that are beyond of what most .NET developers know from WinForms. But its very useful to understand these concepts before you start developing WPF applications.

XAML stands for Extensible Application Markup Language. Its a simple language based on XML that was invented for WPF to create and initialize user interface elements. The idea is similar to HTML.

Logical and Visual Tree
User interface elements in WPF have a hierachical relation. This is called the visual tree. A user interface element is composed of multiple parts. If you build a tree including all controls parts you have the logical tree.

The StackPanel is a simple and useful layout panel. It stacks its child elements below or beside each other, dependening on its orientation. This is very useful to create any kinds of lists. All WPF ItemsControls like ComboBox, ListBox or Menu use a StackPanel as their internal layout panel.


<TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock>
<Button Margin="10">Black</Button>
<Button Margin="10">With milk</Button>
<Button Margin="10">Latte machiato</Button>
<Button Margin="10">Chappuchino</Button>

Stack Items horizontally
A good example for a horizontal stack panel are the "OK" and "Cancel" buttons of a dialog window. Because the size of the text can change if the user changes the font-size or switches the language we should avoid fixed sized buttons. The stack panel aligns the two buttons depending on their desired size. If they need more space they will get it automatically. Never mess again with too small or too large buttons.


<StackPanel Margin="8" Orientation="Horizontal">
<Button MinWidth="93">OK</Button>
<Button MinWidth="93" Margin="10,0,0,0">Cancel</Button>

WPF Grid Layout Panel
The grid layout panel is the most powerful layout panel in WPF because its so flexible and universal in use. Thats the reason why Visual Studio adds a Grid layout control as root element by default to each Window or Page.
The grid layout defines a set of columns and rows. Each side of a control that has been added to the grid layout can now be bound to one of the row or colum with an optional margin.

<RowDefinition Height="40" />
<RowDefinition Height="2*" />
<RowDefinition Height="2*" />
<RowDefinition Height="Auto" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<Button Background="YellowGreen" Grid.Column="0" Grid.Row="0">Row:0 Col:0</Button>
<Button Background="Blue" Grid.Column="1" Grid.Row="1">Row:1 Col:1</Button>
<Button Background="Red" Grid.Column="2" Grid.Row="2">Row:2 Col:2</Button>
<Button Background="Yellow" Grid.Column="3" Grid.Row="3">Row:2 Col:2</Button>

Sizing rows and columns
The size of a row or a column can be defined in the following types
• Fixed size of logical units (wpf pixels)
• Auto takes as much space as needed by contained controls
• Star (*) takes as much space as possible, percentally split over all star columns. Like percentage in a HTML table except that the sum of all relative columns does not have to be 100

Reference: www.c-sharpcorner.com


Author: ChandraShekar Thota26 Jan 2009 Member Level: Gold   Points : 2


Chandrashekar Thota(Editor, MVP)

Author: Mohanakrishnan14 Jul 2009 Member Level: Gold   Points : 0

i need some sample for that


Author: Prasad 29 Oct 2009 Member Level: Bronze   Points : 0

it was really nice but can you get little more sample on this

Guest Author: jampana01 Mar 2012

I need some sample for that

Guest Author: Swathi23 May 2012

u could have post little more information on controls

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: