How to use Images in Xamarin.Forms UWP?

Question

I'm currently creating a sample system in Xamarin.Forms UWP. I'm wondering why does my codes to call an image doesn't seem to work properly in the UWP part while it is working in Android. I also want to set an image as a background and an image as a button.

How can I code this so that it will function properly on both platforms?

Here is the code I've used:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="XamarinFormsDemo.Views.LoginPage"
         BackgroundImage="bg3.jpg"
         Title="MainPage">
  <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />

  <StackLayout VerticalOptions="Center"
             Padding="40">
    <Image Source="ebmslogo1.png"/>

    <StackLayout Padding="0,50,0,0">

      <Entry x:Name="txtUserName"
             Placeholder="Username"
             x:Hint="Username"
             BackgroundColor="Black"
             TextColor="White"/>

  <Entry x:Name="txtPassword"
         Placeholder="Password"
         IsPassword="true"
         BackgroundColor="Black"
         TextColor="White"/>

      <Button Text="LOG IN"
          FontSize="14"
         BackgroundColor="Teal"
         Clicked="NavigateButton_OnClicked"/>

    </StackLayout>

  </StackLayout>

</ContentPage>

My images are located in .Droid > Resources > drawable

Answer 1

For Xamarin Forms in UWP the images must in the root project directory (not in Assets) and build action set to Content.

Images will then work as they do in Android and iOS in Xamarin Forms.

Answer 2

For UWP Xamarin forms:

1. Create Folder named "scale-100" in the root then put all your images in it.
2. Specify image name with extension ex: <Image Source="myimage.png"/>

You can also create "scale-xxx" as specified from this Link

Answer 3

Apparently you need to use image in uwp and android so here my solution :

1. Declare image in xaml

<Image x:Name="kitty"/>

2. add a "Resources" folder in pcl project
3. add a "Images" folder in "Resources"
4. paste image and go to image property (rigth click>property)
5. change "build Action" to "Embedded resource (microsoft documentation)
6. add this in you page code :

kitty.Source = ImageSource.FromResource("stackoverflow.Resources.Images.kitty.png", typeof(MainPage).Assembly);

Advantage :

• you can use the same image multiple time and don't need a copy in each project

Disavantage :

• don't know if you can use it in a MVVM project

if you just want to use you uwp project and not another just add a folder to "Assets" and make you xaml source like this

<Image x:Name="kitty" Source="Assets/Images/kitty.png"/>

Answer 4

Create a folder Named Resources in UWP project, put images there with Content as build Action

Then use this MarkupExtension

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamarinFormsMoshCourse.MarkupExtensions
{
    [ContentProperty(nameof(Source))]
    public class PlatformResourceImageExtension : IMarkupExtension
    {
        public string Source { get; set; }

        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (String.IsNullOrWhiteSpace(Source)) return null;

            string imageSource = String.Empty;

            switch (Device.RuntimePlatform)
            {
                case Device.iOS:
                    {
                        imageSource = Source;
                        break;
                    }
                case Device.Android:
                    {
                        imageSource = Source;
                        break;
                    }
                case Device.UWP:
                    {
                        imageSource = String.Concat("Resources/", Source);
                        break;
                    }
            }
            return ImageSource.FromFile(imageSource);
        }
    }
}

add markup extensions foler as xaml namespace and use like this

     <Button ImageSource="{local:PlatformResourceImage clock.png}"/>
        <Image Source="{local:PlatformResourceImage clock.png}"/>

now you can use the same syntax with the same image path on all platforms

Answer 5

You can create a folder and use a Custom Renderer to change path, like this:

[assembly: ExportRenderer(typeof(Image), typeof(CustomImageRenderer))]

public class CustomImageRenderer : ImageRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
    {
        if(e.NewElement != null)
        {
            var source = e.NewElement.Source;
            if(source is FileImageSource fileImageSource)
            {
                fileImageSource.File = $"Assets/{fileImageSource.File}";
            }
        }      
        base.OnElementChanged(e);
    }
}

Answer 6

In UWP you can use

img.Source = new BitmapImage(new Uri("ms-appx:///Assets/Logo.png"));

The images are located in the Assets folder as per the below screenshot