›

Multiple Horizontal Buttons

Laura83Laura83 USMember ✭✭
edited June 2016 in Xamarin.Forms

Hi guys. I need to place 4 buttons in horizontal orientation, but I can't show all of them, why?

I attach an image.

Tagged:

Posts

  • JohnHardmanJohnHardman GBUniversity mod

    @Laura83 - can you post your code?

  • Laura83Laura83 USMember ✭✭

    I tried but I don't know why it doesn't appear.
    I attach also the code -_-

  • JohnHardmanJohnHardman GBUniversity mod
    edited June 2016

    @Laura38 - I'd be tempted to specify a background color so that you can see the actual size of the buttons. If they are far bigger than are required for the contained images, consider using WidthRequest, or contain them in a Grid rather than StackLayout. If you want the four buttons evenly spaced across the page, Grid is probably more appropriate.

    Also, what is the StackLayout contained in? Could it be that the StackLayout has a Width greater than the screen?

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Try setting StackLayout.Spacing (or Space... I don't remember)

    Scale property scale only the image, not the button size. I usually use a Image with a TapGestureRecognizer...

  • Laura83Laura83 USMember ✭✭
    edited June 2016

    @JohnHardman thank you so much for your reply.
    I follow your suggestion and as you can see the buttons are small. There's something a padding/margin between them or what?
    The StackLayout is contained in another one (without specified properties) and finally in the contentpage.

  • JohnHardmanJohnHardman GBUniversity mod

    @laura83 - Interesting. I'd try Spacing = 0 and Padding = 0, and remove the AndExpand off the containing StackLayout, as part of investigation

  • Laura83Laura83 USMember ✭✭

    Thank you @JohnHardman and @AlessandroCaliaro
    As you can suggest, I set spacing and padding at 0, specified Center instead CenterAndExpand and I can see the last button but not completely. It seems to be in a larger container that I don't know.
    I also valuate to use an Image with TapGestureRecognizer

  • JohnHardmanJohnHardman GBUniversity mod

    @Laura83 - we'd need to see more of the code to identify exactly what is going on.

    However, if you are after evenly spaced buttons, I would suggest using a 4x1 Grid rather than StackLayout.

    I would stick with something that has Button behaviors, even if you don't use ImageButton, rather than using an Image with TapGestureRecognizer. If you use Image with TapGestureRecognizer, any users with physical keyboards, or who use particular accessibility software, may not be able to tap the images. I use an implementation based on a content button for this. The code that I originally based mine on can be found at https://mega.nz/#!sd5XiRbT!70f-0VOqlwh_eIhwolktKeswbZPM9pLmRhYiMjkl0Ms

  • Laura83Laura83 USMember ✭✭

    All I written is (see attach image and otherwise... why my text code isn't visible on the forum?)
    image

    I after used grid instead stacklayout and the result doesn't totally satisfactory image

  • JohnHardmanJohnHardman GBUniversity mod
    edited June 2016

    @laura83 - the XAML doesn't always appear (nor does generic C#) as the Markdown stuff interprets chevrons in a particular way.

    Are your images always the same size? If so, use WidthRequest on the buttons. I wouldn't personally use Scale for this. I use WidthRequest=60 and HeightRequest=44 for buttons that I use in a similar way.

    For sake of completeness, set Margin=0 as well

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    I have done this test

    with this code

    ContentPage cp = new ContentPage ();
StackLayout sl = new StackLayout ();
sl.Orientation = StackOrientation.Horizontal;

Button b1 = new Button ();
b1.Image = "icon.png";
b1.VerticalOptions = LayoutOptions.Start;

Button b2 = new Button ();
b2.Image = "icon.png";
b2.VerticalOptions = LayoutOptions.Start;

Button b3 = new Button ();
b3.Image = "icon.png";
b3.VerticalOptions = LayoutOptions.Start;

Button b4 = new Button ();
b4.Image = "icon.png";
b4.VerticalOptions = LayoutOptions.Start;

sl.Children.Add (b1);
sl.Children.Add (b2);
sl.Children.Add (b3);
sl.Children.Add (b4);

cp.Content = sl;

MainPage = cp;
  • Laura83Laura83 USMember ✭✭

    @JohnHardman there is no Margin property. @AlessandroCaliaro I can't see your attach image but anyway, I'll try your code and still not work as I want.

  • JohnHardmanJohnHardman GBUniversity mod

    @laura83 - What version of Xamarin.Forms are you using? The latest stable release has a Margin property on Buttons.

  • Laura83Laura83 USMember ✭✭

    4.0

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    this is the image

    https://www.dropbox.com/s/m6f7zf3a8o77ho8/Screenshot 2016-06-16 18.55.48.png?dl=0

    it seems good

  • Laura83Laura83 USMember ✭✭

    I don't know why but on my screen isn't the same.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    We are speaking of Android?....

  • Laura83Laura83 USMember ✭✭

    yep

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    what do you see with my code?

  • JohnHardmanJohnHardman GBUniversity mod

    @laura83 - just to clarify, what version of the Xamarin.Forms NuGet package have you got installed? The latest stable version has just gone up from 2.2.0.45 to 2.3.0.49, but if you don't have a Margin property you are using something older than 2.2.0.45

  • Laura83Laura83 USMember ✭✭
    edited June 2016

    @JohnHardman right, I'm using 2.2.0.31 -_-"
    @AlessandroCaliaro Cleaning and build again, it works! THANKS! XD what was the problem??

  • Laura83Laura83 USMember ✭✭

    @AlessandroCaliaro wait a moment: the problem persists if I use a smaller screen, obviously... -_-

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @Laura83 said:
    4.0

    last XF is 2.2....

  • JohnHardmanJohnHardman GBUniversity mod

    @AlessandroCaliaro - the 4.0 @laura83 mentioned is presumably the version of Xamarin for Visual Studio. @laura83 is using 2.2.0.31 of Xamarin.Forms. They are on different release cycles I think.

  • mittal_sajanmittal_sajan Member ✭✭

    Use Grid with one row and four columns

  • MikilllMikilll Member ✭✭✭

    Got the same problem. On Android there is ALWAYS a little padding (spacing) between multiple horizontal buttons. Using grid instead of stackLayout does not help at all.

Sign In or Register to comment.