.NET MAUI Progress Barが見た目がよくないので Progress Ringを使ってみた

何でProgress Ring?

MAUIでスマホのアプリを作っていると、どうしても標準じゃないコントロールを使いたくなる
・・・が、MAUIはGUIツールとしてはあんまりその手のコントロールが充実していない
スマホで横一直線に伸びるプログレスバーもダサいよなと思って探してみました

なので自作、は辛いので誰かいいものを作っててくれないかなぁと探したらVisual Studioのnugetに色々あった

nugetにあった

nugetにはいっぱいあった。世の中にはいい人がいっぱいいた。

何を選んだか

MPowerKit.ProgressRing

私が選んだのはMPowerKit.ProgressRingというコントロール。
他にもProgress Ring関連はいっぱいあるのだけど使い方の簡単そうなのを選びました。

GitHub - MPowerKit/ProgressRing: Simple platform agnostic MAUI circular progress bar
Simple platform agnostic MAUI circular progress bar - MPowerKit/ProgressRing
github.com

サンプルに不備あり

不備というほどのものではないが・・・githubのreadmeページのサンプルだと動かない。フォーム中にコントロールを使えるようにするヘッダが書いてないぜ。

とりあえず実装

MainPage.xml

githubのサンプルソースを見てみた。
で作ってみたのがこのメインページ。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pr="clr-namespace:MPowerKit.ProgressRing;assembly=MPowerKit.ProgressRing"    
             x:Class="MauiProgressRingTest.MainPage"
             Title="リングのテスト">
    <ScrollView>
        <StackLayout Orientation="Vertical" VerticalOptions="Start">
            <Label Text="現在値" x:Name="NowValue" HorizontalOptions="Center" VerticalOptions="StartAndExpand" />
            <pr:ProgressRing x:Name="progressRing" 
                            VerticalOptions="StartAndExpand"
                             IsIndeterminate="False"
                             Smooth="True"
                             StrokeLineCap="Round"
                             HeightRequest="200"
                             WidthRequest="100"
                             Thickness="30"
                             Color="Red" />
            <Button Text="スタート!" Clicked="Button_Clicked" />
        </StackLayout>
    </ScrollView>
</ContentPage>

何が追加されかたというと
先頭の「xmlns:pr="clr-namespace:MPowerKit.ProgressRing;assembly=MPowerKit.ProgressRing"」

という部分。readmeにはこれが抜けている。後はラベルとボタンを付けただけ。

MainPage.xaml.cs

そしてボタンを押したらプログスリングを動作するようにした

namespace MauiProgressRingTest
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void Button_Clicked(object sender, EventArgs e)
        {
            progressRing.IsIndeterminate = false;

            for (int i = 0; i <= 100; i++)
            {
                await Task.Delay(50);
                progressRing.Progress = i / 100.0;                  // プログレスリングが進む
                NowValue.Text = progressRing.Progress.ToString();   // 進捗率をラベルに表示
            }
            progressRing.IsIndeterminate = true;
        }
    }
}

難しいことはやっていない。
Task.Delay()は、これを入れないとfor-ループの中で画面が更新されないため。
この辺は、他のクラスを作って更新された進捗率をイベントで上げたら更新するのにBeginInvokeOnMainThread()で書き換えたりと自分のやり方でやる必要がある。

こんなふうになる

進捗率による表示

良い感じじゃないでしょうか

太さを変える

Thicknessというプロパティで太さが変えられます。

比率も変わる

HeightRequestとWidthRequestを比率を変えると(例えば下の例だとHeightRequest=200/WidthRequest=100)ちょっとグニャグニャした感じになる。

つーても、HeightRequestとWidthRequestは他のコントロールでもしょっちゅう使うので設定を間違ったときしかこんなふうにならないかな。

こんなのに何処に需要があるのだと言われそう

最後に

俺がダウンロードしたときはまだ600ダウンロードくらいしかされていないし、他にもProgress Ringはいっぱい公開されている。

人によって、色々こだわりがあると思うので自分の気に入ったのを使ってみてください。
といっても公開日が2017年とかそういうのもあるので・・・それはちょっと・・・って感じ

おしまい

マゼピンの部屋

このブログを検索

このブログを検索