Xamarin自定义ProgressBar布局调整及ProgressTo调用失效问题咨询

我此前咨询过Xamarin自定义ProgressBar的相关问题，本次实现未使用Syncfusion组件，当前的实现代码如下：

<StackLayout Padding="12,0" Margin="0,0,0,35">
    <Grid HorizontalOptions="FillAndExpand" BackgroundColor="#fff" Padding="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="0" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="0 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="Red"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="0" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="10%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="1" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="10 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="1" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="11%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="2" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="200 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="2" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="3" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="300 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="3" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="3" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="4" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="400 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="4" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="4" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
        <!--group-->
        <Grid Grid.Row="0" Grid.Column="5" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="500 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
        </Grid>
        <Grid Grid.Row="1" Grid.Column="5" HorizontalOptions="Center" VerticalOptions="Center">
            <Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="5" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
        </Grid>
        <!--end group-->
    </Grid>

    <ProgressBar Margin="35,-37.5,35,0" ProgressColor="#ddd" HeightRequest="3" HorizontalOptions="FillAndExpand" x:Name="progressbar"/>
</StackLayout>

实现效果见下图：

现有两个问题需要解决：

• 如何调整布局让ProgressBar显示在截图中圈出的红色圆点下方？
• 在.xaml.cs文件中调用ProgressTo方法设置进度条不生效，写法如下，该如何修复？

private async void Progress()
{
    progressbar.Progress = 10000;
    float progress = 2000;
    await progressbar.ProgressTo(progress, 500, Easing.Linear);
}

解决方案 #

1. 调整ProgressBar位置到圆点下方 #

你目前用负Margin硬拉位置的方式适配性很差，直接把ProgressBar放到外层Grid的圆点所在行、跨所有列即可，修改后的布局代码如下：

<Grid Padding="12,0" Margin="0,0,0,35" BackgroundColor="#fff">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!--group 0-->
    <Label Grid.Row="0" Grid.Column="0" Margin="0,0,0,-2" HorizontalOptions="Center" FontSize="12" Text="0 K" />
    <Frame Grid.Row="1" Grid.Column="0" HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="Red"/>
    <Label Grid.Row="2" Grid.Column="0" Margin="0,-2,0,0" HorizontalOptions="Center" TextColor="Red" FontSize="13" Text="10%" />
    <!--group 1-->
    <Label Grid.Row="0" Grid.Column="1" Margin="0,0,0,-2" HorizontalOptions="Center" FontSize="12" Text="10 K" />
    <Frame Grid.Row="1" Grid.Column="1" HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"/>
    <Label Grid.Row="2" Grid.Column="1" Margin="0,-2,0,0" HorizontalOptions="Center" TextColor="Red" FontSize="13" Text="11%" />
    <!--group 2-->
    <Label Grid.Row="0" Grid.Column="2" Margin="0,0,0,-2" HorizontalOptions="Center" FontSize="12" Text="200 K" />
    <Frame Grid.Row="1" Grid.Column="2" HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"/>
    <Label Grid.Row="2" Grid.Column="2" Margin="0,-2,0,0" HorizontalOptions="Center" TextColor="Red" FontSize="13" Text="12%" />
    <!--group 3-->
    <Label Grid.Row="0" Grid.Column="3" Margin="0,0,0,-2" HorizontalOptions="Center" FontSize="12" Text="300 K" />
    <Frame Grid.Row="1" Grid.Column="3" HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"/>
    <Label Grid.Row="2" Grid.Column="3" Margin="0,-2,0,0" HorizontalOptions="Center" TextColor="Red" FontSize="13" Text="12%" />
    <!--group 4-->
    <Label Grid.Row="0" Grid.Column="4" Margin="0,0,0,-2" HorizontalOptions="Center" FontSize="12" Text="400 K" />
    <Frame Grid.Row="1" Grid.Column="4" HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"/>
    <Label Grid.Row="2" Grid.Column="4" Margin="0,-2,0,0" HorizontalOptions="Center" TextColor="Red" FontSize="13" Text="12%" />
    <!--group 5-->
    <Label Grid.Row="0" Grid.Column="5" Margin="0,0,0,-2" HorizontalOptions="Center" FontSize="12" Text="500 K" />
    <Frame Grid.Row="1" Grid.Column="5" HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"/>
    <Label Grid.Row="2" Grid.Column="5" Margin="0,-2,0,0" HorizontalOptions="Center" TextColor="Red" FontSize="13" Text="12%" />
    <!-- ProgressBar放在圆点所在行，跨6列，自然对齐圆点下方 -->
    <ProgressBar Grid.Row="1" Grid.ColumnSpan="6" Margin="35,0,35,0" ProgressColor="#ddd" HeightRequest="3" HorizontalOptions="FillAndExpand" x:Name="progressbar"/>
</Grid>

修改后不需要负Margin调整位置，不同分辨率下也不会出现错位问题。

2. 修复ProgressTo不生效问题 #

Xamarin的ProgressBar的Progress属性取值范围为0到1的浮点数，你直接传入10000、2000这类远大于1的数值，系统会自动截断为1，因此看不到进度变化。需要先将业务数值换算为0-1的比例再赋值，示例代码如下：

private async void Progress()
{
    // 此处最大值对应你进度条的上限500K=500000，可根据业务需求修改
    double maxValue = 500000;
    // 初始进度换算为比例
    progressbar.Progress = 10000 / maxValue;
    // 目标进度换算为比例
    double targetProgress = 2000 / maxValue;
    await progressbar.ProgressTo(targetProgress, 500, Easing.Linear);
}

内容的提问来源于stack exchange，提问作者Chim Di Tru