Let's head over to Visual Studio's native environment, a Windows PC, and do the same, but this time run the app. I'll start by downloading Visual Studio community for Windows and installing it. It's a similar process as we saw on the Mac with an installer program, but there are many more features in the Windows environment. I'll install ASP.NET web development, Azure development, mobile development with .NET, and .NET desktop development. Mobile development with .NET contains the Xamarin libraries. The installation at 25 ½ GB will take a while, so I'll come back to it when it's finished. Okay, that's done; I'm going to sign in to Visual Studio because I do have an account, but you don't have to. This version of the new project wizard is different from the Mac version as there are many more options to accommodate. I'll filter the selection using C# as the language, all platforms, and a mobile project type. There we have our Xamarin forms mobile selection. I call this iosdroid as well and select the fly out app template. We have a firewall alert because the Xamarin components of Visual Studio will need to communicate with phone and tablet simulators. In particular, the iOS project will need to talk to either an iOS device or a Mac running the iOS simulator. You'll notice that Android projects use an emulator and iOS projects use a simulator. From a developer's perspective, the difference is negligible. An emulator is an exact facsimile of the hardware and software environment, while a simulator mimics the environments. To quote Shakespeare, "a rose by any other name would smell as sweet," so let's not get hung up on the differences at this stage.

On the right, we've got the solution explorer with the Xamarin, Android, and iOS projects. Let's see how the platform-specific projects are glued together with the cross-platform Xamarin.Forms app. MainActivity is the entry or start point of the Android app. Yes, I will accept the Android SDK license terms and allow the appropriate access. Let's check out the project's properties by right-clicking on the project in the solution explorer and selecting properties. Iosdroid.Droid is the Android project's namespace, and we are currently targeting the latest version of Android as of February 2022 – version 12 called snow cone. Under the project's references, we can see a reference to the Xamarin forms project, iosdroid. This allows the Android project to call the Xamarin Form's App constructor. We can right-click on App() and select "Go To Definition," which opens App.xaml.cs and highlights the constructor.

The iOS project also references the Xamarin forms project, not to state the obvious. As you'd expect, the iOS-specific project has quite a different structure. The main.cs file has a more traditional look, as you would see in a C program, with a static void main function accepting an array of strings as its only argument. There is no reference to the Xamarin forms app class here, but if I look at the AppDelegate class in AppDelegate.cs, we can see a reference to it in the load application function call. Once again, right-clicking on App() takes us back to the Xamarin forms App() class.

In the app constructor, we create a new AppShell and assign it to a variable called MainPage, which is of the type Page, defined in Xamarin.forms.core, so part of the Xamarin Forms framework. Looking at the AppShell class constructor with the calls to RegisterRoute, as well as the iosdroid project in solution explorer, we can see that it is a Model-View-ViewModel structure. Using Model-View-ViewModel or Model View Controller patterns is not a prerequisite in Xamarin but best practice. Nothing is stopping you from writing your whole app as one function using goto statements if, for some reason, you thought that was most appropriate to your situation. Just for the record, in no way am I advocating doing that. The AppShell.xaml file defines graphical styles and elements used within the application. We'll take a quick look at a simple page like LoginPage.xaml before running the app in debug mode. LoginPage consists of a stack layout containing a button. The command attribute binds the button to the LoginCommand function. As per the Model-View-ViewModel pattern, the login command is not in the view but the view model. The button binds to the LoginViewModel public member LoginCommand.

Let's run the app in debug mode. Because the Android app is the solutions default project, Visual Studio's run button is set to Android emulator. I haven't configured a device for the emulator yet so let's do that through the android device manager. For the sake of brevity, I'll go with the default of Pixel 5 using API 30. More license terms and conditions to accept. Now that has finished downloading and installing, let's start the Pixel 5 simulator. Ah, the simulator uses Hyper-V for optimal performance, so I will go ahead and enable that. If you have never used Hyper-V before, Microsoft's hypervisor, you can enable it through Windows features under programs and features found in the Control Panel. I'm running this demo within a Windows 10 Hyper-V virtual machine, so I'll have to run the PowerShell command set VM processor with the expose virtualization extensions parameter set to true on the host to enable nested virtualization. Either way, enabling Hyper-V requires a restart of the machine. Okay, with all that infrastructure admin taken care of, let's fire up our Pixel 5 simulator. Now that it is running, we can see the run button in Visual Studio has changed to the simulator's name. Clicking Visual Studio's run button brings the simulator to the foreground and loads the app. 

We start on the about page, but we can use the hamburger menu on the top left to open the browse page. This presents us with a list of dummy items retrieved from a mocked database within the app. 

One of the ironic aspects of Visual Studio when it comes to Xamarin development is that we lack a visual form design experience. If you are creating a Windows form application or a WPF app, which also uses xaml to define the graphical interface, you can drag and drop controls onto the design surface. This has been a bit of a bugbear in the past, but Microsoft has come up with a hot reload solution. Hot reload is ideal, as it lets you see the form design on the target platform. I can go into the items page and add a font attribute of bold to the item's title, and almost instantly, it is updated on the device. I'll change the button's color on the login page, and again we can see the hot reload in action.

Now let's run the iOS app. This will be more complicated as the iOS simulator needs to run on macOS. First, we need to connect the Visual Studio IDE to Xcode on the Mac. Go to the Tools menu, then iOS, and select Pair to Mac. If your Mac doesn't appear in the list, you can use its IP address. Click connect and login. The Visual Studio connection wizard will check the Xamarin and Xcode library versions for compatibility with your PC environment. If there are compatibility issues, you can update the Mac remotely from here. I'll set iosdroid.iOS as the startup project, which changes Any CPU to iPhone and Android to iOS in the debug selection dropdowns. I'm using simulators for android and iOS, but you can use actual devices plugged into your computer via USB cable for both platforms. In the case of android, you'll need to go into the device's settings and switch to developer mode so the app you are debugging can be sideloaded via the cable. Things are a little bit more complicated for an iOS device. You will need an Apple developer account, and iTunes loaded. This applies to both a PC and Mac. Unless you have an iOS device connected in debug mode, you need to change iPhone to iPhoneSimulator. This change will pick up the device set up as the simulator on your Mac as the debug device to run. 

The iOS simulator launches on the Mac and is mirrored on the PC. If you just bear with me for a moment, I'll attempt to get them both onscreen at once. That looks okay. We can see the hot load functionality works nicely with iOS. However, there is a small lag, which is to be expected and slightly exaggerated as I have the simulators running on virtual machines. The hot reload functionality still works nicely with the simulators running on the Mac and Windows.