Getting started for iOS developers

If you're an iOS app developer considering developing apps for Windows 8, this article is a great place to start. It shows you how to use Microsoft development tools like Microsoft Visual Studio or Microsoft programming languages like C#. It also introduces you to some of the concepts you'll need to know as you get started with developing apps for new Windows UI in Windows 8. We call these apps Windows Store apps.

Windows 8 introduces a new platform for creating engaging apps. Because Windows Store apps provide lots of unique features, a straight port of your iOS app will likely prevent you and your users from using these features. Before you get too far into this article, we encourage you to take a look at the Design case study: iPad to Windows Store app to see what's possible. That case study may spark your app-building imagination, with features like layout and navigation, commands and actions, contracts, touch, orientation and views, and notifications. Don't just port your app. Reimagine your app, and take advantage of features like the app bar, Semantic Zoom, the search and Share contracts, the file picker, charms, live tiles, and toast notifications.

To get started with these walkthroughs, you'll need a computer with both Windows 8 and Visual Studio Express 2012 for Windows 8 installed. You can download these from the Developer downloads for programming Windows Store apps.

Top

Creating a project

Visual Studio is to Windows as Xcode is to iOS and Mac OS. In this walkthrough, we help you get comfortable using Visual Studio. It shows you the absolute basics you'll need to know to get started. Each time you create an app, you'll follow steps similar to these.

Begin by running Visual Studio Express 2012 for Windows 8. The first time you run it, Visual Studio will ask you to get a developer license. A developer license lets you install and test Windows Store apps on your local computer before you submit them to the Windows Store. To get a license, follow the on-screen directions to sign in with a Microsoft account. If you don't have one, click the Sign up link in the Developer License dialog box, and follow the on-screen directions.

For comparison, when you start Xcode, the first thing you see is the Welcome to Xcode screen, similar to the following figure.

Microsoft Visual Studio is very similar. You'll see the Start Page, as shown in the following figure.

To create a new app, start by making a project by doing one of the following:

• In the Start area, tap New Project.
• Tap the File menu, and then tap New Project.

For comparison, when you create a new project in Xcode, you see a list of project templates like those shown in the following figure.

In Visual Studio, there are also several project templates to choose from, as shown in the following figure.

For this walkthrough, tap Visual C#, and then tap Blank App (XAML). In the Name box, type "MyApp", and then tap OK. Visual Studio creates and then displays your first project. Now you can begin to design your app and add code to it.

Top

Choosing a programming language

Before we go any further, you should know about the programming languages that you can choose from when you develop Windows Store apps. Although the walkthroughs in this article use C#, you can develop Windows Store apps using several programming languages. By contrast, you use only Objective-C to develop iOS apps.

You can develop Windows Store apps using C++, C#, Microsoft Visual Basic, and JavaScript. JavaScript uses HTML5 markup for UI layout. The rest of the languages use a markup language called Extensible Application Markup Language (XAML), which you'll learn about in walkthroughs later in this article.

Although we're focusing on C# in this article, the other languages offer unique benefits, which you may want to explore. For example, if your app's performance is a primary concern, especially for intensive graphics, then C++ might be the right choice. The Microsoft .NET version of Visual Basic is great for Visual Basic app developers. JavaScript with HTML5 is great for those coming from a web development background. For more info, see one of the following:

• Create your first Windows Store app using C++
• Create your first Windows Store app using C# or Visual Basic
• Create your first Windows Store app using JavaScript

Note  For apps that use 3D graphics, the OpenGL and OpenGL ES standards are not available for Windows Store apps. However, you can use Microsoft DirectX—with C++. Like OpenGL ES 2.0, DirectX 11 supports a programmable pipeline and uses a Microsoft High Level Shader Language (HLSL) that is comparable to the OpenGL Shading Language (GLSL). To learn more about DirectX, see the following:

• Create your first Windows Store app using DirectX
• Windows Store app samples that use DirectX
• Where is the DirectX SDK?

