WPF: Controls

This entry is part 4 of 54 in the series Learn WPF

Button, Textbox, Grid or Checkbox etc are called controls in WPF.  They are actually common UI elements in an application.  Those controls are also commonly found in a web page.

More controls can be seen in the screenshot below taken from the left hand side bar of the Visual Studio.



Button Control

We first look at designing a button control using WPF.

A button in WPF can be designed easily with the <Button> tag.  In WPF, controls can be designed with only XAML.

Note that in XAML, all the elements are case sensitive.

<Window x:Class="Control.MainWindow"
        Title="MainWindow" Height="350" Width="525">
        <Button HorizontalAlignment="Stretch" Margin="100,180,100,80">Button 1</Button>


We have set the margins of the button on the application to be:


These are the left, top, right and bottom of the layout.  You can refer to the screenshot below in regard to the 4 margin declarations.


In the HorizontalAlignment property, we have used stretch.  With stretch, child elements are stretched to fill the parent element’s allocated layout space.

To learn more about alignment and margins, you can refer to this page from MSDN.

When you click on the start button in the Visual Studio, the application will run as below.



Series Navigation<< WPF: Partial class
WPF: Code behind >>

Leave a comment

Leave a Reply