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.

Continue reading

Ok let’s talk a little bit about a trick here.
Today I will tell you a secret ;). How to make a nice button with an image or an icon in it!
It’s pretty easy let’s see:

in this code snippet we have a Button element and inside of it we have a stackpanel and inside of our stackpanel we have two elements an image element that we will use to put our image in and a textblock that we will type our text in!

In your project in visual studio in your assets folder you have a couple on images there I used the image with the name of smalllogo as you see in the source attribute.

Note:
You use source attribute to let VS know in which folder your image is located.
All your image have to be in your project there is a folder called assets folder put your images there.

But in this picture our image is above the text what should we do to make it in the same line?!!
Yeah as you think of it, easily put the stackpanel orientation to horizontal.
Like that!

But I want some space between the image and the text. Ok you will get what you need.
Just use the margin attribute like so:

The 10 is a 10px space on the left and 0 on top, 0 form right, 0 from bottom.
Now we have a nice button! As I said it is easy :D.   

Continue reading

Well in the previous post I talked about Grids, rows and columns so in this post I will talk about stackpanel and it is orientation and alignment.
So let’s start.

StackPanels:

Stackpanels are pretty simples they just allow you to arrange objects next to each others vertically or horizontally.
So stackpanel think of it like things stacked up either from top to bottom or from left to right.
 

So in this picture we have a stackpanel that have a couple of rectangles in it.
It is orientation is horizontal that’s mean we will start from right lo left so the first rect (Rectangle) with the color red will be in the right and the second one with the aqua color will be next to it and so on so forth. That will give you this layout in your designer.
 

here we have another stackpanel with four rect in it and its orientation is vertical that’s basically mean set these rect from top to bottom.

so the code above will give you the next layout in your designer.

 You can also put stackpanels inside another stackpanel.
I hope you get it.it is pretty easy.

 

Continue reading

Well in this post I want to talk about layouts or in other words how controls are positioned in you user interface.
There are two important elements in XAML these elements are the Grid element and the Stackpanel element.

For the grid we will talk about how to define columns and rows and the various sizing options.

On the other hand, talking about the stackpanel we are going to discuss how to change the orientation for it’s items from horizontal to vertical and talking about the alignment as well.

The grid element is use for laying out other controls it allows you to define rows and columns and you have the ability to choose in which row or column (or both) that specific element should be placed inside it.

Well let’s start :
by default there is always one row and one column even if it not define in our code, so every item between the opening and closing grid tag is defined in row = 0 and column = 0.

Ok let’s take a look on defining rows and columns:

First let’s define our rows like this:

Here I have three rows defined in a
the first one of a fixed height (the actual number of pixels) of 200px, the second one of an auto height which means take a 200px from our grid to that specific row.

Note: 200px because we have a rectangle that has a height of 200.

Then we have a row definition with star (*).The star means use the remainder area available. So the first row is 200px and the second row is 200px that mean the third row equal = the whole height – (200+200).

Notice that I have assigned the rectangle element to the first row by using Grid.Row = 0, and the second one by Grid.row =” 1”.

For the “*” size you have other options
you can type something like that:

Grid.RowDefinations

Grid.RowDefinations Height = “1*”

 or
Grid.RowDefinations Height = “2*”
Grid.RowDefinations

 

and so on so forth.

The “1*” means give me one share of the height, the second one says give me two shares of the remainder height.

So then you define your rectangles as follows:

Rectangle fill=”red” Grid.Row=”0”
Rectangle fill=”cyan” Grid.Row=”1”

then it will fill up the heights since we didn’t define a height or width.

Now let’s talk about columns it is pretty much the same but vertically ;)                             

So let’s define our columns:

Here I have three columns defined in a
the first one of a fixed Width (the actual number of pixels) of 500px, the second one of an auto width which means take a 200px from our grid to that specific column.

So you will get the next layout!

 

 
As I mentioned before what apply for rows come true for columns too.

Ok we have finished our talk about grids.
in the very next post we will talk about stackpanels.

Continue reading