Xamarin Forms Images


Xamarin Forms - MVVM
MVVM Overview
2m 49s

The course is part of this learning path

Start course

This course looks at the Xamarin Forms implementation of the Model-View-ViewModel architecture, paying special attention to data and command binding. We see how to bind view models and nested models to views, and explore notification mechanisms built into the Xamarin Forms core for bi-directional data and view updating. The course also looks at XAML markup extensions and value converters for displaying images within a Xamarin Forms app.

Learning Objectives

Understand the model and view model aspects of MVVM and create an application using the Flyout app template

Intended Audience

This course is designed for anyone interested in enhancing their knowledge of Xamarin, with a focus on MVVM.


To get the most from this course, you should have a basic understanding of interfaces and reflection in the context of C# and .NET.

Source Code


If you've watched the Building a Xamarin Forms UI – Controls course, you might recall adding images to an app where I added them to the Android and iOS projects as resources rather than the Xamarin Forms project. 

"In the case of Android, you add the image as an existing item to the drawable folder under the resources folder, and add the caminilogo image to the iOS asset catalog."

At the time, I did say you could add images to the Forms project, but it involved some coding, so let's see how to do that. Let's start with the image on the navigation bar. I created another folder and namespace called controls, to which I added a content view. Remember, a content view is like a content page in that it uses XAML to define a UI and has code behind it but can be embedded into a content page or another content view. My navigation bar uses a grid layout and an image control with a fully qualified path to the image. However, in front of the image path, we have helpers EmbeddedImage. Helpers point to the helpers' namespace, and EmbeddedImage implements the IMarkupExtension interface. IMarkupExtension enables you to write custom code to add or alter functionality to a view's XAML simply by implementing ProvideValue. In this case, it's almost trivial. We return an image by using the ImageSource method FromResource. Source is the path from the image control. The second parameter is the current assembly, so MVVMFlyout is retrieved in a round-about fashion by getting the assembly to which the EmbeddedImage class belongs.

The menu icons or, more precisely, flyout items are more complex. We can see the controls here in AppShell, where I've replaced the FlyoutItems with a custom control derived from FlyoutItem called FlyoutItemDynamicIcon with a new public bindable member called IconGlyph. The inherited Title property is the text displayed on the Flyout item. When an item has focus, it gets a dark background, and the image is swapped out for a lighter version. The IconGlyph property doesn't relate to a specific image but is the image name up to the underscore. Above FlyoutItemDynamicIcons is the XAML that manages the flyout's color behavior. When an item's state is normal, so not selected, we get a white background, and the text color is set to the static resource primary. We get the dark blue button background when selected, and the label's text color is white. When the flyout is selected, I display a different image by appending dark or light to the image name.


In the interest of not making this example more complicated than necessary, I've assigned the concatenated image path to the FlyoutItemLable's ClassId member. I would not recommend doing this in a production app as ClassId isn't meant for this. The value assigned to ClassId is the IconGlyph and ConverterParameter combined using the iconFocusConverter. IconFocusConverter is a reference to helpers FocusIconConverter defined in the resource dictionary. FocusIconConverter implements the IValueConverter interface, where I've used the string's format method to create the path to the correct image. The convert back method will never be called, hence its arbitrary return value. Once the image's path has been constructed, we need to display it. The image control FlyoutIcon source is retrieved by referencing the ClassId property of FlyoutItemLabel and passing it to another value converter – stringToImage. StringToImage, referenced in the resource dictionary, points to helpers StringToImageSourceConverter, which calls ImageSource's FromResource method to get the image. All the images have their build action set to embedded resource.

About the Author
Learning Paths

Hallam is a software architect with over 20 years experience across a wide range of industries. He began his software career as a  Delphi/Interbase disciple but changed his allegiance to Microsoft with its deep and broad ecosystem. While Hallam has designed and crafted custom software utilizing web, mobile and desktop technologies, good quality reliable data is the key to a successful solution. The challenge of quickly turning data into useful information for digestion by humans and machines has led Hallam to specialize in database design and process automation. Showing customers how leverage new technology to change and improve their business processes is one of the key drivers keeping Hallam coming back to the keyboard. 

Covered Topics