XAML is somewhat like HTML but lot more powerful coming from the Microsoft Windows Presentation Foundation(WPF). It is a declarative language (you pretty much declare most of the things) and Visual Studio Express for Windows Desktop allows you to create projects of the type, WPF Application.
You can download Visual Studio 2013 Express for Windows Desktop which is free from here:
http://www.visualstudio.com/downloads/download-visual-studio-vs
Before installing make sure your computer satisfies the requirements(at least the minimum).
You can buy higher versions like Standard, Professional and Ultimate and they are expensive.
Once it is installed you have the option to launch it, if you want to.
I usually launch it as the adminsitrator of the computer.
Click File | New Project to create a new project (You can use VB or C#). Use the Project type WPF Application.
Click OK and you will get a project folder in your Solution Explorer
Here is the default project created as shown:
Right side you have the Solution Explorer and the MainWindow.xaml is represented in both design(top left) and in the markup language in bottom left. The main window has a size of 350x525 but you are seeing at a reduced size 25%.
In what follows you will be placing a number of objects inside a grid, using the grid layout. This happens to be the default as you see in the markup
A grid is a layout type that allows you to create 2D geometrical pattern (like a chess board) consisting of rows and columns and in the intersecting cells you may place other controls. You may also think of the grid as a table with rows and columns if you are used to HTML coding. But strictly speaking Grid is not a table.
Make sure you read the code and this is pretty much the default. You see just one row and one column.
Now the logic for the grid arrangement goes like this:
1. You create Grid Definitions
2. You decide the row definition
3, You decide the column definition
4. You decide what to put in each of the cells
If there are 3 rows and 3 columns, you will have nine cells to place your objects(controls).
In this post, you will be creating a 3x3 grid and place in them nine buttons to mimic the numeric keypad. I have not included the '0' and you may try to modify it on your own.
Here is the XAML code for this grid layout:
----
----You can download Visual Studio 2013 Express for Windows Desktop which is free from here:
http://www.visualstudio.com/downloads/download-visual-studio-vs
Before installing make sure your computer satisfies the requirements(at least the minimum).
You can buy higher versions like Standard, Professional and Ultimate and they are expensive.
Once it is installed you have the option to launch it, if you want to.
I usually launch it as the adminsitrator of the computer.
Click File | New Project to create a new project (You can use VB or C#). Use the Project type WPF Application.
Here is the default project created as shown:
Right side you have the Solution Explorer and the MainWindow.xaml is represented in both design(top left) and in the markup language in bottom left. The main window has a size of 350x525 but you are seeing at a reduced size 25%.
In what follows you will be placing a number of objects inside a grid, using the grid layout. This happens to be the default as you see in the markup
A grid is a layout type that allows you to create 2D geometrical pattern (like a chess board) consisting of rows and columns and in the intersecting cells you may place other controls. You may also think of the grid as a table with rows and columns if you are used to HTML coding. But strictly speaking Grid is not a table.
Make sure you read the code and this is pretty much the default. You see just one row and one column.
Now the logic for the grid arrangement goes like this:
1. You create Grid Definitions
2. You decide the row definition
3, You decide the column definition
4. You decide what to put in each of the cells
If there are 3 rows and 3 columns, you will have nine cells to place your objects(controls).
In this post, you will be creating a 3x3 grid and place in them nine buttons to mimic the numeric keypad. I have not included the '0' and you may try to modify it on your own.
Here is the XAML code for this grid layout:
----
This is pretty much all that is required. I have used a 300x300 sized gird. You may copy this and paste it after removing the default XAML code, but you have to name the project just as in the second screen shot or make changes to your XAML code.
This produces the foloowing in the design area
If you want you can add some styling as shown here for just one cell:
In XAML coding make use of intellisense, a feature that gives you the possible things you can insert as you type on.
No comments:
Post a Comment