Metro スタイルアプリケーションでワイドタイルを利用する - C#

Visual StudioでMetro Styleのアプリケーションを作成して実行すると、下図の右下のアイコンがスタートメニューのタイルに表示されます。この時のタイルは正方形のタイルですが、"フォト"や"メール"のタイルは横幅の長いタイルになっています。作成したアプリケーションで横幅の長いタイル(Wide Tile)を利用するアプリケーションの作成方法を紹介します。

Metro Styleのアプリケーションを新規作成します。テンプレートは"新しいアプリケーション"にします。プロジェクトが作成された後、"Package.appxmanifest"ファイルを開きます。下図のアプリケーション設定画面が表示されます。

設定画面の[アプリケーションUI]タブを選択し下にスクロールすると[タイル]セクションがあります。セクション内の[ワイドロゴ]が空欄になっていますので、ここにロゴを設定します。ロゴ画像は画面に記述されている310×150ピクセルの画像を用意します。

今回は下図の画像を用いることにしました。

画像をプロジェクトのAssetsフォルダに配置します。

配置後"ワイドロゴ"の右側の参照ボタンを押し、画像を選択してロゴ画像を設定します。

コード

ワイドロゴを設定する前の Package.appxmanifest

<?xml version="1.0" encoding="utf-8"?>
<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">

  <Identity Name="67f11f67-3535-4bae-a0a9-474bda38bfa2"
            Publisher="CN=ipe.000"
            Version="1.0.0.0" />

  <Properties>
    <DisplayName>DefaultMetro</DisplayName>
    <PublisherDisplayName>ipe.000</PublisherDisplayName>
    <Logo>Assets\StoreLogo.png</Logo>
    <Description>DefaultMetro</Description>
  </Properties>

  <Prerequisites>
    <OSMinVersion>6.2</OSMinVersion>
    <OSMaxVersionTested>6.2</OSMaxVersionTested>
  </Prerequisites>

  <Resources>
    <Resource Language="x-generate"/>
  </Resources>

  <Applications>
    <Application Id="App"
        Executable="$targetnametoken$.exe"
        EntryPoint="DefaultMetro.App">
        <VisualElements
            DisplayName="DefaultMetro"
            Logo="Assets\Logo.png"
            SmallLogo="Assets\SmallLogo.png"
            Description="DefaultMetro"
            ForegroundText="light"
            BackgroundColor="#222222">
            <DefaultTile ShowName="allLogos" />
            <SplashScreen Image="Assets\SplashScreen.png" />
        </VisualElements>
    </Application>
  </Applications>
  <Capabilities>
    <Capability Name="internetClient" />
  </Capabilities>
</Package>

ワイドロゴ設定後の Package.appxmanifest

<?xml version="1.0" encoding="utf-8"?>
<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
  <Identity Name="7bef54c2-ff3e-428a-9576-ff8324d92bab"
      Publisher="CN=ipe.000"
      Version="1.0.0.0" />

  <Properties>
    <DisplayName>SimpleMetro</DisplayName>
    <PublisherDisplayName>ipe.000</PublisherDisplayName>
    <Logo>Assets\StoreLogo.png</Logo>
    <Description>SimpleMetro</Description>
  </Properties>

  <Prerequisites>
    <OSMinVersion>6.2</OSMinVersion>
    <OSMaxVersionTested>6.2</OSMaxVersionTested>
  </Prerequisites>

  <Resources>
    <Resource Language="x-generate" />
  </Resources>

  <Applications>
    <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="SimpleMetro.App">
      <VisualElements 
          DisplayName="SimpleMetro"
          Logo="Assets\Logo.png"]
          SmallLogo="Assets\SmallLogo.png"
          Description="SimpleMetro"
          ForegroundText="light"
          BackgroundColor="#222222">
        <DefaultTile ShowName="allLogos" WideLogo="Assets\test.png" />
        <SplashScreen Image="Assets\SplashScreen.png" />
      </VisualElements>
    </Application>
  </Applications>

  <Capabilities>
    <Capability Name="internetClient" />
  </Capabilities>
</Package>

アプリケーションを実行し、スタート画面に戻るとアプリケーションのタイルがデスクトップの右下に追加されています。タイルのサイズもワイドタイルのサイズです。