如何在Xamarin Forms中自定义AsNum.XFControls评分栏尺寸

我之前也踩过这个AsNum.XFControls评分栏尺寸不好控制的坑，直接设置WidthRequest确实经常不生效——因为这个控件内部是按默认星星大小+数量自动计算整体宽度的，会忽略外部的宽度设置。给你几个亲测有效的解决办法：

方法一：自定义星星模板（最推荐） #

直接替换默认的星星样式，自己控制每个星星的大小，这样整个评分栏的尺寸就完全由你说了算。

示例代码：

<Rating:RatingBar BackgroundColor="SeaGreen" 
                  StarCount="5" 
                  Step="0.5" 
                  SelectedColor="Orange" 
                  HeightRequest="40" 
                  HorizontalOptions="Fill" 
                  UnSelectedColor="LightGray" 
                  Rate="{Binding Rating,Mode=TwoWay}">
    <!-- 自定义星星模板 -->
    <Rating:RatingBar.StarTemplate>
        <DataTemplate>
            <!-- 用Image控件自定义星星，设置你想要的尺寸 -->
            <Image WidthRequest="24" 
                   HeightRequest="24"
                   Source="{Binding IsSelected, 
                           Converter={StaticResource BoolToImageConverter}, 
                           ConverterParameter='star_filled.png,star_empty.png'}" />
            <!-- 也可以用字体图标（比如FontAwesome），更灵活 -->
            <!-- <Label FontFamily="FontAwesome" 
                   FontSize="24"
                   Text="&#xf005;"
                   TextColor="{Binding IsSelected, 
                               Converter={StaticResource BoolToColorConverter}, 
                               ConverterParameter='Orange,LightGray'}" /> -->
        </DataTemplate>
    </Rating:RatingBar.StarTemplate>
</Rating:RatingBar>

注：如果用转换器的话，需要自己实现BoolToImageConverter或者BoolToColorConverter，用来根据IsSelected状态切换图片或颜色。这个方法的好处是完全可控，不会出现布局错位的问题。

方法二：用Scale属性快速缩放 #

如果只是临时调整尺寸，不想写太多代码，可以直接给评分栏设置Scale属性，按比例缩小整个控件：

示例代码：

<Rating:RatingBar BackgroundColor="SeaGreen" 
                  StarCount="5" 
                  Step="0.5" 
                  SelectedColor="Orange" 
                  HeightRequest="40" 
                  HorizontalOptions="Fill" 
                  UnSelectedColor="LightGray" 
                  Rate="{Binding Rating,Mode=TwoWay}"
                  Scale="0.8"> <!-- 缩放比例，0.8就是缩小到原尺寸的80% -->
</Rating:RatingBar>

这个方法简单粗暴，但要注意缩放后可能会影响控件的对齐，需要配合HorizontalOptions和VerticalOptions调整位置。

方法三：修改控件源码（进阶） #

如果上面的方法都不满足需求，你可以找到AsNum.XFControls的源码，修改RatingBar控件的测量逻辑，让它优先使用外部设置的WidthRequest。

找到RatingBar类的MeasureOverride方法，修改成这样：

protected override SizeRequest MeasureOverride(double widthConstraint, double heightConstraint)
{
    // 优先使用外部设置的WidthRequest和HeightRequest
    var desiredWidth = WidthRequest > 0 ? WidthRequest : base.MeasureOverride(widthConstraint, heightConstraint).Request.Width;
    var desiredHeight = HeightRequest > 0 ? HeightRequest : base.MeasureOverride(widthConstraint, heightConstraint).Request.Height;
    return new SizeRequest(new Size(desiredWidth, desiredHeight));
}

修改后重新编译控件，这样外部设置的WidthRequest就会生效了。不过这个方法需要你能获取到控件的源码，适合有一定自定义控件经验的开发者。

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