カラフルな AppBarButton を作ろう♪ #win8dev_jp

このエントリーは、 Windows Store App Advent Calendar 2013 の 24日目です。

アプリバーのボタンって、標準はモノクロなんですね。 まぁ、クローム (飾り) は目立ってちゃいけねぇ、ってことで地味になってるわけですけど。
でも、みんながみんなそうなってると、たまにはカラフルにしたくなるじゃないですか f(^^;

ってことで、カラフルな AppBarButton を作ってみよう! って企画です♪

ただし、条件：
ビットマップとか Path とかを使い始めたら、何でもアリ、ですからね。 AppBarButton の中に置くカタチのあるものは文字だけにしましょう。 Image も Path も Rectangle も禁止ね f(^^;
あと、 Windows 8.1 の AppBarButton コントロール限定ね。 いまさら Windows 8 時代の面倒なアプリバーは書きたくないのでw

◆ Colored Font

というわけで、Windows 8.1 の新機能から使っちゃいましょう♪

"Segoe UI Emoji" というフォントを指定するだけ。

<AppBarButton Label="Colored Font   (Segoe UI Emoji)  0x1F385" >
  <AppBarButton.Icon>
    <FontIcon Glyph="&#x1F385;" FontFamily="Segoe UI Emoji" />
  </AppBarButton.Icon>
</AppBarButton>

<AppBarButton Label="Colored Font   (Segoe UI Emoji)  0x1F385" >
  <AppBarButton.Icon>
    <FontIcon Glyph="&#x1F384;" FontFamily="Segoe UI Emoji" />
  </AppBarButton.Icon>
</AppBarButton>

<AppBarButton Label="Colored Font   (Segoe UI Emoji)  0x2603" >
  <AppBarButton.Icon>
    <FontIcon Glyph="&#x2603;" FontFamily="Segoe UI Emoji" />
  </AppBarButton.Icon>
</AppBarButton>

ただし、"Segoe UI Emoji" は 16bit より上にもたくさんグリフを持ってます。 Windows 標準の 「文字コード表」 ツールでは、そこは見えません。
ので、Petzold 先生の Multicolor Font Characters in Windows 8.1 に載ってるアプリを使うとか、 主なものだけなら Emoji Font アプリ で探すとかします。

それと、FontIcon コントロールの Glyph プロパティには 1 文字しかセットできない、
なんてことはないので。 文字幅がヘンなグリフを並べて、こんな↓こともできます f(^^;

<AppBarButton Label="Colored Font  (前景色は緑)" >
  <AppBarButton.Icon>
    <FontIcon Glyph="&#x20E3;&#x2764;&#x20E3;" FontFamily="Segoe UI" Foreground="Green" />
  </AppBarButton.Icon>
</AppBarButton>

中央の ❤ は、赤い色が付いた Colored Font ですが、左右のグリフは Colored Font じゃないです。 なので、 左右のグリフには Foreground の設定が効いてます。

◆ 幅がゼロのフォント

AppBarButton コントロールは、必ず Icon プロパティを使わなきゃいけない、
ってことはないです。 ちゃんと Content プロパティも持ってます♪

てことで、TextBlock コントロールを突っ込んでやります。 でもって、幅ゼロのフォントを使って 2 文字を重ねてやると、↓こんなふうに。 (^^)

<AppBarButton Label="Segoe UI Symbol (幅0フォント)">
  <TextBlock FontFamily="Segoe UI Symbol" FontSize="27" HorizontalAlignment="Center" VerticalAlignment="Center">
      <Run Foreground="Violet">&#xE00B;</Run><Run Foreground="Pink">&#xE006;</Run>
  </TextBlock>
</AppBarButton>

"Segoe UI Symbol" フォントの  は、ハートのグリフなんですが、幅がゼロだという情報を持ってます。 なので、 その次のグリフも同じ位置に表示されることになります。

◆ 重ね合わせ

Content プロパティに突っ込めるとなれば、TextBlock コントロールを 2つ重ねてやることも可能なわけで。 フォントの太さを変えて重ねれば、↓ご覧の通り♪

<AppBarButton Label="游明朝             (重ね合わせ)" >
  <Grid>
    <TextBlock FontFamily="Yu Mincho" FontSize="27" HorizontalAlignment="Center" VerticalAlignment="Center"
               LineStackingStrategy="BaselineToBaseline" LineHeight="20" FontWeight="Bold" >
      <Run Foreground="White" >祝</Run>
    </TextBlock>
    <TextBlock FontFamily="Yu Mincho" FontSize="27" HorizontalAlignment="Center" VerticalAlignment="Center"
               LineStackingStrategy="BaselineToBaseline" LineHeight="20" FontWeight="Light" >
      <Run Foreground="Red">祝</Run>
    </TextBlock>
  </Grid>
</AppBarButton>

◆ GradientBrush

TextBlock コントロールの Foreground プロパティには、 単色しか設定しちゃいけない、
なんてことはないです。 ので、グラデーションを指定してやれば、グリフの色がちゃんとグラデになります♪

<AppBarButton Label="Segoe UI Emoji 0x1F168   +GradientBrush" >
  <TextBlock FontFamily="Segoe UI Emoji" FontSize="39" FontWeight="Bold"
             HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,-8,0,0"
             Text="&#x1F167;"
             >
    <TextBlock.Foreground>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFB82302" Offset="0"/>
        <GradientStop Color="#FF08B800" Offset="1"/>
        <GradientStop Color="#FFE2C300" Offset="0.608"/>
      </LinearGradientBrush>
    </TextBlock.Foreground>
  </TextBlock>
</AppBarButton>

◆ 魔改造

そもそも AppBarButton コントロールの背景色が設定できればいいんだよ! f(^^;

AppBarButton コントロールの背景色は AppBarItemBackgroundThemeBrush という名前で定義されている (MSDN: AppBarButton スタイルとテンプレート ) ので、 アプリ全体で変更したければ、 この定義を App.xaml で上書きしちゃえばいいです。

でも、 一部分だけで変えたいときは、 これではどうにも… orz

となれば、 最後の手段!

generic.xaml からスタイル定義をコピってきて、 魔改造しちゃいますw

【App.xaml】
<Application.Resources>

  <!-- 中略 -->

  <!-- AppBarButtonのスタイル定義をgeneric.xamlからコピペしてきて好きなだけ改造するw -->
  <Style TargetType="AppBarButton" >

    <!-- 中略 -->

            <StackPanel VerticalAlignment="Top" Margin="0,14,0,13">
              <Grid Width="40" Height="40" Margin="0,0,0,5" HorizontalAlignment="Center">
                <Ellipse
                  x:Name="BackgroundEllipse"
                  UseLayoutRounding="False"
                  Width="40"
                  Height="40"
                  Fill="{TemplateBinding Background}"/>
                  <!-- ↑ 背景色をプロパティからセットできるように Fill を変更した -->

    <!-- 後略 -->

【MainPage.xaml】
<StackPanel Orientation="Horizontal">
  <StackPanel.Resources>
    <LinearGradientBrush x:Key="g1" EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#ccB82302" Offset="0"/>
      <GradientStop Color="#cc08B800" Offset="1"/>
      <GradientStop Color="#ccE2C300" Offset="0.3"/>
    </LinearGradientBrush>
    <Style x:Key="AppBarButtonTextBlockStyle1" TargetType="TextBlock">
      <Setter Property="HorizontalAlignment" Value="Center"/>
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="FontSize" Value="30" />
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="Padding" Value="0,10,0,0" />
    </Style>
  </StackPanel.Resources>
  <AppBarButton Label="め" Background="{StaticResource g1}" IsCompact="True" >
    <TextBlock Foreground="Red" Style="{StaticResource AppBarButtonTextBlockStyle1}">め</TextBlock>
  </AppBarButton>
  <!-- 後略 -->

◆ ソースコード

code.msdn で公開しています♪

アプリバーの一番右の [?] ボタンを押すと、 何か出るよ♪

でも、 ソースコードを見てもなんだか分からないハズ f(^^;
ダウンロードして VS 2013 Express で動かしてみてね!

余談：
しまったなぁ、こっちを XAML アドベントカレンダーのエントリーにすりゃよかったw