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.

Answer 1

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>