Windows App Development (win 8.1) - #3

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

Windows App Development (win 8.1) - #2

Before Starting Your First Windows app Development, you need Some tools.

Create/Log-In the Microsoft Account

Download the Windows 8.1 Evaluation Copy Download

Download Visual Studio Community Edition

Register Your Mobile Device to start the Development

If You want to use Emulator for development your System Requirements.




Prev - Next

Windows App Development (win 8.1) - #1

Before starting windows App Development we must know about XAML.

         XAML (Extension Application Markup Language) is a XML based Language Developed by Microsoft.

XAML forms a User Interface markup language to define User Interface  elements, Data Biding, events and other features.

XAML for Windows Mobile:

         XAML is similar to HTML, its frame work Code name is “Jupiter” for windows run-time. XAML is a part of the windows run-time programming model that forms the backbone of windows store apps (formally known as Metro style ( or) Immersive) for the windows 8, 8.1 and Phone 8.1 operating System. It enables Declaring user interface using XAML Technology.

         XAML is really just XML, Normally HTML is used to design Web pages and XML is more powerful than HTML. In XML we can define elements and attributes to suite our needs. We are using XML to share Information between Devices, and application configurations but XAML is used for User Interface design in windows app development. In windows app XAML is Creating instance for Classes and set the values of the properties in C# file. XML and HTML are not case sensitive but XAML is Case sensitive Just see the following small example. For Button Control how I we in XAML.

<Button x:Name=”TestClick”

Content="Button" 

HorizontalAlignment="Left"

Margin="144,131,0,0" 

VerticalAlignment=”Top”

Click=”MyButton_Click”

Width=”200”

Height=”100”

Background=”Red”/>

These XAML Code is equal to Following Code in Code behind

Protected override void OnNavigated(NavigationEventArgs e)

{

Button myButton=new Button();

myButton.Name=”TestClick”;

myButton.Content=”Button”;

myButton.Width=”200”;

myButton.Height=”100”;

myButton.HorizontalAlignment=Windows.UI.Xaml.HorizontalAlignment.Left;

myButton.VerticalAlignment=Windows.UI.Xaml.VerticalAlignment.Top;

myButton.Background=new SolidColorBrush(Colors.Red);

myButton.Click += MyButton_Click;

<Grid_Name>.children.Add(myButton);

}

         Here XAML Button Control is Instance for the Button class in C#. Here have you seen the Code behind for single Button Control we wrote 10 lines of code, But by using XAML we wrote the same Code in single line  only. Suppose if our page have more than 20 controls if we use the XAML it is just 20 lines of code only but if we use same Code in C# Code behind it take single control for eacdh line. And we will easily defined the Controls in XAML. 

         Here have observe the deference between XAML and C#. For properties VerticalAlignment, Background, HorizontalAlignment properties how we wrote in XAML and C#. XAML parser will Convert HorizontalAlignment property value "Left" to Windows.UI.Xaml.HorizontalAlignment.Left, if you try myButton.HorizontalAlignment="Left" then C# Compiler will throw the Error.

         Have you remember XAML is Case Sensitive if you type HorizontalAlignment property value "left" then we will get the Compilation Error because XAML can't find the exact match for  Windows.UI.Xaml.HorizontalAlignment.Left. You will know more about XAML when the real Development Start.

Next