SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

UWPのアイコン表示用のクラス

UWPでは、アイコン表示に便利な以下の4つのXAMLの要素があります。
これはUWPで追加になった要素ではなく、Win8系のストアアプリからあったものです。
ですが、UWPアプリ開発ではあちこちで使いそうなので、WPFからの移行組として、改めてざっと触ってみようと思います。

アイコン系のXAML要素

コントロール名 内容
SymbolIcon Symbol列挙体を使って、表示内容を指定する。
FontIcon 文字を使ってアイコンの表示内容を指定する。通常はFontFamilyに「Segoe MDL2 Assets」などのアイコン用のフォント指定をして使う
BitmapIcon 画像を使ってアイコンの表示内容を指定する
PathIcon Pathプロパティにパス描画用のミニ言語で形状を指定する。
        <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>

f:id:minami_SC:20150904011154p:plain

SymbolIconやFontIconが特に便利です。
あとFontIconを使う場合、Win10のUWPからは「Segoe MDL2 Assets」というフォントが増えています。
(Win8系では、Segoe UI Symbolというフォントを使っていました。)
「Segoe UI Symbl」も使えますが、UWPではこの「Segoe MDL2 Assets」フォントを使う、ってことを覚えておけばよさそう。

使ってみる

通常はこんな風にButtonのコンテンツとしてこの手のアイコン用コントロールを使います。
あとAppBarを作るときなどには欠かせない存在ですね。

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

f:id:minami_SC:20150904011204p:plain