CODEWITHSUNDEEP
gridviewxamarin.formsstacklayout
Tiago_nes
Tiago_nes

Reputation: 923

Xamarin Forms buttons got flat inside Grid

Hi i'm trying to implement a bottom button bar without margins but the behaviour was not the expected.

My buttons got flat while in stackLayout they look good but with the margin.

Also you can see that in the first image the "D" image is cut on the bottom, it seems there is a spacing between the scroll view and the buttons, how can i remove it?

What I have

var consultorButtons = new Grid()
{
    VerticalOptions = LayoutOptions.EndAndExpand,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    Margin = new Thickness(0),
    Padding = new Thickness(0),
    RowSpacing = 0,
    ColumnSpacing = 0,

};

consultorButtons.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
consultorButtons.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
consultorButtons.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });

consultorButtons.Children.Add(
    new Button
    {
        Text = "TELEFONAR",
        BackgroundColor = Color.FromHex("#21c9ae"),
        HorizontalOptions = LayoutOptions.FillAndExpand,
        VerticalOptions = LayoutOptions.FillAndExpand,
        Margin = new Thickness(0),
        FontSize = 14
    }, 0, 0);

consultorButtons.Children.Add(
    new Button
    {
        Text = "EMAIL",
        BackgroundColor = Color.FromHex("#272f57"),
        HorizontalOptions = LayoutOptions.FillAndExpand,
        VerticalOptions = LayoutOptions.FillAndExpand,
        TextColor = Color.White,
        Margin = new Thickness(0),
        FontSize = 14
    }, 1, 0);

Grid

Grid

StackLayout

Stack

Upvotes: 2

Views: 198

Answers (2)

MShah
MShah

Reputation: 1267

You can change row height to Auto like this to solve your issue:

consultorButtons.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });

To remove extra space between scroll View and buttons write Spacing="0" in the <StackLayout>, inside which you have placed this two controls.

Hope this may solve your issue.

Upvotes: 3

Bruno Caceiro
Bruno Caceiro

Reputation: 7179

You are not reserving enough space for your Grid. That's why the buttons shrink.

Try to add a specific height to the main grid, since your Child Buttons have the option FillAndExpand.

var consultorButtons = new Grid()
{
    VerticalOptions = LayoutOptions.EndAndExpand,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    Margin = new Thickness(0),
    Padding = new Thickness(0),
    HeightRequest=70, // Have your height request here
    RowSpacing = 0,
    ColumnSpacing = 0,

};

You can also set the RowDefinition to Auto, however, for performance reasons, is not very good, since you are increasing the layout cicle calculations.

Upvotes: 1

Related Questions