0
0

MahApps.Metro.IconPacksで簡単にアイコンを使う方法

Last updated at Posted at 2024-05-02

必要な準備・手順

VisualStudio2022でWPFプロジェクトの場合の手順です。

  1. MahApps.Metro.IconPacksインストール(Nuget Package)
  2. IconPacks-Browserのインストール
  3. 使い方

1. Nuget Packageインストール

「MahApps.Metro.IconPacks」で検索し、インストールしてください。

手順
① MahApps.Metro.IconPacksを選択
② インストールするプロジェクトにチェックを入れる
③ インストールする
タイトルなし.png

2. IconPacks-Browserのインストール

下記のサイトからインストーラーがダウンロードできるのでIconPacks-BrowserをPCにインストールしてください。
https://apps.microsoft.com/detail/9nblggh3ztbp?hl=jp-US&gl=US

起動してみる

起動すると下記の画面が開きます。使いたいアイコンをクリックし、コードをコピーして使います。
※FontAwesomeだけ、今回の方法では使用できませんでした。

スクリーンショット 2024-05-02 165802.png

3. 使い方

MainWindow.xaml
<Window x:Class="WpfApp1.MainWindow"
        // ・・・省略・・・
        xmlns:Icon="http://metro.mahapps.com/winfx/xaml/iconpacks" //←コレ
        // ・・・省略・・・
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        
    </StackPanel>
</Window>

  • ソリューションのビルドを行う
    タイトルなし2.png

  • IconPacks-Browserから使用したいアイコンのコードをコピペし、「iconPacks」→「Icon」に直す

例:

<iconPacks:PackIconMaterial Kind="Home" />    // ×
  ↓
<Icon:PackIconMaterial Kind="Home" />         // ○

全体のコード

MainWindow.xaml
<Window x:Class="WpfApp1.MainWindow"
        // ・・・省略・・・
        xmlns:Icon="http://metro.mahapps.com/winfx/xaml/iconpacks" //←コレ
        // ・・・省略・・・
        Title="MainWindow" Height="450" Width="800">
        
    <StackPanel>
    
       <Icon:PackIconMaterial Kind="Home" />
       
    </StackPanel>
</Window>

すると・・・
スクリーンショット 2024-05-02 171439.png

アイコンが表示される。

下記のようにStyleを適用することもできます。

MainWindow.xaml
<StackPanel>
    <Icon:PackIconMaterial Kind="HomeMapMarker" Background="Blue" Height="50" Width="50" Foreground="White" Margin="50" Padding="5"/>
</StackPanel>

スクリーンショット 2024-05-02 171754.png

最後に

上記の方法を使えば、WPFアプリに簡単にアイコンを実装することができます。

ライセンスにはあまり詳しくないですが、MItライセンスで商用利用可能みたいです。
※ちゃんと調べたわけではないので、商用利用するときはちゃんと調べてください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0