如何在 xamarin 表单中创建以下类型的自定义进度条

Question

如何开发这种类型的设计（我在下面附上了图片）

Answer 1

据说你指的是条形图，而不是整体布局，但你的问题并不是 100% 清楚。虽然还有其他显示条形的可能性，但我通过在框架中嵌套 AbsoluteLayout 获得了相当令人满意的结果。请参阅以下右侧条形之一的示例

<Frame HasShadow="False" HeightRequest="20" CornerRadius="5" HorizontalOptions="Fill" Padding="0" BackgroundColor="Silver" IsClippedToBounds="True">
    <AbsoluteLayout>
        <ContentView AbsoluteLayout.LayoutFlags="All" 
                     AbsoluteLayout.LayoutBounds="0,0,.33,1" 
                     BackgroundColor="CadetBlue">
            <Label Text="33%" 
                   FontSize="Small" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   TextColor="White" 
                   FontAttributes="Bold" />
        </ContentView>
    </AbsoluteLayout>
</Frame>

条形图本身由 Frame 包裹以获得圆角（参见 CornerRadius 属性）。将 IsClippedToBounds 设置为 true 是必要的，否则 children 将不会被剪裁并且圆角不会显示。

在 Frame 中有 AbsoluteLayout 实际放置的柱。在里面，我添加了 dark-greenish 柱作为 ContentView（为了能够添加带有百分比的标签）。

请查看以下代码以了解 green/red 条之一。基本上是一样的，只是我在绝对布局

里面加了两个sub-bars

<Frame HasShadow="False" HeightRequest="20" CornerRadius="5" HorizontalOptions="Fill" Padding="0" BackgroundColor="Silver" IsClippedToBounds="True">
    <AbsoluteLayout>
        <ContentView AbsoluteLayout.LayoutFlags="All" 
                     AbsoluteLayout.LayoutBounds="0,0,.25,1"
                     BackgroundColor="LimeGreen">
            <Label Text="25%" 
                   FontSize="Small"  
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   TextColor="White" 
                   FontAttributes="Bold" />
        </ContentView>
        <ContentView AbsoluteLayout.LayoutFlags="All" 
                     AbsoluteLayout.LayoutBounds="1,0,.75,1"
                     BackgroundColor="Red">
            <Label Text="75%" 
                   FontSize="Small" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   TextColor="White" 
                   FontAttributes="Bold" />
        </ContentView>
    </AbsoluteLayout>
</Frame>

泛化

提取 re-usable 组件会很有用。我将展示更简单的酒吧。不过，将解决方案转移到更复杂的解决方案应该很容易。

代码隐藏

在后面的代码中必须添加以下属性

public Rectangle FirstBarBounds => new Rectangle(0, 0, BarValue, 1);

public double BarValue
{
    get => this._barValue;
    set
    {
        if (this._barValue == value)
        {
            return;
        }

        this._barValue = value;
        this.OnPropertyChanged();
    }
}

（为 BarValue 添加一个 BindableProperty 也可能有用，但不可否认我太懒了。）

可以从 XAML

绑定属性

<Frame ...>
    <AbsoluteLayout>
        <ContentView AbsoluteLayout.LayoutFlags="All" 
                     AbsoluteLayout.LayoutBounds="{Binding FirstBarBounds}"
                     BackgroundColor="CadetBlue" >
            <Label Text="{Binding FirstBarValue, StringFormat='{}{0:P0}'}" 
                   FontSize="Small" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   TextColor="White" 
                   FontAttributes="Bold" />
        </ContentView>
    </AbsoluteLayout>
</Frame>

ContentView 的 LayoutBounds 绑定到 BarBounds（后者又使用 BarValue 来确定栏的边界）并且文本绑定到BarValue。由于 BarValue 是双精度数，因此该值被 StringFormat='{}{0:P0}'.

格式化为百分比

截图

请查看以下屏幕截图，了解如何在 Android 设备（模拟器）上呈现条形图。

如何在 xamarin 表单中创建以下类型的自定义进度条

How to create below type of custom progress bar in xamarin forms

layout

xaml

progress-bar

xamarin

xamarin.forms

泛化

代码隐藏

截图