Forum Xamarin.Forms

Button.Image with OnPlatform tag

Alex19Alex19 UAMember ✭✭

Hi! How I can set image in button with used OnPlatform tag?(xaml)

Posts

  • NMackayNMackay GBInsider, University admin

    @Alex19

    This should do the trick

                         <Image
                                  Grid.Column="0"
                                  Grid.Row="0"
                                  Grid.RowSpan="2">
                              <Image.Source>
                                <OnPlatform x:TypeArguments="ImageSource"
                                            iOS="IndicatoriOS"
                                            Android="IndicatorAndroid" />
                              </Image.Source>
                            </Image>
    

    If you have the image as a resource in iOS or in your Drawable in android you could just use the XAML below instead.

                            <Image
                                  Source="Indicator"
                                  Grid.Column="0"
                                  Grid.Row="0"
                                  Grid.RowSpan="2" />
    
  • Alex19Alex19 UAMember ✭✭

    Thanks. But how to use this image like a button or put it into the button. And is it possible to set onclick for image?

  • NMackayNMackay GBInsider, University admin

    @Alex19

    I'm not sure what your trying to achieve but word of warning, image support for the button is currently all over the page.

    I have an image toggle control that you can set an image on tap and bind to command and it animates the touch etc, you might want to try that approach.

  • KevinLeKevinLe USMember

    This is my findings:

    The following

    <Button HorizontalOptions="End" VerticalOptions="Center">
        <Button.Image>
            <OnPlatform x:TypeArguments="ImageSource"
                iOS="iosImage.png"
                Android="androidImage.png" />
        </Button.Image>
    </Button>
    

    doesn't work

    The following doesn't work either

    <Button HorizontalOptions="End" VerticalOptions="Center">
        <Button.Image>
            <OnPlatform x:TypeArguments="x:String"
                iOS="iosImage.png"
                Android="androidImage.png" />
        </Button.Image>
    </Button>
    

    And of course, the following doesn't work either

    <ResourceDictionary>
        <OnPlatform x:Key="MyImage" x:TypeArguments="ImageSource">
            <OnPlatform.iOS>iosImage.png</OnPlatform.iOS>
            <OnPlatform.Android>androidImage.png</OnPlatform.Android>
            <OnPlatform.WinPhone>wpImage.png</OnPlatform.WinPhone>
         </OnPlatform>
    </ResourceDictionary>
    
    <Button HorizontalOptions="End" VerticalOptions="Center" Image="{StaticResource MyImage}" />
    

    You have 2 choices:

    Rename image to "commonImage.png" (or something like that) and use the following code

    <!-- rename image -->
    <Button HorizontalOptions="End" VerticalOptions="Center" Image="commonImage.png" />
    

    which involves the least work or

    Do something like nMackay says. I have also written something like that:
    https://medium.com/@kevinle/buttons-with-image-and-stacklayout-in-xamarin-forms-apps-cc35c452f123#.mog3n2zfx

  • AdrnHAdrnH USMember ✭✭
    edited November 2016

    This works for me:

    <Button> <Button.Image> <OnPlatform x:TypeArguments="FileImageSource" Android="icon.png" iOS="icon.png" /> </Button.Image> </Button>

  • AtiqAtiq USMember ✭✭

    For Button image we should use FileImageSource. As Button.Image expect FileImageSource

    <Button Text="SomeButton"> <Button.Image> <OnPlatform x:TypeArguments="FileImageSource" iOS="xyz.png" Android="abc.png" WinPhone="pqr.png" /> </Button.Image> </Button>

Sign In or Register to comment.