.NET MAUI svgファイルの色を変えてみた

んー・・・・
えるいーだーのMAUIへの移植進まないねぇ・・・
基本「明日になったら本気出す」の精神なので

まあ、ぼちぼちやってるのだけど、.NET MAUIって画面のアイコンやボタンのファイルはsvgファイルが推奨されていますな
で、まあそのファイルは基本的にはこんなところから持ってきてるわけです

Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
 

[ブログカード風リンクタグ作成]

↑グーグルがマテリアルデザイン用に使えるようにと公開しているわけです
ここから適当なアイコンを持ってきてアプリに組み込んでいるのだけど(MAUIはリソースとして使うときはアルファベットの大文字を使えないのでファイル名はダウンロードしたら変えなければいけない)
で、まあ白黒な訳です(まあ、タブのアイコンとして使うとシステムカラーに合わせてそれなりに色を付けてくれるけど)

 

んじゃあ、自分で色は付けられないのかと探してみたらあっさり見つかった

アプリ アイコンを変更する - .NET MAUI
MAUI アプリ アイコン the.NET 変更する方法について説明します。 アイコンは、ストア、ランチャー、アプリのショートカットなど、複数の場所でアプリを表すロゴです。
 

[ブログカード風リンクタグ作成]

↑マイクロソフトのサイトでがっつり解説してる

上記のサイトだとiconで色々やってるけど別にimageでも同じように出来る
まずはダウンロードしてきたsvgファイルを「Resources /Images」フォルダに放り込んで
ビルドアクションを「MauiImage」に変更

xamlファイルで使いたいコントロールにそのsvgファイルを指定する
この例の場合だとイメージボタンだけど、その辺は適当にやってください
ファイル名は拡張子は「png」を指定する
え？何でか？
MAUIのルールなんですよ。そうしてください。
つーかsvgファイルはコンパイル時にpngファイルとして生成されてるので逆らってもいい事無いです。

<ImageButton Grid.Column="0" Grid.Row="5"

         Source="home.png"

         />

 

プロジェクトファイル(XXX.proj)を確認するとこんな感じで、svgファイルが読み込まれるようになっている

<ItemGroup>

   <MauiImage Include="Resources\Images\btn\home.svg" />

</ItemGroup>

↑こんな感じで表示されます
黒いね

で、じゃあこの線のところを赤くしてみる
TintColorというプロパティを指定する
「red」と指定したけどマイクロソフトのサイトだと数値指定しているし、透明度も指定出来るみたいだ

<ItemGroup>

   <MauiImage Include="Resources\Images\btn\home.svg" TintColor="red" />

</ItemGroup>

 

 ↑赤くなりました

背景も変えられるみたいで
Colorに「blue」を指定すると

<ItemGroup>

   <MauiImage Include="Resources\Images\btn\home.svg" TintColor="red" Color="blue" />

</ItemGroup>

↑背景が今度は青に

・・・・まあ、この機能を使うかどうかは微妙だけどね・・・

最初に紹介したマイクロソフトのサイトでもっと細かくやってるからそっちを見て色々やってみてください