Xamarin.iOS – Real Time iOS Coding with Xamarin Inspector

In this lesson

  • Get reference to view items
  • Add sub views to views
  • Handle user input


Tap on time to skip ahead


Greetings fellow .NET’rs. In this lesson we’re going to cover how we can use the Xamarin Inspector tool along with a Workbook to interact with a running iOS application.


We’re going to kick things off by opening up the Xamarin Inspector application. From here I can go File, New. Then I’m prompted with what type of Workbook I want to create. Again, I want to use a Xamarin.iOS Workbook. Then hit Create Workbook. Then, it is going to take a couple seconds for the Inspector tool to launch the iOS simulator and connect to it. The simulator will be our run time that will execute our code as we type it into the Workbook.


Now that we have our application running here in the right, we need to get a hold of the UI elements inside the iOS application. To do this, if we go to the top of our UI for the Workbook, we can select this icon here which will display the running application’s visual tree. As you can see here, we have a UIWindow which contains our application as well as the main UIView. When I select the UIView and then go back to our code view, you will see for each one of my clicks, we were getting an updated reference to whatever view that we were selecting.


Now that we have a reference to a particular view in memory I can rename this. In this particular instance, I’m going to call this mainView. Here again, I’m going to go to the end of the line and hit the return key to run that line of code. Now that I have a reference to our mainView, I can start playing with the simulator. I can type in mainView.BackgroundColor = UIColor.LightGray. After I hit return, you can see that the iOS simulator has updated the UI like so. I’m going to go ahead and scale this down a little bit, so everything fits a bit nicely on our screen. Alright, changing background colors is cool and all but can we do a bit more than that.


Let’s start out with creating a UILabel. I’m going to say var Label = new UILabel. I’m going to say label.Text = “Hello World.” Then, I’m also going to specify the frame of our UILabel with a CGRect. I’m going to give it an X position of 10, a Y position of 20, give it a width of 100 and a height of 30. Now, I can add this to our mainView by typing mainView.AddSubview(label);. And now we see over here in the right our label has magically appeared.


Much like we did with the main view, we can also modify and tweak our label in real time. I can say, label.TextColor = UIColor.White. Again, we can see the changes like so.


We can even set up things to set up user input. Let’s try adding a UIButton. I’m going to say var button = new UIButton. The constructor for our UIButton, we want to specify what type of button we want. I’m going to say custom. Then, I’m going to say button.SetTitle to tap me. I accidentally hit return while I was typing there so you can see this nice compile error that let’s us know what I did wrong. The second parameter is what UIControlState we want for our button. I can also copy this line and change our title for highlighted and let’s change the title to tapped. So now when I’m over here on the right- oops, that didn’t quite work. Maybe I need to try a different control state. Focused, let’s try that. Oh, you know what? I just realized that I forgot to add my button to the view. One step at a time, right?


We need to specify our frame for the button. Let’s again go with X position of 10, let’s do a Y position of 100, a width of 150 and a height of 30. Now, let’s add it to our main view. Alright. Now, when I tap this, we can see the title changes based on our UIControlState.


What if we want to actually capture and do something like display a prompt when a user taps. We can say button.TouchuUpInside. Then we can use a lambda expression and to our lambda expression is passed a sender as well the various arguments for it. I can say, new UIAlertView(“Prompt”, “Hello, I’ve been tapped”, null, “Ok”). We’ll specify what we want our button to be for our alert. Missed a semicolon. Thank you compiler. Now when I tap, we now get a UIAlertView.


Something else that’s kind of interesting with the Workbooks and Xamarin Inspector is I can see our UI in a 3D mode. I can see how all the different elements are layered upon each other. As you can see, the Xamarin Workbook and Inspector gives us a way to where we can play around in the UI and demonstrate and teach people how we can use UIElements in iOS.