Button with Image Xamarin.Forms

Question

I'm developing a cross pltform app with Xamarin.Forms. I want to make a button with an image but I dont know how to specify the path of the imge. When I use this annotation it works:

<Button Text="Naviga tra i Piani del Museo" Image="foo.png"/>

but when my image is inside some folders (folder1/folder2) the following code doesn't work:

<Button Text="Naviga tra i Piani del Museo" Image="folder1/folder2/foo.png"/>

So how can I correctly specify the path of my image?

Answer 1

You can't nest the images in folders. iOS and Android expect them to be resources, and WP expects them to be in the App's root folder.

The Xamarin Forms docs has a section on working with images.

Answer 2

Keeping the image common using PCL is a difficult task. So do it separately.

Keep in mind that you have to copy the images to Resources>drawable in case of android project.

Answer 3

For using folders for Xamarin.Forms project this is what worked for me.

You need to put your resources (image file in this case), to folder inside Xamarin.Form project (for this example folder is called "Assets") and set Build Action "Content".

Secondly for resources to work with Android you need to put files to Resources>drawable folder inside Android project (here you cannot use any folders), Set Build Action "AndroidResource".

<ContentPage.Resources>
    <ResourceDictionary>
        <OnPlatform x:Key="StartButtonImage" 
                    x:TypeArguments="FileImageSource"
                    Android="button_image.png"
                    WinPhone="Assets\button_image.png"
                    iOS="Assets/button_image.png"/>
    </ResourceDictionary>
</ContentPage.Resources>


<ContentPage.Content>
    <Grid>
        <Button Image="{StaticResource StartButtonImage}" BackgroundColor="Transparent"/>
    </Grid>
</ContentPage.Content>

Pay attention that for iOs you need to make path using "/" and for WinPhone/UWP using "\".

Answer 4

You should specify Image property of button in OnPlatform tag to give different path for each platform. This is the example of Box View, you can try the same for Button Image property.

<BoxView HorizontalOptions="Center">
      <BoxView.Color>
        <OnPlatform x:TypeArguments="Color" 
          iOS="Green" 
          Android="#738182" 
          WinPhone="Accent" />
      </BoxView.Color>
      <BoxView.WidthRequest>
        <OnPlatform x:TypeArguments="x:Double" 
          iOS="30" 
          Android="40" 
          WinPhone="50" />
      </BoxView.WidthRequest>
 </BoxView>