As an iOS developer, you're accustomed to Objective-C. The closest Microsoft programming language to Objective-C is C#. For most developers and most apps, we think C# is the easiest and fastest language for Objective-C developers to learn and use, so this article's info and walkthroughs focus on that language. To learn more about C#, see the following:

• Create your first Windows Store app using C# or Visual Basic
• Windows Store app samples that use C#
• Visual C#

Following is a class written in Objective-C and C#. The Objective-C version is shown first, followed by the C# version. In C#, you'll see that the header and the implementation are not in separate files.

// Objective-C header: SampleClass.h.

#import <Foundation/Foundation.h>

@interface SampleClass : NSObject {
    BOOL localVariable;
}

@property (nonatomic) BOOL localVariable;

-(int) addThis: (int) firstNumber andThis: (int) secondNumber;

@end

// Objective-C implementation.

#import "SampleClass.h"

@implementation SampleClass

@synthesize localVariable = _localVariable;

- (id)init {
    self = [super init];
    if (self) {
        localVariable = true;
    }
    return self;
}

-(int) addThis: (int) firstNumber andThis: (int) secondNumber {
    return firstNumber + secondNumber;
}

@end

// Objective-C usage.

SampleClass *mySampleClass = [[SampleClass alloc] init];
mySampleClass.localVariable = false;
int result = [mySampleClass addThis:1 andThis:2];

// C# header and implementation.

using System;

namespace MyApp  // Defines this code's scope.
{
    class SampleClass
    {
        private bool localVariable;

        public SampleClass() // Constructor.
        {
            localVariable = true;
        }

        public bool myLocalVariable // Property.
        {
            get
            {
                return localVariable;
            }
            set
            {
                localVariable = value; 
            }
        }

        public int AddTwoNumbers(int numberOne, int numberTwo)
        {
            return numberOne + numberTwo;
        }        
    }
}

// C# usage.

SampleClass mySampleClass = new SampleClass();
mySampleClass.myLocalVariable = false;
int result = mySampleClass.AddTwoNumbers(1, 2);

Top

Getting around in Visual Studio

Let's now return to the MyApp project that you created earlier and show you how to find your way around the Visual Studio integrated development environment (IDE).

Xcode developers should be familiar with the default view in the following figure, where you have source files in the left pane, the editor (either the UI or code) in the center pane, and controls and their properties in the right pane.

Visual Studio is similar, although the default view has the controls on the left side in the Toolbox. The source files are in the Solution Explorer on the right side, and properties are in Properties on the right side. This layout is shown in the following figure.

You can rearrange the panes in Visual Studio if you want your source files on the left side and controls on the right side. For example, to move the Toolbox from the left side of the screen to the right side, press and hold the Toolbox pane's title bar, begin dragging it, and then drop it on the far right drop target that appears in the middle of the screen. Visual Studio displays a shaded box to let you know where the Toolbox will be docked after you drop it there.

To make your IDE look like the previous figure, do this:

1. In Solution Explorer, press and hold MainPage.xaml to open it.
2. On the left side, tap Toolbox to display it. Then, in the Toolbox pane's title bar, tap the pushpin icon to pin it, as shown in the following figure.

Top

Adding controls, setting their properties, and responding to events

Let's now add some controls to your MyApp project. We'll then change some of the controls' properties, and write some code to respond to one of the control's events.

To add controls in Xcode, you open up the desired .xib file and then add controls, like a Round Rect Button and a Label, as shown in the following figure. In Visual Studio, .xaml files are similar to .xib files.

Let's do something similar in Visual Studio. In the Toolbox, press and hold the Button control, and then drop it onto the MainPage.xaml file's design surface. Do the same with the TextBlock control, as shown in the following figure.

Notice that unlike Xcode, which hides the layout and binding information inside a .xib file, in Visual Studio, .xaml files display these details in a rich, declarative language. For more info about XAML, see XAML overview. Everything that is displayed in the Design pane is defined in the XAML pane. The XAML pane allows for finer control where necessary, and as you learn more about it, you can develop code faster. For now however, let's focus on just the Design pane and Properties.

