XAML Controls

Well, after talking about grids and stack panels now is the time that we will talk about XAML elements like buttons , textbox , textblocks , Combox and a lot more.

Now we will start talking about buttons.

First of all a button is graphical control element that provides the user a simple way to trigger an event, like searching for a query at a search engine, or to interact with dialog boxes, like confirming an action.
(Wikipedia)

So now we need to know how to add a button to our app Right?
Ok, let’s see:

This is the easiest way to define a button it is just like HTML we have opening and closing button tag
between them we have our content that we be displayed.
 

In this picture we have another button but with more attributes.
Did you noticed that we don’t have a closing tag for our button?!
Yes you can use this slash (/) instead of the ending tag.

So now let’s talk about these attributes:
the first one is :

 x:Name=”myButton” 

we use this attribute if we want to call our element from code behind so the name of this button when using it is c# - as it is the language that we are using it here – is myButton.

The next one is

 Content=”My Button ! ” 

this mean the name of the button in our designer our the name that will be displayed on the button will be My Button !.

HorizontalAligenment: it is pretty easy it means the alignment horizontally the same for the VerticalAligenment.
 
Margin: 

 Margin=”337,225,0,475” 

this mean in which area your button will be on the grid so  337 means it will be 337px away from the left ,255px from top,0 from right (Notice that we set the HorizontalAligenment to left) and 475px from bottom.

Click: this attribute is the name of the event handler in your code. We will use it later
and it looks like that.
 

and there are a lot more attributes like font size and font family.

Now we will talk about textblocks:

TextBlock is :

Textblock is one of the most used controls in XAML. It is much like label and we use it to put text on screen.

 Text=”This is a TextBlock” 

so text is the actual content for the textblock.

TextBox:

Is a graphical control element intended to enable the user to input text information to be used by the program.
(Wikipedia)

Text is empty because the user should type their text. You can put a text in the textbox and when the user click on the textbox the text in it will be removed and the user start to type his text.
Like “Type your name” or the things that we see it always.

 

Here are our elements that we talked about

Till now i mentioned buttons, textBlock, TextBox, in the next couple of posts I will talk about other controls.
After that we will build a simple application that we will use these elements in it.
stay tuned.