🍥

名前から動的にアイコンを得る (MudBlazor)

に公開
C#
Blazor
MudBlazor
tech

はじめに

リンクボタンの並んだツールバーをハードコーディングしたのですが、ボタンの数や諸元(名前、アイコン、色、リンク先)を設定でカスタマイズできるようにしようとして、ちょっとつまずきました。

前提として、設定に保存するためには、シリアライズ/デシリアライズが必要です。
例えば、MudBlazorで色を指定するColorはenumなので、ToStringとenum.TryParseで実現可能です。

対して、アイコン(Icons)は元々stringですが、さすがにベクターデータを設定・保存するわけにもいきません。
そこは、分かり易く、名前で設定したいですよね。

名前の文字列からアイコンを取得しようとすると、リフレクションを使うことになるようです。

前提

  • .NET 8
  • MudBlazor 8.11.0

実装

https://github.com/tetr4lab/Tetr4labNugetPackages/blob/10f4f55557349d4a90e040a0471d084f8ac0c960/Tetr4labRazor/MudIconsHelper.cs#L11-L22

下記リンク先の例にあるように、対象が静的フィールドなので、FieldInfo.GetValueの引数はnullを指定します。

https://learn.microsoft.com/ja-jp/dotnet/api/system.reflection.fieldinfo.getvalue?view=net-8.0#-

アイコン名は、"Icons.~.~.~"の形式を許容し、ドット区切り毎に"Icons.Material.Filled."までは省略できます。
通常は、"Outlined.ShoppingCart"、あるいは、単に"ShoppingCart"などと指定します。

使用例

<MudIcon Icon="@icon" />

@code {
    [Parameter] public string? IconName { get; set; } = null;
    protected string icon = string.Empty;

    protected override void OnParametersSet () {
        if (_lastIconName != IconName) {
            _lastIconName = IconName ?? "ImageNotSupported";
            icon = _lastIconName.GetIcon ();
        }
    }
    private string? _lastIconName = null;
}
蛇足

ツールバーの生成は以下のような感じです。

設定(string LinkButtons)
◯◯ペイ|https://~|QrCode2|Error
◯◯カード|https://~/login|CreditCard|Error
△△カード|https://~/default.htm|CreditCard|Info
◇◇カード|https://~/index.jsp|CreditCard|Tertiary
◯◯電力|https://~|ElectricBolt|Warning
◯◯電話|https://~/bill/|Smartphone|Secondary
　⫶
Setting.cs
public List<List<string>> LinkButtonList => LinkButtons.Split ('\n').ToList ().ConvertAll (x => x.Split ('|').ToList ());
NavBar.razor
<MudButtonGroup Variant="Variant.Outlined">
    @foreach (var item in DataSet.Setting.LinkButtonList) {
        if (item.Count >= 2) {
            var name = item [0];
            var url = item [1];
            var icon = (item.Count > 2 ? item [2] : "Link").GetIcon ();
            var color = item.Count > 3 && Enum.TryParse<Color> (item [3], out var c) ? c : Color.Default;
            <MudTooltip Text="@name" Color="@color" Arrow Duration="1000">
                <MudIconButton Class="px-2" Color="@color" Href="@url" Target="_blank" Icon="@icon" />
            </MudTooltip>
        }
    }
</MudButtonGroup>

おわりに

最後までお読みいただきありがとうございました。
何かお気づきの際は、是非コメントなどでご指摘ください。
あるいは、「それでも解らない」、「自分はこう捉えている」などといった、ご意見、ご感想も歓迎いたします。

Discussion