Let's now change the button's contents and name. To change the button's contents in Xcode, in the button's properties pane, you change the value of the Title box, as shown in the following figure.

In Visual Studio you do something similar. In the Design pane, tap the button to give it the focus. Then, to change the button's contents, in the Properties pane, change the Content box's value from "Button" to "Press Me". Next, to change the button's name, change the Name box's value from "<No Name>" to "myButton", as shown in the following figure.

Now let's write some code to change the TextBlock control's contents to "Hello, World!" after the user taps the button.

In Xcode, you would associate an event's behavior with a control by writing code and then associating that code with the control, similar to the following code and figure.

// Objective-C header.

-(IBAction) buttonPressed: (id) sender;

// Objective-C implementation.

-(IBAction) buttonPressed: (id) sender {

}

Note that in Xcode, you can also associate event code with a control as shown in the following figure.

Visual Studio is similar—and perhaps a little easier. At the top right of Properties is a lightning bolt button. This is where the events that are associated with the selected control are listed, as shown in the following figure.

To add code for the button's click event, in the Design pane, first tap the button. Then tap the lightning bolt button, and press and hold the box next to the Click label. Visual Studio adds the text "myButton_Click" to the Click box and then adds and displays the corresponding event handler in the MainPage.xaml.cs file, as shown in the following code.

private void myButton_Click(object sender, RoutedEventArgs e)
{

}

Let's now change the TextBlock control's name. In Xcode you would write the following code and associate the control with its definition, as shown in the following figure.

// Objective-C header.

IBOutlet UILabel *myLabel;

Note that in Xcode, you can also associate the code with its definition as shown in the following figure.

In Visual Studio, you do this, as shown in the following figure:

1. Tap the MainPage.xaml file tab.
2. In the Design pane, tap the TextBlock control.
3. In the Properties pane, tap the wrench button to display its properties.
4. In the Name box, change "<No Name>" to "myLabel".

Let's now add some code to the button's click event. To do this, tap the MainPage.xaml.cs file, and add the following code to the myButton_Click event handler.

private void myButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    myLabel.Text = "Hello, World!";
}

The previous code is similar to what you would write in Xcode, as follows.

-(IBAction) buttonPressed: (id) sender {
    myLabel.text = @"Hello, World!";
}

Finally, to run the app, in Visual Studio, tap the Debug menu, and then tap Start Debugging (or just press F5). After the app starts, tap the "Press Me" button, and see the label's contents change from "TextBlock" to "Hello, World!", as shown in the following figure.

To quit the app, in Visual Studio, tap the Debug menu, and then tap Stop Debugging (or just press SHIFT + F5).

Top

Common controls list

In the previous section, you worked with only two controls. Of course, there are many more controls that are available to you. Here are some common ones. The iOS controls are listed in alphabetical order, next to their equivalent Windows Store app controls.

For even more controls, see Controls list.

Note  For a list of controls for Windows Store apps using JavaScript and HTML, see Controls list.

Top

Adding navigation

iOS provides two primary ways to manage navigation, through the UINavigationController and UITabBarController classes. For the navigation controller, you push and pop view controllers to get the desired effect. By using the UITabBar class, you simply configure the tab bar controller with the appropriate view controllers.

In Windows 8, navigation should blend into your app's content. This follows from one of the principles of Windows Store app design, "content before chrome". For more info, see Navigation design for Windows Store apps.

With Windows Store apps, one of the ways to manage navigation is with the Frame class. The following walkthrough shows you how to try this out.

You can either continue to use the MyApp project that you created earlier, or you can create a new project. If you create a new project, you can name it something like "App1". Open the MainPage.xaml file if it isn't already visible. Add a button to the MainPage.xaml file in Design view. Change the button's Content property from "Button" to "Go To Page". Then create a handler for the button's Click event, as shown in the following figure. If you don't remember how to do this, review the walkthrough in the preceding section "Adding controls, setting their properties, and responding to events".

