Recently, I was working on an app with Xamarin where I had a long list of colors that the user can pick from. I created a Simple ListView inside my app to display all of the colors in a table. However, this approach presented some unexpected problems such as:
How do I display a preview of the color next to the text label in my ListView Cell?
How do I keep track of what colors are selected by the user?
How to display a checkbox next to a color once it’s selected?
If you have been reading my blog for the last couple weeks, you might have noticed that I have been using Xamarin to develop two mobile applications. When I wrote my initial impressions, I ran into multiple issues with getting the Android SDK to work and I also didn’t know how to use Xamarin Forms, and how to use the build in layouts, such as a StackLayout. Fast Forward a couple of weeks later, I got used to working with Android, working with the layout system and other features. In fact, I originally wrote a quick tutorial on how to use the ListView Control.
As many of you know, I’ve been contracted to create two mobile applications for some local small businesses. One common requirement for both of these applications is that the final product needs to be available on the iOS App Store and the Google Play Store. With this in mind, I figured I would try using Xamarin to create these apps. As I started working on these apps, I documented most of the initial thoughts via an older post on my blog. Since then most my problems have been resolved. However, I did notice it was hard to find good resources on how to build things using Xamarin Forms. I was able to find some old resources via some searches on YouTube, but I was not satisfied with the quality of the content. With this in mind. I wanted to take this opportunity to share what I have learned so far. Like my other Swift tutorials, we are going to start out small and work our way up. Let’s get started!
The ListView is a pretty common control in cross-platform mobile development. In Xamarin Forms, a ListView gets rendered out as a UITableView on iOS and a ListView in Android. You can create a ListView programmatically or you can use XAML. Once you have created your ListView you can access it in your code via its name property. Next, you have to assign an ItemSource to your ListView. In my case, I used a Generic List from the System.Collections.Generic Namespace. From there you populate your list with whatever data is going to be presented to the user. When your List is configured, set your List Object as the ItemSource property of your ListView. If you followed along with this post your app should compile fine and a ListView should show up on your device. If you encountered an error, check your code for errors as needed. Full code samples below. Happy Coding.