Getting Started: Getting around in Visual Studio

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.

Xcode development environment

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.

Visual Studio development environment

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.
Pinning the Toolbox in Visual Studio

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.

Designing UI in Xcode

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.

Designing UI in Visual Studio

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

Properties window in Xcode

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.

Button Properties window in Visual Studio

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 {

}

Wiring a button to an event in Xcode

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

Alternate way of wiring a button to an event in Xcode

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.

Button events list in Visual Studio

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;

Wiring a label to its definition in Xcode

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

Alternate way of wiring a label to its definition in Xcode

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".
Label Properties window in Visual Studio

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.

Results of running the first walkthrough: Hello, World!

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

Next step

Getting started: Common Controls

 

 

Show:
© 2014 Microsoft. All rights reserved.