Xamarin Forms 使按钮适合网格

Question

我有一个只有 1 列的网格，我希望我的按钮适合网格的大小，我尝试使用 StackLayout 和 Frame，现在我尝试使用 Grid，也尝试使用 1 列和 1 行，但结果是一样的，我会附上一张照片来说明发生了什么：

我需要红色按钮来拉伸，以便它们填充设备的宽度，我尝试在水平选项中使用 StartAndExpand、Fill 和 FillAndExpand 属性，但它们不起作用。 使用 Fill 和 FillAndExpand 它可以工作，但按钮文本会居中，然后出现一个错误，每次我点击一行时，文本都会向左移动，并保持在那里，除非我向下滚动列表视图并再次返回顶部。

这是我的代码：

<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>

希望有人能帮帮我。

Answer 1

你的意思是你想让按钮填充宽度，并且按钮的文本向左对齐，如果是，你可以自定义一个按钮，并使用 CustomRenderer 来实现它。

自定义一个按钮：

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);
        }
    }
}

然后在 Android.Project 中，自定义渲染器，如：

[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;
    }
  }
}

终于在你页面的 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>