---
# System prepended metadata

title: UWP アイコンを使用する　2021-04-15
tags: [アイコン, UWP]

---

---
lang: ja-jp
breaks: true
---
# UWP アイコンを使用する　2021-04-15

> Windows アプリのアイコン
> https://docs.microsoft.com/ja-jp/windows/uwp/design/style/icons

> Segoe MDL2 アセットのアイコン
> * Windows 10 の場合: 何も行う必要はありません。フォントは Windows に付属しています。
> * Mac の場合: フォントをダウンロードしてインストールする必要があります。
> https://aka.ms/SegoeFonts
> 
> https://docs.microsoft.com/ja-jp/windows/uwp/design/style/segoe-ui-symbol-font

> UWPのアイコン表示用のクラス
> http://sourcechord.hatenablog.com/entry/2015/09/04/011255

## アイコンフォントの利用

> Segoe MDL2 Assets - Cheatsheet
> http://modernicons.io/segoe-mdl2/cheatsheet/

```xaml=
<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />
```

```xaml=
        <ToggleButton Width="48"
                      HorizontalAlignment="Center"
                      Foreground="{ThemeResource AppBarBackgroundThemeBrush}">
            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE112;" />
        </ToggleButton>
```

```xaml=
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE700;"/>
```

## シンボル アイコンの利用

> Symbol Enum
> https://docs.microsoft.com/ja-jp/uwp/api/windows.ui.xaml.controls.symbol?view=winrt-19041

```xaml=
<SymbolIcon Symbol="GlobalNavigationButton"/>
```

```xaml=
<SymbolIcon Symbol="OpenFile" Foreground="Red" />
```

```xaml=
<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>
```

```xaml=
        <StackPanel>
            <SymbolIcon Symbol="Back"/>
            <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#xE112;"/>
            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE112;"/>
            <BitmapIcon UriSource="Assets/StoreLogo.png" Width="24"/>
            <PathIcon Data="M 0,0L 20,0L 20,20L 0,20Z" HorizontalAlignment="Center" />
        </StackPanel>
```


## Mdl2Tool

> ScottIsAFool/Mdl2Tool
> https://github.com/ScottIsAFool/Mdl2Tool

実行すると、「Mdl2.cs」と「Mdl2.xaml」が出来上がり、このファイルをプロジェクトに組み込んで使用する。

> ### Segoe MDL2
> accessor in cs
> ```csharp=
> MyBusIcon = Mdl2.Bus;
> ```
> or name is xaml:
> ```xaml=
> <TextBlock FontFamily="Segoe MDL2 Assets"
> Foreground="SkyBlue"
> Text="{StaticResource Bus}"/>
> ```
> https://muibiencarlota.wordpress.com/2015/07/07/segoe-mdl2/

```xaml=
    <Page.Resources>
        <ResourceDictionary
            Source="Mdl2Tool/Mdl2.xaml" />
    </Page.Resources>
    
            <TextBlock
                FontFamily="Segoe MDL2 Assets"
                Foreground="Blue"
                Text="{StaticResource Accept}"
                FontSize="50"
                />

```

nugetにも登録されているが、使用方法がわからない。。
> 3 packages returned for ScottIsAFool.Mdl2
> https://www.nuget.org/packages?q=ScottIsAFool.Mdl2

## ボタンにアイコンと文字列を設定
> Windowsフォーム開発者のためのWindows 10 UWPアプリ開発入門（前編）
> https://www.atmarkit.co.jp/ait/articles/1509/29/news020_6.html
```xaml=
            <Button
                Grid.Row="1"
                x:Name="button1"
                FontSize="24"
                HorizontalAlignment="Center"
                Margin="0,20"
                RequestedTheme="Light"
                Background="DodgerBlue"
                Foreground="White"
                Click="button1_Click">
                <Button.Content>
                    <StackPanel
                        Orientation="Horizontal">
                        <FontIcon
                            Glyph="&#128338;"
                            FontFamily="Segoe UI Emoji"
                            Foreground="Orange" />
                        <TextBlock
                            Text="現在時刻"
                            Margin="8,0,0,0" />
                    </StackPanel>
                </Button.Content>
            </Button>

```

## Material Design Icons

> ### Material Design Icons
> https://materialdesignicons.com/

## MaterialDesignInXamlToolkit Icon Pack
> https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/web/images/screen-iconpack.png

###### tags: `UWP` `アイコン`