Visual Studio Cross-platform Development (2): Xamarin.ios Basic Control Introduction

Preface

In the previous article, we introduced Xamarin and the simple HelloWorld paradigm, which we described for the iOS Project directory architecture and basic controls. Contains Uibutton,uislider,uiswitch, UIImage, and UIWebView controls.

The user interface of iOS describes the document, whose copy of the document is named. Xib, which is currently not supported for direct editing in Visual Studio. So in this article, we'll start with Xamarin studio and use the interface Builder in Xcode to lay out the controls we need, and then we'll start the project with Visual Studio to write program code. Let's get started.

Create a project and use Xcode Interface Builder

1. Open Xamarin Studio. New project = Select Iphone=> under iOS to select Single View from the menu on the right application

2. Enter "Lab01-helloworld" in the name and project name

3. After the project is established, review the project's document structure.

Main.cs: The entry point of the application.

• AppDelegate.cs: The main application Class (Class), and receive events from the operating system and corresponding event handling.
• Lab01_helloworldviewcontroller.cs: Responsible for the life cycle of the main screen, which is the MVC layered controller.
• Lab01_HelloWorldViewController.designer.cs: Contains the declaration of the Definition and Action (action) of the object in the consumer interface.
• Lab01_helloworldviewcontroller.xib: The main user interface definition document, the MVC layered view. XML format, which can be edited by Xcode's interface Builder (IB).
• Info.plist: Information documentation for the application, such as name, version, icon, and so on.

4. Double-click Lab01_helloworldviewcontroller.xib to open Xcode, drag the button and label to the object library on the right of IB, close IB after archiving, and go back to Xamarin Studio

5. Use visual Studio to open the Lab01-helloworld project in parallel with the following settings:

• In the tools column/= Build and configure the administrator, set the platform to Iphonesimulator

• Change the emulator version to iphone 6.1

• To open the project properties, select the iOS application node and enter application Name, Identifier, version, and other information. The bottom "Deployment target" represents the minimum operating system version of the target appliance. Select 6.0 here to indicate that this application can be executed after iOS 6.0.

• Execute Project: The IPhone Simulator will launch and display the page that was designed by the previous step.

Outlet and Action

Because the development mode of the iOS application uses the layered architecture of MVC. Therefore, after the user has placed the control on the view, a link (Connect) must be added to the controller in order for the controller to operate the control through the program code. This link can be done via outlet and action on iOS.

• Outlet: link the view and controller in a property way. You can attach an event handler or call method to outlet
• Action: Command property similar to WPF. You can bind more than one control to the same action.

We then use practical examples to understand outlet and action.

1. Open lab1_helloworldviewcontroller.xib in Xamarin Studio and go to interface Builder.

Click on the "Show Assistant Editor" icon at the top right

Another secondary window appears and brings out the Lab01_helloworldviewcontroller.h header file

2. Hold down the "Control" key and drag the button "click Me" to the blank space in the middle of the @interface and @end

When released, a dialog window appears, and "Btnclickme" is entered in the Name field.

3. According to step 2, add a outlet to the label and name it lbloutput.

You will find that 2 additional properties are added to the header document, and the interface Builder is closed after confirmation

4. When you open Lab01_HelloWorldViewController.designer.cs in Visual Studio, you will notice that 2 attributes are declared in the document file, with the same name as the one named in the previous step. and added the [Outlet] Property (Attribute)

5. Open the Lab01_helloworldviewcontroller.cs document. and add Btnclickme's Touchupinside event delegate and event handler in the Viewdidload event handler, as shown in:

6. Execute the project and test that the Click Me button is functioning properly.

Since the latest version of Xamain.ios is now supported in C # 5.0. Therefore, such as anonymous methods and lambda expression and other syntax are supported, the above-mentioned delegation and event processing can also be written by the following code:

7. Click the Xib document again. Add an action (not outlet) to the Action 1 button as shown in step 2, select Action in the Connection section, enter "Actnbuttonclick" in the part of name

In the header document on the right, you can see that the action differs from the previously joined outlet.

In the way above, we add the Action 2 button to the same action. Press control, and then drag and drop the Action 2 button to the previous – (Ibaction) Actnbuttonclick: (ID) sender's declaration. Only the method of connect action appears, as shown in:

8. Close interface Builder and return to visual Studio to reload the ViewController.Designer.cs document. You can see that the action you just added is converted to a method that does not have a callback value.

9. Open Lab01_helloworldviewcontroller.cs in the category blank out enter "partial", Visual Studio will prompt you to add Actnbuttonclick event handlers. Please enter the following program code:

Execute the program to verify that the results are in line with expectations

Basic Control Items

In the previous section, we have practiced the operation of UIButton and Uilabel controls. Next we will explain the other basic controls.

• Slider

1. This allows us to dynamically generate slider controls through the program. First we add a slider control declaration to the Lab01-helloworldviewcontroller category

View Source print?

1	UISlider _slider;

2. Initializes the control in Viewdidload event processing and passes the value of the current slider to the Label control display in the ValueChanged event

View Source
Print?

1	_slider = Newuislider (Newrectanglef (Ten, view.frame.width-20, 50));

2	_slider. MinValue = 0.0f;

3	_slider. MaxValue = 100.0f;

4	_slider. SetValue (20.0f,false);

5	_slider. valuechanged + = (sender, e) = =

6

{

7	This.lblOutput.Text =string. Format (the current value of the slider is {0}, _slider (int). Value). ToString ());

8

};

9	View.addsubview (_slider);

3. Execute the project and try sliding the slider

• Switch

1. Also through the process of dynamic production, we declare in the Lab01_helloworldviewcontroller category

View Source
Print?

1	Uiswitch _switch;

2. Initializes the control in Viewdidload event processing and passes the value of the current slider to the Label control display in the ValueChanged event

View Source
Print?

01	Initialize the child control switch

02

03	_switch = Newuiswitch (Newrectanglef (10,350,100,30));

04

05	_switch. SetState (True,false);

06

07	_switch. Hidden = true;

08

09	_switch. valuechanged + = (sender, e) = =

10

11

{

12

13	This.lblOutput.Text =string. Format ("Current switch has a value of {0}", _switch. On? " On ":" OFF ");

14

15

};

16

17	View.addsubview (_switch);

3. Execute the project and try switching the switch control

1. Turn on Lab01_helloworldviewcontroller.xib. and place 1 Uiimageview objects as shown:

Added 1 outlet to the Uiimageview object and named _img

2. Here we borrow Btnclickme event handling, specifying Uiimageview's image source. (please include the picture document in the project, here we use flower.jpg)

View Source
Print?

01	This.btnClickMe.TouchUpInside + = (sender, e) = =

02

03

{

04

05	This.lblOutput.Text = string. Format ("I was ordered under {0}", ++i);

06

07	_img. Hidden = false;

08

09	_img. Image = Uiimage.fromfile ("flower.jpg");

10

11

};

In the program code above, the image data source is pre-placed in the project directory of the picture document.

3. When you click ClickMe after executing the project, the results are as follows:

Conclusion

With the above introduction, do you think that using C # to develop iOS applications is very similar to developing Windows Form applications? I'm sure you can extrapolate, use other controls to build your iOS app, and in the next article you'll learn how to develop a multi-page app for iOS and how the program previews it on the page.

Visual Studio Cross-platform Development (2): Xamarin.ios Basic Control Introduction