如何在Xamarin.Forms（XAML）中使用百分比设置Margin？

嗨，我明白你现在的困扰——直接在XAML里给Margin用5%或者5*都会报错，因为Xamarin.Forms的Margin属性本身并不支持百分比单位，*是Grid布局里用来分配行/列空间权重的，和Margin没关系。下面给你几个可行的解决办法：

方法一：使用值转换器（推荐） #

咱们可以创建一个自定义的IValueConverter，把百分比数值转换成对应父容器宽度/高度的Margin值。

1. 创建转换器类 #

using Xamarin.Forms;

public class PercentToMarginConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        // value是父容器的宽度/高度，parameter是百分比（比如"5"代表5%）
        if (value is double parentSize && double.TryParse(parameter?.ToString(), out double percent))
        {
            double marginValue = parentSize * (percent / 100);
            return new Thickness(marginValue);
        }
        return new Thickness(0);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

2. 在XAML中引用转换器并使用 #

首先在页面的资源里声明转换器：

<ContentPage.Resources>
    <local:PercentToMarginConverter x:Key="PercentToMargin" />
</ContentPage.Resources>

然后修改你的Button的Margin绑定，绑定到父容器的宽度：

<flv:FlowListView x:Name="ParentListView" FlowColumnCount="3" SeparatorVisibility="None" HasUnevenRows="true" 
                  FlowItemTappedCommand="{Binding ItemTappedCommand}" 
                  FlowLastTappedItem="{Binding LastTappedItem}" 
                  FlowItemsSource="{Binding MyCategories}" >
    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate>
            <Button Text="{Binding Name}" TextColor="White" ContentLayout="Top" 
                    BackgroundColor="Transparent" BorderColor="White" BorderWidth="2" 
                    CornerRadius="6"
                    Margin="{Binding Source={x:Reference ParentListView}, Path=Width, Converter={StaticResource PercentToMargin}, ConverterParameter=5}" />
        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>

方法二：后台代码动态计算 #

如果不想用转换器，也可以在页面的SizeChanged事件里动态计算Margin：

1. 给Button设置x:Name #

<Button x:Name="CategoryButton" Text="{Binding Name}" ... />

2. 在后台代码处理 #

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    if (width > 0 && ParentListView != null)
    {
        double marginValue = ParentListView.Width * 0.05; // 5%的宽度
        CategoryButton.Margin = new Thickness(marginValue);
    }
}

不过这种方法如果是列表里的多个Button，可能需要遍历每个Item来设置，不如转换器灵活。

方法三：利用FlowListView的内置间距（替代方案） #

如果你的需求只是让按钮之间有按比例的间距，也可以考虑使用FlowListView的FlowColumnSpacing和FlowRowSpacing属性，直接设置这些间距为父容器宽度的百分比，效果类似Margin：

<flv:FlowListView FlowColumnCount="3" 
                  FlowColumnSpacing="{Binding Source={x:Reference ParentListView}, Path=Width, Converter={StaticResource PercentToMargin}, ConverterParameter=5}"
                  FlowRowSpacing="{Binding Source={x:Reference ParentListView}, Path=Width, Converter={StaticResource PercentToMargin}, ConverterParameter=5}"
                  ... >
    <!-- 模板里的Button可以去掉Margin或者设为0 -->
</flv:FlowListView>

这样就能实现你想要的按百分比设置间距的效果啦～

内容的提问来源于stack exchange，提问作者LOL Jovem