Xamarin Forms Make Button fit Grid

Question

I have a grid with only 1 column, and I want my button to fit the size of the grid, I have tried using StackLayout, and Frame, now im trying with Grid, also tried with 1 column and with 1 row, but the result is the same, I'll attach a photo to show what happens:

I need the red buttons to stretch so they fill the width of the device, I have tried with StartAndExpand, Fill and FillAndExpand properties in horizontal options, but they don't work. with Fill and FillAndExpand it works but the button text goes to center, and then theres a bug that everytime I tap a row, the text goes to the left, and stays there unless I scroll the listview down and return top again.

Here's my code:

<ListView x:Name="GroupsList"
                  ItemsSource="{Binding Dishes}"
                  IsGroupingEnabled="True"
                  SeparatorColor="Black"
                  SeparatorVisibility="Default"
                  HasUnevenRows="True">
            <ListView.Behaviors>
                <behaviorsPack:SelectedItemBehavior Command="{Binding BindingContext.SelectedDishCommand, Source={x:Reference DishesPage}}"></behaviorsPack:SelectedItemBehavior>
            </ListView.Behaviors>
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <ViewCell Height="50">
                        <Grid VerticalOptions="FillAndExpand"
                                     BackgroundColor="LightSlateGray">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Button BackgroundColor="DarkRed"
                                    Grid.Column="0"
                                    BorderColor="Transparent"
                                    BorderWidth="0"
                                    Text="{Binding Key}"
                                    TextColor="White"
                                    HorizontalOptions="StartAndExpand"
                                    Command="{Binding BindingContext.SelectGroupHeader, Source={x:Reference DishesPage}}"
                                    CommandParameter="{Binding Key}"
                                    ImageSource="next_disclosure"
                                    ContentLayout="Right"></Button>
                        </Grid>
                    </ViewCell>
            </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ContentView Padding="2, 5, 5, 0">
                            <Frame Padding="2"
                                   HasShadow="False"
                                   BackgroundColor="White">
                                <StackLayout Orientation="Horizontal">
                                    <Label Margin="10"
                                           Text="{Binding Name}"
                                           TextColor="Black"
                                           FontSize="Medium"
                                           HorizontalOptions="StartAndExpand"></Label>
                                </StackLayout>
                            </Frame>
                        </ContentView>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

I hope anyone can help me please.

Have you tried Fill or FillAndExpand? If all you want there is a button, you likely don't even need the grid. — Ben Reierson
this is a ListView, so every header row in the List has its own Grid that is laid out independently. You are not specifying any width or horizontal layout guidelines, so each Grid is just made big enough to fit it's content. — Jason
I have tried fill, fill and expand, and altought the button fits all the content, the text remains in the center, when i need it in the left, also when I click the button, the text goes to the left, and then return to center when i scroll @BenReierson — Arturo Calvo
I have tried without a parent layout, only the button, and i have the same problem @Jason — Arturo Calvo
Buttons always center their text. You could try compositing something using a Label and an Image. Do you want the disclosure icon to be right aligned in every row? — Jason

Leo Zhu - MSFT Leo Zhu - MSFT · Accepted Answer · 2019-10-29T02:46:35

do you mean you want to let the Button fill the width,and the text of the button aligned to the left,if yes,you could custom a Button,and use CustomRenderer to achive it.

custom a Button :

public class ExtendedButton:Button
{
    public static BindableProperty HorizontalTextAlignmentProperty = BindableProperty.Create<ExtendedButton, Xamarin.Forms.TextAlignment>(x => x.HorizontalTextAlignment, Xamarin.Forms.TextAlignment.Center);
    public Xamarin.Forms.TextAlignment HorizontalTextAlignment
    {
        get
        {
            return (Xamarin.Forms.TextAlignment)GetValue(HorizontalTextAlignmentProperty);
        }
        set
        {
            SetValue(HorizontalTextAlignmentProperty, value);
        }
    }
}

then in Android.Project,custom renderer like :

[assembly: ExportRenderer(typeof(ExtendedButton), typeof(ExtendedButtonRenderer))]
namespace App18.Droid
{
  public class ExtendedButtonRenderer : Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer
  {

    public ExtendedButtonRenderer(Context context) : base(context)
    {
    }

    public new ExtendedButton Element
    {
        get
        {
            return (ExtendedButton)base.Element;
        }
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement == null)
        {
            return;
        }

        SetTextAlignment();
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == ExtendedButton.HorizontalTextAlignmentProperty.PropertyName)
        {
            SetTextAlignment();
        }
    }

    public void SetTextAlignment()
    {
        Control.Gravity = Element.HorizontalTextAlignment.ToHorizontalGravityFlags();
    }
}

 public static class AlignmentHelper
 {
    public static GravityFlags ToHorizontalGravityFlags(this Xamarin.Forms.TextAlignment alignment)
    {
        if (alignment == Xamarin.Forms.TextAlignment.Center)
            return GravityFlags.AxisSpecified;
        return alignment == Xamarin.Forms.TextAlignment.End ? GravityFlags.Right|GravityFlags.CenterVertical : GravityFlags.Left|GravityFlags.CenterVertical;
    }
  }
}

finally in your page's axml:

<ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell Height="50">
                    <Grid VerticalOptions="FillAndExpand"
                                 BackgroundColor="LightSlateGray">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <local:ExtendedButton BackgroundColor="DarkRed"
                                Grid.Column="0"
                                BorderColor="Transparent"
                                BorderWidth="0"
                                Text="{Binding Key}"
                                TextColor="White"
                                HorizontalTextAlignment="Start" 
                                HorizontalOptions="FillAndExpand"
                                Command="{Binding BindingContext.SelectGroupHeader, Source={x:Reference DishesPage}}"
                                CommandParameter="{Binding Key}"
                                ImageSource="next_disclosure"
                                ContentLayout="Right"></local:ExtendedButton>
                    </Grid>
                </ViewCell>
        </DataTemplate>
</ListView.GroupHeaderTemplate>

Xamarin Forms Make Button fit Grid

1 Answers