Krishna Mahesh: 2015

There are many ways to layout the windows app screen design in XAML. But two primary elements are used to positioning the layout of the XAML Page. Those are Grid and StackPanel.

In Grid Layout we can define screen as Rows and Columns. We can give various sizing options for each row & column.

In StackPanel we can change the Orientation of items inside the StackPanel and we can align the items.

Grid :

Grid element is using to layout the other controls inside the Rows & Columns of the Grid. First create a new project by selecting the Blank mobile application in template wizard. Then it will Generate a mobile app Solution with mainpage.xaml. Now just open that file, you will see image like as follows.

This mainpage.xaml contain Grid element by default. This Grid element does not contain any row’s and

column’s definitions. That means it taking all the page as single cell by default these grid element contain

single row definition and Column Definition. These definitions are implicitly taken by Grid element.

Just see the following code sample.

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

To Explain About these grid element I took 4 Row Definitions and 4 Column Definitions. So our Grid size will be 4x4. Here I am filling these cells with Rectangle control along with colors. In Row Definition Height attribute can be mention in 3 ways, Those are Height=”Auto”, Height=”*” and Height=”200”.

Here Height=”Auto” Means It takes the Height from the Controls mentioned inside that row

that should be also Tallest Control Mentioned inside of that row.

Height=”*” means this will take the whole screen Height if we gave as a Single Row Definition. If we gave more than one row definition its height will depend on other rows.

Height=”200” means this will take the 200 points height on the screen.

Similarly Column definition also. But it take Width attribute not height. if width auto means it take highest width of the control.

See the following image generated by the above code.

Here have you see the Orange Red at Left Bottom Corner, Orange at the Right top Corner and white at the left top corner.

For 1st Row 1st Column I wrote the following Code

(If we are not specified any Row or Column number by default it will take the 1st row and 1st column as its position)

Here I gave Height is 100 points and width is 90 points and I am filling this rectangle with color Beige. Then it take the Size of the First row height is 100 points and width of First Column is 90 points and Now I am filling the one more cell.

Now another cell is filled with Orange and I gave the Height is 120 points and width is same as cell one. Now first row height is changed to 120 points. But Width won’t be effect if you changed the width of

the orange cell that will effect for 4th column only it won’t be effect that row cells. Now I am adding one more cell with Orange Red.

In 3rd rectangle I had changed the Both Height and Width but the height of this row won’t be effect the other rows. It will effect only on the forth row height of the grid. But the width of this rectangle will affect the 1st column of the grid, now the width of First cell is taken as 120 points not 90 points and this width won’t be effect on Orange filled Cell.

Just see the 1st cell in the image you can find the height & width difference between 1st cell & 4th cell of 1st Row and 1st cell in First row & 1st cell in the fourth row simultaneously.

A Rectangle with height is 100 and width is 90 is center aligned in 1st cell of the 1st row.

Now I am adding one more row

I am filling 2nd row 2nd column with “SteelBlue” without any height and width it takes whatever height remains in that row and whatever width remains in that column.

You may got Confused just see the image to understand now I am adding one more column to this

Now see the Green Fill area in the image (Last Column) for that I wrote both height and width as 300x300 points but this height and width are not affected on 3rd row and 3rd column. Because we mentioned it as Height=”*” and Width=”*” So it won’t depend on its controls it will depends on other rows and columns height and width. In One word we are saying to this row/column to Auto adjust their size depending on other rows and columns.

In row definition I gave height of the two controls as follows.

Here it divide the screen Remaining screen as 3 parts in that 2 parts of space is for 1st row height and 1 part is for 2nd row height. This is how the Grid (Row Definition & Column Definition) will be work.

If we mentioned Height=”*” it is equal to Height=”1*”. I hope Readers will understand this article if they practiced.

Note:

1. Here I am used Rectangles for Explanation about Grid row sizes and columns. You may better to practice with other controls.

2. And While Explaining I am represented grid rows and columns from 1 to 4 but actually C# Grid will start it rows and columns from 0 not from 1 like arrays.

