スキップしてメイン コンテンツに移動

.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年とかそういうのもあるので・・・それはちょっと・・・って感じ

おしまい




ラベル:

コメント

コメントを投稿

このブログの人気の投稿

ImDiskの後継アプリのAIM toolkitを試してみた

ImDiskの開発辞めちゃったらしい というわけで、じゃあ後継ソフトはあるのかと思ったらあった 遅いと言われているけど・・・ とインストールしてみた ImDiskのこの間の結果はこちら 再びRAM DISK(ImDisk)   blog.mazepin-led.com    そして今回のAIM Toolkit なんか、無茶苦茶遅くなってるな 下手するとSSDの方が速いじゃん CPUの使用状態はこんな感じ PIO転送なところは変わって無さそう まあ、遅いからと言ってその速度が体感できるのかというと出来ないんだけどね と思ったところで、なんか設定変えてみたらどうなるのだろう Allocate Memory Dynamicallyというのは、メモリを必要に応じてってことだからと思って以前試したことがあったけど、なんかImDiskのときは不安定だったんだよな  AdvancedのとこにあるUse AWE Physical Memoryというのが良くわからないけど、チェックしてみたら速くなった おお、大分速くなった。なったけど・・・・なんで？ これだとImDiskよりちょっと遅いくらいになるのか もしやQuickFormatととかでも変わるのか？と思ったけどそこまでやる気も無かったので放置。速くなるわけないよね。 後は圧縮とか、取り外しメディアとかだし。   最近の性能の良いSSDのおかげで RAM DISKというものの存在意義が薄れちゃったね まあそれでとにかく速度を稼ぎたいぜって人は SoftPerfect RamDiskでも使ってください 昔はPrimo Ramdisk使ってました。当時使ってたけどなかなか良かった。 当時SSD無茶苦茶高かったし。 今はほぼ無用になってしまったが・・・ 未だにスタンダード版は8GBまでなんだな キャッシュ領域にしたいなら大人しく余ってるSSDを使った方がいいんじゃ無いかって気がするけど  おしまい
コメントを投稿
続きを読む

RAM DISKを使ってみた(使ったのはImDisk)

GWだし、まあちょっとラムディスクを入れてみました うちのPCはWindows11 使ったのはImDiskというRAM Disk。 まあ、この辺のインストールとかはあちこちで解説してる人がいるので適当にぐぐってくださいな で、とりあえずベンチマーク なかなかいいスピードだ で、大抵の人はブラウザのキャッシュをRAMディスクにするといいよ・・・と言うけど そもそもメインドライブがNVMeのSSDを使っている状態で、体感速度なんか上がらない(使い終わったキャッシュを再起動したら綺麗さっぱり捨て去ってくれるという利点はある)  うちで一番効果があるのは Adobe Audition というアプリ これが結構高速化する(キャッシュをちゃんとRAMディスクにしたら・・・だけど) ハイレゾ音源だと、1時間の音源が何かする度に4GBのファイルを作られてしまう なので、RAM DISKにすると、結構編集時間を短縮できる Premiere Rushも出力先をRam Diskにしておいて終わったら、SSDにコピーすると言う事をやるとかなりスピードアップになる 実はうちのPCは普段は99％のパワーで動作していて、CPUのターボブーストが掛からないようになっている 大体3.6GHz当たりで安定してるのだけど、これを100％にするとターボブースト機能がONになって一部のコアが4.5とか4.8GHzまで上がる まあ、毎回電源オプションをいじる事になるのだけどさ・・・ そうしてベンチを取ると こんな感じ とは言え、ブーストしてるからと行ってRam Diskのスピードの差を体感する事はさすがに無理 ・・・と言うかフォトショでもRAM DISKにしてよかった・・・と言うほど変わらない SSDの性能が上がってきたしもし次にPCを買い換えたらRAM DISKよりSSDの方が速いかもね  
コメントを投稿
続きを読む

QCC dongle proを買った→Windows11で接続までのみちのり

何があった  買ったけど最初の接続に手間取ったので そのメモ QuestyleのQCC dongle proを買ったのだけど、使っているイヤホンと接続できない なんでー? ペアリングしてるのに 説明書 説明書には外装のQRコードを読むように書いてあるのだけど そもそもpage not found 404になる   Windowsには・・・ ちゃんと  ヘッドホンのところには QCC Dongle Pro って出てるのよね しかし音が出ない つーか、新しいペアリングはどうやるのだ  スマホが必要でした 何だそりゃっていいたくなるがどうやらまず、スマホにQCC dongle Pro接続して専用アプリで ドングルとイヤホンをペアリングする必要があった 何だそりゃー Google PlayでQuestyleで検索かけるか こちら でまずはインストール そしてスマホにドングルを刺して、このアプリ内からイヤホンをペアリング そしてそのドングルをWindows11の空いてるUSB TYPE-Cポートに突き刺す   音が出た！ やったね  結局音が良くなった?  どうなんだろうね 正直言ってよくわからん ただ、マイケルジャクソンのThe Jamのオープニングのガラスの割れる音は 今までよりも細かくパリパリ聞こえるようになったから効果はあったんだと思う それと遅延が少なくなった  finalのZE3000 SVというイヤホンを使っていたのだけど今までのただのUSBドングルで YouTubeを見てると明らかに音と画面のタイミングがずれてて、 Bluetoothイヤホンってこんなもんかと表他のだけどそれが亡くなったのはとても快適 LDACは遅延が酷いとか書いてあったからビビってたんだけどね(でも有線イヤホン使うと、あ、これが合ってる状態なんだってなるので遅延はあるみたい)   あと、たまにイヤホンと繋がらなくなるねぇ 相性問題というやつなのだろうか    今までのUSBドングルが捨てられない 最期に罠が一つ そりゃ無いぜって言いたくなるのが今までのUSBドングルが捨てられないこと このQCC dongle pro はWindowsからはイヤホンとして認識されるので他のBluetoo...
コメントを投稿
続きを読む