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.

Posts

  • JohnHardmanJohnHardman mod 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 mod 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 mod 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 mod 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 mod 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 mod 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 ✭✭✭✭✭
  • 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 mod 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 mod 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.