Aligning text and image on Button separately

PeterHaganePeterHagane NOMember
edited May 2016 in Xamarin.Forms

I want my button to look like this:

In an attempt to make this happen, I've used XLabs.forms. In order to combine XLabs' ExtendedButton and ImageButton, I copied their implementation of ExtendedButton into my project and set it to inherit from ImageButton.

This is how it turned out:

So what's happening here is that the control includes my image as specified, but fails to align it separately from the text (Orientation="ImageToRight"). This is probably because of HorizontalContentAlignment, which (correctly) sets the text to "Start":

However, I suspect that even if it did align the image separately from the text, it still wouldn't do what I'd like it to do. I think it would look something like this:


Is there any practical way to make my button look like the first image at all using forms? Some way to create several items within a button, and set the gravity separately for each item? Or is forms too limited for this sort of customisation?

Best Answer

Answers

  • WiktorKonckiWiktorKoncki USMember ✭✭

    Is creating a stack layout with gesture recogniser somehow not fitting for you?

  • PeterHaganePeterHagane NOMember
    edited May 2016

    Alright, cheers guys. I'm able to reproduce the button in the first picture using a stacklayout. There's only two elements inside the layout, so I don't think I need a grid.

    In order to get rounded corners on the stacklayout I copied PhilipOGorman's renderer/xml rectangle > from this thread

    I'm able to add a tap recogniser, with a couple of issues, though. Firstly, the tap recognizer hides the content of the Button, in this case the Label and the Image. My xaml:

    <local:ButtonShadow BorderRadius="17" Padding ="2,2,2,7" Style="{DynamicResource buttonShadowStyle}">
        <local:ButtonStack x:Name="OppgaverStackButton" Style="{DynamicResource buttonStackStyle}">
          <local:ButtonStack.GestureRecognizers>
            <TapGestureRecognizer Tapped="Oppgaver_OnTap">
            <Label Text="Finn oppgaveforslag" Style="{DynamicResource buttonLabelStyle}"/>
            <Image Source="ArrowBlackLeft.png"  Style="{DynamicResource buttonImageStyle}"/>
            </TapGestureRecognizer>
          </local:ButtonStack.GestureRecognizers>
        </local:ButtonStack>
      </local:ButtonShadow>
    

    So right now the button can be clicked, but it's just white. EDIT: Fixed this by rearranging the tags like this:

    <local:ButtonShadow BorderRadius="17" Padding ="2,2,2,7" Style="{DynamicResource buttonShadowStyle}">
        <local:ButtonStack x:Name="OppgaverStackButton" Style="{DynamicResource buttonStackStyle}">
          <local:ButtonStack.GestureRecognizers>
            <TapGestureRecognizer Tapped="Oppgaver_OnTap">
            </TapGestureRecognizer>
          </local:ButtonStack.GestureRecognizers>
            <Label Text="Finn oppgaveforslag" Style="{DynamicResource buttonLabelStyle}"/>
            <Image Source="ArrowBlackLeft.png"  Style="{DynamicResource buttonImageStyle}"/>
        </local:ButtonStack>
      </local:ButtonShadow>
    

    Secondly, I'd like to replicate the pressed behaviour of the Button if possible. Right now, the rounded white rectangle background of my ButtonStack is rendered from .Droid/Resources/Drawable/WhiteRoundedRectangle.xml. In order to change it to a darker shade when pressed, I think I'd have to re-render the button with a GreyRoundedRectangle instead.

    Is this doable?

  • PeterHaganePeterHagane NOMember

    In this thread Adam Kemp says:

    @adamkemp said:
    If you use a custom view renderer then you can get a View instance.

    I reckon I'd have to do the same thing here in order to actively change the rendered source for the background from the comfort of my forms PCL... right? Or am I way off?

  • PeterHaganePeterHagane NOMember

    I'll put the button activated mode to the side for now, I can't afford to spend more time than necessary on it. I'll update if I figure it out.

  • DhruvKanojiaDhruvKanojia USMember ✭✭

    Update, if any one stumbles upon this thread. There's a functionality now to handle where this mage goes in your Xamarin Forms Buttons.

    Documentation : https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.button.buttoncontentlayout.imageposition?view=xamarin-forms

    Implementation : https://stackoverflow.com/a/40591579/2408212

Sign In or Register to comment.