in Next Article i will Explain about StackPanel. :)

Download The Project

Prev - Next

In this Article we going to Create Windows Phone 8.1 Mobile App

Just Follow these steps to create the mobile app

Run the Visual Studio Community Edition (StartMenu --> Visual Studio Community Edition). It will open Visual Studio Start Page as like below window, now Click on the New Project (highlighted area in the image)

It will show the popup window like the following Image.

Here we can select the template for our Project. I am choosing Blank Mobile app for my Project. To select Blank Mobile App. First select the Project type as show in by Orange arrow(Templates --> Visual C# --> Store Apps --> Windows Apps). Now select the Blank App as Shown by Blue Arrow in the Image.Give Name To Your Project.

Now it will load the Project Template and Some Files I will Explain Those in Single line

App.xaml.cs --> This is used to define application level Designs and common Methods applicable for Project are used here.

MainPage.xaml --> it is the default page created with project template.

Properties --> This is All Project Assembly details and Project level settings will be stored here.

References --> This is the place where we add external DLL's/other namespaces to our project.

Assets --> Here we will add Images and other resources.

Package.appxmanifest --> it is an XML file it contain the Details about the Package dependencies, Required capabilities, visual elements and other things about our application.

You can see these in Solution Explorer by pressing [CTRL + W, S]

Now Double click on the MainPage.xaml it will show the Following Window

Here

Orange Color Arrow --> XAML Code Editor view. Over page Designs and controls code is located here only.

Purple Color Ellipse -->It is a Drop Down contain all Controls we are defined in XAML page. By Default It will show the Control where our cursor is pointed and we can Navigate to any of the control in our page by clicking this Drop Down.

Green Color Ellipse --> It is also a Drop Down similar to above but it will the Attributes of the control where we selected in Purple Color Ellipse.

Orange Color Ellipse --> We can adjust the Zoom the Code by using this.

Blue Color Arrow --> It is Preview Pane view what ever changes we are made in XAML those will be shown here.

Blue Color Ellipse --> we Can Adjust the size of over preview pane by using this (Zoom IN/Zoom Out).

Just press [CTRL+W,X] or Navigate click View > Toolbox it will show the Toolbox

Now Drag and Drop the Button and TextBlock Control on to the Preview pane as show in following window. After drag and drop have you observe the Code pane, Code for Both TextBlock and Button control is Generated. Just see Both Blue and Orange Arrows.

Now Select the Button Control and Click on the properties window on the right side [CTRL+W, P] or Through View Menu.

Just define the Name For Your Controls Then only you can access Your Controls in Code Behind. You can give name in tow ways by directly typing along with Name attribute or In Properties window filling the value to Name Attribute.Just see the Ellipse's. You can change the Button Content also just see the small Orange ellipse.

Now just see the Following Image in By default in your Properties window wrench mark is selected

just select the thunder symbol it will show all events applicable for our button method, Now in click event i'm writing a method name called "myButton_Click" then it will generate the Code stub in Code behind.

Code stub generated by visual studio in Code behind as follows.

I already gave name to my TextBlock as "MyTextBlock" now i am going to modify the TextBlock content in Button Click Event. simply i wrote the text as shown in following image

Now i'm saving my application and i'm connected my windows mobile device to my PC
Now i'm starting the Debug as shown in the following image. if you have emulator you can change by clicking the small arrow next to the Device. Before Running app make sure your Phone is Unlocked otherwise it will throw error.

Now this app is successfully deployed into your mobile and it runs like as show in the below image

Now just click on the Button then your event will be fired by app and it will Display the text as you entered in C# code behind. Now can check this how event is firing by using the Breakpoints in C# Code behind.

Download The Project

Prev - Next

Krishna Mahesh

Pages

Sunday 2 August 2015

Windows App Development (win 8.1) - #4

Sunday 5 July 2015

Windows App Development (win 8.1) - #3

LinkWithin

Search This Blog