Xaml markup extension not found

Question

In my Xamarin Forms app I am trying to set the source of an Embedded Image in one of my xaml files but when creating the custom namespace I get the error Xamarin.Forms.Xaml.XamlParseException: Position 31:12. MarkupExtension not found for local:ImageResource. I am basing it on the official documentation at https://developer.xamarin.com/guides/xamarin-forms/working-with/images/#Embedded_Images and have also checked out the sample code. My assembly name and default namespace both match that in the xaml file.

I am using Visual Studio 2015 on Windows. I have had someone else to try the code on Xamarin Studio on a Mac and the code works fine and the image displays.

xaml file

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:App;assembly=App"
         x:Class="App.LoginPage">

 <RelativeLayout>

    <Label Text="Logo"
       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.3}" BackgroundColor="Aqua" />

    <StackLayout Spacing="20" Padding="20"
       VerticalOptions="Center"
       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.5}"
       RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
       RelativeLayout.YConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.3}">

      <Entry Placeholder="Username"
         Text="{Binding Username}"/>
      <Entry Placeholder="Password"
         Text="{Binding Password}"
         IsPassword="true"/>
      <Button Text="Login" TextColor="White"
          BackgroundColor="Blue"
          Command="{Binding LoginCommand}"/>

    </StackLayout>

    <Image Source="{local:ImageResource App.logo.png}"
       Aspect="AspectFill"
       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.4}"
       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.15}"
       RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.6}"
       RelativeLayout.YConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.85}" />

 </RelativeLayout>

</ContentPage>

Can anyone help?

Answer 1

Because there is no built-in type converter from string to ResourceImageSource, these types of images cannot be natively loaded by Xaml.

To get around this restriction, a simple custom Xaml markup extension can be written to load images using a Resource ID specified in Xaml.

[ContentProperty ("Source")]
public class ImageResourceExtension : IMarkupExtension
 { 
  public string Source { get; set; }

  public object ProvideValue (IServiceProvider serviceProvider)
 {
   if (Source == null)
   return null;

  // Do your translation lookup here, using whatever method you require
  var imageSource = ImageSource.FromResource(Source);

  return imageSource;
 }
}

To use this extension add a custom xmlns to the Xaml, using the correct namespace and assembly values for the project. The image source can then be set using this syntax: {local:ImageResource WorkingWithImages.beach.jpg}

Source