The proper way to do this is described in Chapter 13 of Charles Petzold's excellent book on Xamarin Forms: https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/
My approach to this problem is (different than the book) to use a converter for the image file path. The Button.Image property is a FileImageSource object and it wants a file path. Unfortunately you cannot use embedded resources or a content file in the PCL. You must add an individual image file in each of the iOS, Android and UWP projects. The way I do this is to add the image to the PCL and use linking (option on the add existing file dialog).
So here is my converter approach to the above issue
<Button Image="{Binding Converter={StaticResource FileImageSourceConverter}, ConverterParameter=someImage.png}" />
The static resource...
<ContentPage.Resources>
<ResourceDictionary>
<local:FileImageSourceConverter x:Key="FileImageSourceConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
The converter...
public class FileImageSourceConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string filename = parameter as string;
switch(Device.RuntimePlatform)
{
case Device.iOS:
case Device.Android:
default:
return filename;
case Device.Windows:
return Path.Combine("Images", filename);
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
The advantages of this approach is that (1) your XAML is not cluttered up with OnPlatform elements; (2) you don't need to put your images in the root directory of the UWP project; (3) much simpler than using a custom render to solve the same problem as some have suggested.
