Xamarin Android中ProgressBar调整ScaleY后模糊且尺寸异常问题咨询

在Xamarin Android环境下，给ProgressBar设置ScaleY="10"后，控件并未像预期那样正常缩放，反而出现模糊、尺寸异常偏大的情况。请问这属于框架Bug吗？

自定义控件代码 #

CtrlBlurProgress的XAML代码

<ContentView
    x:Class="POP.Controls.CtrlBlurProgress"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:Lang="clr-namespace:KLAB.Localizations.Words;assembly=Localizations"
    xmlns:controls="clr-namespace:POP.Controls"
    xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
    xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
    BackgroundColor="{StaticResource ColorBackBlur}">


    <StackLayout
        Grid.Row="0"
        Grid.Column="0"
        Margin="10,0,10,0"
        HorizontalOptions="FillAndExpand"
        Orientation="Vertical"
        VerticalOptions="FillAndExpand">

        <Label x:Name="xTitle"
            FontAttributes="Bold"
            FontSize="45"
            HorizontalOptions="FillAndExpand"
            HorizontalTextAlignment="Center"
            Text="테스트 중"
            TextColor="{StaticResource ColorText111}"
            VerticalOptions="EndAndExpand"
            VerticalTextAlignment="Center" />

        <controls:CtrlProgressBar x:Name="xPrgs"
            Margin="20,0,20,0"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="EndAndExpand" />

        <controls:CtrlButton
            Grid.Row="0"
            Grid.Column="1"
            Margin="0,0,10,10"
            Clicked="CtrlButton_Clicked"
            HeightRequest="80"
            HorizontalOptions="End"
            Text="{x:Static Lang:General.Cancel}"
            WidthRequest="300" />

    </StackLayout>
</ContentView>

CtrlProgressBar的XAML代码

<Grid
    x:Class="POP.Controls.CtrlProgressBar"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>


    <ProgressBar x:Name="xPrg"
        Grid.Row="0"
        Grid.Column="0"
        Margin="10,0,0,10"
        HorizontalOptions="FillAndExpand"
        Progress="0.8"
        ProgressColor="{StaticResource ColorBack008}"
        ScaleY="15"
        VerticalOptions="FillAndExpand" />

    <Label x:Name="xTxtPercent"
        Grid.Row="0"
        Grid.Column="0"
        FontSize="40"
        HorizontalTextAlignment="Center"
        Text="0 %"
        TextColor="White"
        VerticalTextAlignment="Center" />
</Grid>

问题分析与结论 #

这不属于Xamarin框架的Bug，核心原因有两点：

• ScaleY的本质限制：Scale属性是对控件像素进行拉伸，而非调整控件的固有布局尺寸。大比例拉伸会让原始像素被放大，导致模糊；同时拉伸后的控件会突破原有布局约束，造成尺寸异常偏大。
• 布局嵌套的叠加影响：你的ProgressBar嵌套在设为Height="*"的Grid行中，且ProgressBar自身设置了VerticalOptions="FillAndExpand"，这会让Grid先占据尽可能多的垂直空间，再加上ScaleY的拉伸，进一步加剧了尺寸问题。

正确调整ProgressBar高度的方法 #

放弃使用ScaleY，改用以下两种方式：

1. 自定义渲染器+HeightRequest
   在XAML中给ProgressBar设置HeightRequest="20"，然后针对Android平台创建自定义渲染器调整原生控件高度：

   [assembly: ExportRenderer(typeof(ProgressBar), typeof(CustomProgressBarRenderer))]
   namespace POP.Droid.Renderers
   {
       public class CustomProgressBarRenderer : ProgressBarRenderer
       {
           public CustomProgressBarRenderer(Context context) : base(context) { }
   
           protected override void OnElementChanged(ElementChangedEventArgs<ProgressBar> e)
           {
               base.OnElementChanged(e);
               if (Control != null)
               {
                   Control.SetScaleY(1f);
                   Control.LayoutParameters.Height = (int)Element.HeightRequest;
                   Control.SetMinimumHeight((int)Element.HeightRequest);
               }
           }
       }
   }
   

2. 优化布局结构
   修改CtrlProgressBar的Grid行高为固定值，同时调整ProgressBar的垂直布局选项：

   <Grid.RowDefinitions>
       <RowDefinition Height="20" />
   </Grid.RowDefinitions>
   
   <ProgressBar x:Name="xPrg"
       ...
       ScaleY="1"
       VerticalOptions="Center" />
   

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