Let's add a new page: tap the Project menu, and then tap Add New Item. Tap Blank Page as shown in the following figure, and then tap Add.

Next, add a button to the BlankPage1.xaml file. Let's give the button a back arrow image: in the XAML view, add Style="{StaticResource BackButtonStyle}" to the <Button> element.

Now let's add an event handler to the button: in the Properties pane, tap the lightning bolt button, and then press and hold the box next to the Click label. Visual Studio adds the text "Button_Click_1" to the Click box, as shown in the following figure, and then adds and displays the corresponding event handler in the BlankPage1.xaml.cs file.

If you return to the BlankPage1.xaml file's XAML view, the <Button> element's XAML code should now look like this. (Line breaks have been added for code readability.)

<Button 
    Content="Button" 
    HorizontalAlignment="Left" 
    Style="{StaticResource BackButtonStyle}"  
    Margin="10,10,0,0" 
    VerticalAlignment="Top" 
    Click="Button_Click_1"
/>

Return to the BlankPage1.xaml.cs file, and add this code to go to the previous page after the user taps the button.

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    Frame.GoBack();
}

Finally, open the MainPage.xaml.cs file and add this code. It opens BlankPage1 after the user taps the button.

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    // Add the following line of code.
    Frame.Navigate(typeof(BlankPage1));
}

Now run the program. Tap the "Go To Page" button to go to the other page, and then tap the back-arrow button to return to the previous page.

Page navigation is managed by the Frame class. Similar to the UINavigationController class in iOS, which has pushViewController and popViewController methods, the Frame class for Windows Store apps has Navigate and GoBack methods. The Frame class also has a method called GoForward, which does what you might expect.

This walkthrough creates a new instance of BlankPage1 each time you navigate to it. (The previous instance will be freed, or released, automatically by the garbage collector). If you don't want a new instance to be created each time, add the following code to the BlankPage1 class's constructor in the BlankPage1.xaml.cs file. This will enable the NavigationCacheMode behavior.

public BlankPage1()
{
    this.InitializeComponent();
    // Add the following line of code.
    this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}

You can also get or set the Frame class's CacheSize property to manage how many pages in the navigation history can be cached.

For more info about navigation, see Quickstart: Navigating between pages and XAML personality animations sample.

Note  For info about navigation for Windows Store apps using JavaScript and HTML, see Quickstart: Using single-page navigation.

Top

Adding animations

In iOS, you do animations programmatically. You might use animations provided by the block-based UIView class's animateWithDuration methods, or the older non-block based methods. Or you might explicitly use the CALayer class to animate layers. Animations in Windows Store apps can be done programmatically as well, but they can also be done declaratively with XAML. You can use Visual Studio to edit XAML code directly. Also, Microsoft Visual Studio 2012 comes with a tool called Blend for Microsoft Visual Studio 2012 for Windows 8, which edits XAML code for you in the background as you work with animations in a designer. In fact, Blend even allows you to open, design, build, and run complete Visual Studio projects. The following walkthrough lets you try this out.

You can either continue using the MyApp project that you created earlier, or you can create a new project. If you create a new project, you could name it something like "SimpleAnimation". In this project, we're going to move a rectangle, fade it away, and then bring it back into view. Animations in XAML are based on the concept of storyboards. Storyboards use keyframes to animate property changes. There are no implicit animations in Windows Store apps but, as you'll see, animating properties is straightforward.

With your project open, in Solution Explorer, press and hold the project's name, for example, MyApp or SimpleAnimation. Then tap Open in Blend, as shown in the following figure. Visual Studio continues to run in the background.

After Blend starts, you should see something similar to the following figure.

Next, tap the Rectangle in the Tools window to select it, and then draw a rectangle in Design View, as shown in the following figure.

To make the rectangle green, in the Properties window, in the Brush area, tap the Solid color brush button, tap the Color eyedropper icon, and then tap somewhere in the green band of hues.

