Blurred progress bar when changing scale on Xamarin Android

Question

Changed scale Y=10. In the example I've seen, it grows neatly, but in my case, it became strangely large. Could this be a bug?

Here's a link to what I was referring to.

Ref

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

I have added my example code. Please refer to it.

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

The progress bar was created as a class (CtrlProgressBar) inherited from grid layout, and this is used in combination with other controls in the CtrlBlurProgress class.

Answer 1

Did you try the answer in the link you provided? I have created a new sample to test. Such as:

<ProgressBar HeightRequest="50" ScaleY="2" Progress=".5"/>

The HeightRequest is the Max Height of the progress bar. And the ScaleY can change the thick of the progess bar.

So you can use differerents value of the two properties without the custom renderer to get the effect of the progess bar you want. Such as:

<ProgressBar HeightRequest="50" ScaleY="2" Progress=".5"/>
<ProgressBar HeightRequest="50" ScaleY="5" Progress=".5"/>
<ProgressBar HeightRequest="80" ScaleY="3" Progress=".5"/>