Newbie : enable to put an image into a button

I'm very new on Xamarin.

I'm on VS2015, Win10-64, very last Xamarin version. I've a Xamarin Form Portable Project.

In the UWP project, I put a label (runs fine), an image (runs fine), a button (runs fine) and I would like to put an image in the button : problem.

Here's my code :

using Xamarin.Forms;

namespace App3
{
public class App : Application
{
public App()
{
// The root page of your application
var content = new ContentPage
{
Content = new StackLayout
{
Children = {
new Label {
Text = "Welcome to Xamarin Forms!",
},
new Image {
Source = ImageSource.FromResource("App3.test.png"),
},
new Button
{
Text = "Beautiful button",
Image = "App3.test.jpg"
}
}
}
};
MainPage = new NavigationPage(content);
}
}
}

Label is diplayed correctly, image too, button too but : without any image Inside. The image I want to put into is the same I show before.

What am I doing wrong ?

Regards

Christian

Posts

  • JohnDBJohnDB USMember ✭✭
    edited February 2017

    You've created a StackLayout that arranges the controls vertically by default. One solution might be to use a 'layering' trick instead. A good way to do this is to use a Grid layout.

    For example, in xaml you could do something like this (and this is just off the top of my head + I've left out layout options apart from where they are important, for the sake of brevity):

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="image.png" VerticalOptions="Center" />
        <Label Grid.Column="1" Text="Something" VerticalOptions="Center"/>
        <Button Grid.ColumnSpan="2" HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="Transparent"/>
    </Grid>
    

    What this does is place the image in the left column, and a label on the right. The button is then placed over the top of the Image and Label, across both columns and because the button is defined last it's at the top of the z-order and therefore covers the other controls, which is why I make the background transparent.

    If you made this into a re-usable control you could add properties for a command, image and text that you can bind to.

    I hope this helps.

  • weabowweabow FRMember
    edited February 2017

    Thanks a lot.

    Do you mean that a Button can't have any image, and if I need that, I'll have to make my own one ?

    Christian

  • JohnDBJohnDB USMember ✭✭

    No problem, though I may have over complicated things for you somewhat :smile: Button does have an Image property, but it depends on how much control you want I guess. I did something similar to the above because I wanted to use SVG images instead of PNG's, but obviously it depends on your needs. It just demonstrates the flexibility of being able to compose your own layouts if need be.

  • weabowweabow FRMember

    Thanks.

    I used to make my own controls under VB6 and Java. It's not really a problem for me.

    But where I'm surprised is that the Button, with IntelliSense, shows an Image entry. So I've understood that there was a possibility to add an image.

    No problem with that and many thanks to have spent some time for me.

    Christian

Sign In or Register to comment.