To begin animating the rectangle, in the Objects and Timeline window, tap the plus symbol (New) button as shown in the following figure, and then tap OK.

A storyboard appears in the Objects and Timeline window. The Design View display changes to show that Storyboard1 timeline recording is on. To capture the current state of the rectangle, in the Objects and Timeline window, tap the Record Keyframe button just above the yellow arrow, as shown in the following figure.

Now let's move the rectangle and fade it away. To do this, drag the yellow arrow to the 2-second position, and then drag the rectangle slightly to the right. Then, in the Properties window, in the Appearance area, change the Opacity property to 0, as shown in the following figure. To preview the animation, tap the Play button, which is circled in the following figure.

Next, let's bring the rectangle back into view. In the Objects and Timeline window, tap Storyboard1. Then, in the Properties window, in the Common area, tap AutoReverse, as shown in the following figure.

Finally, tap the Play button to see what happens.

You can run the project by tapping the Project menu and then tapping Run Project (or just press F5). If you do this, you'll see your green rectangle, but the rectangle won't animate. To start the animation, you'll need to add a line of code to the project. Here's how.

In Blend, tap the File menu, tap Save, and then return to Visual Studio. If Visual Studio displays a dialog box asking whether you want to reload the modified file, tap Yes. Open the MainPage.xaml.cs file, and add the following code.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Add the following line of code.
    Storyboard1.Begin();
}

Run the project again, and watch the rectangle animate.

If you open the MainPage.xaml file, in XAML view you'll see the XAML code that Blend added for you as you worked in the designer. In particular, look at the code in the <Storyboard> and <Rectangle> elements. The following code shows an example. Ellipses indicate unrelated code omitted for brevity, and line breaks have been added for code readability.)

...
<Storyboard 
        x:Name="Storyboard1" 
        AutoReverse="True">
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="185.075"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="2.985"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.Opacity)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="1"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2"
                Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
...
<Rectangle 
        x:Name="rectangle" 
        Fill="#FF00FF63" 
        HorizontalAlignment="Left" 
        Height="122" 
        Margin="151,312,0,0" 
        Stroke="Black" 
        VerticalAlignment="Top" 
        Width="239" 
        RenderTransformOrigin="0.5,0.5">
    <Rectangle.RenderTransform>
        <CompositeTransform/>
    </Rectangle.RenderTransform>
</Rectangle>
...

For more info about animations, see Quickstart: Animating your UI.

Note  For info about animations for Windows Store apps using JavaScript and HTML, see Animating your UI.

Top

Next steps

You can now create more robust Windows Store apps based on the apps that you started in these brief walkthroughs. With this foundation to build upon, we invite you to explore the following additional resources:

• Windows 8 Product Guide for Developers: An overview of Windows Store app development principles like live tiles, features like app contracts, frameworks like the Windows Runtime, tools like the Windows Driver Kit (WDK), and more.
• Designing UX for apps: How to plan the user experience, get design guidance for Windows Store categories like games and productivity apps, and download design assets like PSDs.
• App contracts and extensions: How to declare agreements between your apps and other apps and Windows, for example the Play To contract and the Game Explorer extension.
• Working with tiles, badges, and toast notifications: How to create tiles, update tiles and their badges, send toast notifications, and show and update tile and badge updates on the lock screen.
• Launching, resuming, and multitasking: How to auto-launch, activate, suspend, and resume apps, and how to work with background tasks.
• Guidelines for roaming application data: How to provide a great end-user experience for apps where the user utilizes more than one device, such as a PC at work and a slate at home.
• Windows Store app samples gallery: Hundreds of samples for you to browse, download, and experiment with.

Also, be sure to visit our Community resources to learn how to get help and get connected through developer forums, blogs, developer camps and workshops, and local Microsoft events and contacts.

We think that Windows 8 will open up new app-building opportunities for you. We look forward to seeing all of the great apps that you're going to build!

Top

Build date: 3/5/2013