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.