Getting Started: Getting around in Visual Studio

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

Getting around in Microsoft Visual Studio

Let's now return to the MyApp project that you created earlier and show you how to find your way around the Microsoft 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.

Microsoft 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.

Note  Notice how the files listed in the right hand column in the Solution Explorer view are divided into three main sections: MyApp.Windows, MyApp.WindowsPhone and MyApp.Shared. These sections are present because this is a Universal Windows App. Source files can exist in under MyApp.Shared for both projects or under the platform-specific section as required.

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 (or right click) the MainPage.xaml under MyApp.Windowsto 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 stores the layout and binding information inside a .xib file, in Visual Studio, .xaml files display these details in a rich, editable, declarative language. For more info about Extensible Application Markup Language (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. 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, make sure that MyApp.Windows is in bold (to indicate that it is the default StartUp project) and 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, return to Visual Studio, tap the Debug menu, and then tap Stop Debugging (or just press SHIFT + F5).

You can repeat the process for the Windows Phone project by following exactly the same steps but for the MainPage.xaml under theMyApp.WindowsPhone branch. Of course, if this was all your app did, you could drag the MainPage.xaml file to the MyApp.Shared branch, and delete the existing MainPage.xaml from under the MyApp.WindowsPhone branch. This would share the MainPage.xaml file between both platforms, and save you some work.

Next step

Getting started: Common Controls