Blend を使用した初めての Windows ストア アプリの作成、パート 1: マスター ページ (XAML と C#)

Blend for Visual Studio の XAML デザイン ツールを使用すると、Windows ストア アプリをよりすばやく効率的に開発できます。 このチュートリアルでは、新しいムービーの一覧を参照できる PickaFlick という簡単なアプリのビルドについて説明します。 ムービーの一覧はロッテン トマト API を使用して生成されます。 このチュートリアルを完了するには、ロッテン トマトに登録して API キーを取得し、そのキーをコードに貼り付ける必要があります。

さらに、このチュートリアルを完了するには、Microsoft Visual Studio Professional、Premium、または Ultimate の完全版または評価版を使用して NuGet をインストールする必要もあります。 NuGet は Visual Studio Express では使用できせん。その使用には有効な Windows ストア開発者ライセンスが必要です。

PickaFlick アプリのホーム ページ

このチュートリアルのパート 1 では、アプリのホーム ページを作成します。 作業の中で、次の方法について説明します。

• Create a project from a project template

• View how the Blend UI reflects changes to your app

• Add the images to your project

• Style images and elements

• Switch to Visual Studio and back again

• Make an image into a control

• Style a control template

• Add a visual state change

サンプル ギャラリーからこのプロジェクトをダウンロードすると、コードだけでなく、アセットもすべて確認できるため、作業を進めながらプロジェクトをビルドできます。

このチュートリアルは、XAML または C# を使ったことがなくても進められるように構成されています。 ただし、XAML と C# に関するある程度の知識があれば、Blend をより使いこなすことができます。

プロジェクト テンプレートからプロジェクトを作成する

Blend と Visual Studio には、Windows ストア アプリの開発を始めるのに役立つ同じプロジェクト テンプレートが用意されています。 その他の種類のアプリの開発用に Blend と Visual Studio で使用できるテンプレートについて詳しくは、「アプリ開発を高速化するためのテンプレート」を参照してください。

プロジェクトを作成するには

1. Blend で、[ファイル] メニューの [新しいプロジェクト] をクリックします。

   [新しいプロジェクト] ダイアログ ボックスの左側に、プロジェクトの種類の一覧が表示されます。 プロジェクトの種類をクリックすると、その種類に関連付けられているプロジェクト テンプレートが右側に表示されます。

   

2. プロジェクトの種類の一覧で [XAML (Windows ストア)] をクリックします。

3. プロジェクト テンプレートの一覧で [新しいアプリケーション (XAML)] をクリックします。

4. [名前] ボックスに「PickaFlick」と入力します。

5. [場所] ボックスでプロジェクトの場所を確認します。

6. [言語] ボックスの一覧で [Visual C#] をクリックします。

7. [バージョン] ボックスの一覧で [8.1] をクリックします。 [OK] をクリックします。

アプリへの変更が Blend の UI に反映されているようすを確認する

Blend の既定のワークスペースは、Windows ストア アプリのビルドに使用できるビジュアル インターフェイスであり、デザイン サーフェイス、パネル、ワークスペース構成、オーサリング ビュー、およびメニューから構成されています。 詳細については、「Blend アプリケーション ワークスペース (XAML)」を参照してください。

プロジェクトでの作業時にアプリの 1 つの領域で変更を行うと、その変更がインターフェイス全体に反映されます。

左上の [プロジェクト] タブをクリックすると、[空のアプリケーション] テンプレートからプロジェクトを作成したときに自動生成されたファイルとフォルダーが表示されます。

• 参照   プロジェクトの参照とファイル (DLL ファイルなど) が含まれています。

• アセット   プロジェクト アセット (Windows ストア アプリの既定のイメージ アセットなど) が含まれています。

• プロパティ   一般的なアセンブリ情報を含むファイル。

• App.xaml   共有リソースを宣言し、グローバルなアプリケーション レベルのイベントを処理します。 App.xaml はユーザー インターフェイスを表示するために必要です。

• [MainPage.xaml]   アプリの既定のスタート ページです。

• package.appxmanifest   表示名、ロゴ、アプリの説明、宣言、機能、配置パッケージなど、アプリについて説明したメタデータが含まれます。

詳細については、「プロジェクト パネル (XAML)」を参照してください。

[プロジェクト] パネルの下 (インターフェイスの左下) に [オブジェクトとタイムライン] パネルがあります。 [オブジェクトとタイムライン] パネルに MainPage.xaml の構造が表示されます。

[オブジェクトとタイムライン] パネルには、作業しているページのオブジェクトの階層が表示されます。 [オブジェクトとタイムライン] パネルを直接操作することで、オブジェクトの階層を必要に応じてすばやく簡単に変更できます。

詳細については、「オブジェクトとタイムライン パネル (XAML)」を参照してください。

分割ビューでプロジェクトを表示すると、MainPage.xaml のデザイン サーフェイスとコードの両方を同時に確認できます。 デザイン サーフェイスに表示されている要素を変更すると、コードが自動的に更新されます。 MainPage.xaml のコードが表示されない場合は、デザイン サーフェイスの右上隅の [分割] ビュー アイコン  をクリックします。

次に示す手順では、MainPage.xaml に背景色を追加して、その変更がコードに反映されることを確認します。

MainPage.xaml の背景を変更するには

1. [オブジェクトとタイムライン] パネルの [Grid] をクリックします。

2. [プロパティ] パネルの [ブラシ] カテゴリで、[単色ブラシ] アイコン  をクリックします。

3. [16 進数値] ボックスに「#D5BF9A」と入力し、Enter キーを押します。

   

   これで、コード ビューでは Grid タグに Background="#FFD5BF9A" 属性が追加されます (Alpha 値は既定で 100% つまり FF に設定されます)。デザイン サーフェイスでは新しい背景色が表示されます。

イメージをプロジェクトに追加する

PickaFlick アプリはグラフィック デザイナーによって作成されたイメージでビルドされます。 この ChickenSprite イメージは、視覚的な効果を高めるだけでなく、ユーザーがアプリを起動するときにクリックするボタンの役割も果たします。

このサンプル プロジェクトには次のイメージが含まれています。

• ChickenSprite

• FilmStrip

• MainLogo

• SmallLogo-Chicken

• Temp

イメージは次の方法でプロジェクトに追加できます。

• [プロジェクト] メニューの [既存項目の追加] を使用する

• コピーして貼り付ける

• ドラッグ アンド ドロップする

この例では、イメージをコピーして貼り付けます。

イメージをプロジェクトに追加するには

1. サンプル プロジェクトをダウンロードしたら、PickaFlick Assets フォルダーを開き、Ctrl キーを押しながら A キーを押してから、Ctrl キーを押しながら C キーを押します。

2. Blend の [プロジェクト] パネルで Assets フォルダーを右クリックし、[貼り付け] をクリックします。

アプリのスタイルを設定するときにデザイン サーフェイスにイメージを追加できるようになりました。

イメージと要素のスタイルを設定する

MainPage.xaml には、視覚的な表示を構成する 3 つのイメージがあります。ロゴ (シールド)、背景 (緑色のフィルムストリップ)、ボタン (チキン) のイメージです。 これらの各イメージはそれぞれ異なる方法で実装されています。 1 つ目は、ロゴ (MainLogo.png) です。シンプルな Image コントロールです。 2 つ目は、フィルムストリップ (FilmStrip.png) です。細いイメージを繰り返すことで大きいイメージとして表示されます。 フィルムストリップ イメージは実行時 C# コードを使用して実装されています。 3 つ目は、チキン ボタン (ChickenSprite.png) です。Image コントロールから始めますが、[コントロールの作成] オプションを使用して、このコントロールから Button コントロールを作成します。

アプリのビルド時、アプリの外観に変更を加えるための主な方法は、[プロパティ] パネルで、デザイン サーフェイスに追加する要素にプロパティを適用することです。 [CSS プロパティ] パネルでは、カテゴリ、名前、ソースのいずれかに基づいてプロパティを並べ替えることができます。

カテゴリに基づいて並べ替えた場合、プロパティがカテゴリ別にまとめられ、それぞれのカテゴリでアルファベット順に表示されます。 名前に基づいて並べ替えた場合は、使用できるすべてのプロパティがアルファベット順に表示されます。 ソースに基づいて並べ替えた場合、プロパティは [ローカル、バインディング、およびリソース] または [その他] でグループ化され、それらのカテゴリでアルファベット順に表示されます。

Image コントロールを追加してスタイルを設定する

次に示す手順では、Image コントロールを使用して、PickaFlick アプリのメイン ロゴを追加してそのスタイルを設定します。

メイン ロゴを追加してスタイルを設定するには

1. [プロジェクト] パネルで、MainLogo.png をダブルクリックして、デザイン サーフェイスに追加します。

   そのイメージはデザイン サーフェイスに表示され、Image コントロールが [オブジェクトとタイムライン] パネルに追加されます。

   

   [プロパティ] パネルの [共通] カテゴリで、Image コントロールの [ソース] 属性が Assets/MainLogo.png になっています。

   

2. メイン ロゴ イメージが含まれる Image コントロールを管理しやすいように、[プロパティ] パネルの上部にある [名前] ボックスに「MainLogo」と入力します。 [オブジェクトとタイムライン] パネルで、Image コントロールの名前が "MainLogo" に変更されています。

   

3. [プロパティ] パネルの [レイアウト] カテゴリで、[余白] の右側にある [詳細プロパティ] インジケーター  をクリックし、[リセット] をクリックします。

   ヒント

   [詳細プロパティ] インジケーターのラベルはリソースとデータ バインディングに基づいて変わります。この例では、ラベルは [ローカル] です。

   

4. [共通] カテゴリの [伸縮] ボックスの一覧で [なし] をクリックします。

   

   これで、メイン ロゴがデザイン サーフェイスの中央に表示されました。

   

実行時にレンダリングされるイメージを追加する

フィルムストリップ (FilmStrip.png) は細いイメージです。細いイメージを繰り返すことで大きいイメージとして表示されます。 TileBrush.TileMode プロパティ (イメージのタイルをサポートするプロパティ) は Windows ストア アプリではサポートされていないため、PickaFlick アプリでは C# コードを使用して一連の Image コントロールをレイアウト コンテナー (この例では FilmStrip という名前の Grid コントロール) に並べています。

フィルムストリップ レイアウト コンテナーを作成する

Blend はコードの作業には最適でないため、Blend でメイン グリッドを作成し、Visual Studio に切り替えてコードを開発します。

フィルムストリップ イメージのコンテナーを作成するには

1. [オブジェクトとタイムライン] パネルで [Grid] を選択したら、[アセット] パネルで [Grid] をダブルクリックして、Grid コントロールをデザイン サーフェイスに追加します。

   ヒント

   [検索] ボックスに「Grid」と入力するか、[コントロール] を開いて [パネル] をクリックして [Grid] をクリックすることで、Grid を見つけます。

2. [オブジェクトとタイムライン] パネルで、2 番目の Grid コントロールの名前を変更するために、そのコントロールをクリックし、「FilmStrip」と入力します。

   

3. [FilmStrip] を選択したら、[プロパティ] パネルの [レイアウト] カテゴリで、[Width] を「2560」(横長のデバイス向け) に、[Height] を「218」(FilmStrip.png の高さ) に設定します。

   コントロールのガイドがデザイン サーフェイスの上部にまたがって配置されています。

4. [レイアウト] カテゴリで、[VerticalAlignment] を [Center]  に設定します。

   これで、コントロールのガイドがデザイン サーフェイスの中央に配置されます。

Visual Studio との間で切り替えを行う

フィルムストリップ グリッドを作成したので、Visual Studio に切り替えてコードを仕上げる準備ができました。

開発者は、Blend と Visual Studio の間を気軽に切り替えながら 1 つのプロジェクトの作業を進めることができます。 プロジェクト ファイルは、同じコンピューター上の Blend と Visual Studio で同時に開いておくこともできます。 一方のツールでファイルに変更を加えて保存し、他方のツールに切り替えると、ファイルを再読み込みするだけでプロジェクトのビューが更新されます。

重要

Blend と Visual Studio の間でコードをコピーして貼り付けることもできます。ただし、C# の作成や編集のための推奨ツールは Visual Studio です。ここでは、単一のプロジェクトで作業している場合でも Blend と Visual Studio を簡単に切り替える方法を示します。

Visual Studio でプロジェクトに新しいファイルを追加した場合は、Blend に戻る前に、[すべてを保存] (Ctrl + Shift + S) を使用してプロジェクトを保存するか、アプリをビルドして実行する必要があります。Blend に切り替えると、プロジェクトを再読み込みするかどうかを確認するメッセージが表示されます。[はい] をクリックすると、Blend で新しいファイルがプロジェクトに追加されます。

次は、Visual Studio に切り替えて、アプリのメイン ページが読み込まれたときにフィルムストリップ イメージをレンダリングするコードを作成します。

新しいクラスを作成する

次に示す手順では、TileCanvas.cs という名前の新しいクラス ファイルを作成します。 これは、Blend で作成した Grid コントロール (FilmStrip) に一連の Image コントロールを並べるコードです。

TileCanvas.cs を作成するには

1. Blend の [プロジェクト] パネルで、プロジェクトを右クリックし、[Visual Studio で編集] をクリックします。

   

2. Visual Studio のソリューション エクスプローラーで、プロジェクトを右クリックし、[追加]、[クラス] の順にクリックします。

   

3. [新しい項目の追加] ダイアログ ボックスで、[クラス] をクリックします。 [名前] ボックスに「TileCanvas.cs」と入力し、[追加] をクリックします。

   

4. TileCanvas.cs ファイルで、using System.Threading.Tasks; の後ろに次の using ステートメントを追加します。

   using Windows.UI;
   using Windows.UI.Xaml;
   using Windows.UI.Xaml.Controls;
   using Windows.UI.Xaml.Controls.Primitives;
   using Windows.UI.Xaml.Data;
   using Windows.UI.Xaml.Input;
   using Windows.UI.Xaml.Media;
   using Windows.UI.Xaml.Navigation;
   using Windows.UI.Xaml.Media.Imaging;
   using Windows.Foundation;
   

5. class TileCanvas {} を削除し、次のコードに置き換えます (Rob Fonseca-Ensor の TileCanvas.cs に基づいています。このコードは https://gist.github.com/robfe/3077863#file-tilecanvas-cs から入手でき、Apache 2.0 ライセンス下で使用できます)。

   public class TileCanvas : Canvas
       {
           public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(TileCanvas), new PropertyMetadata(null, ImageSourceChanged));
   
           private Size lastActualSize;
   
           public TileCanvas()
           {
               LayoutUpdated += OnLayoutUpdated;
           }
   
           public ImageSource ImageSource
           {
               get { return (ImageSource)GetValue(ImageSourceProperty); }
              set { SetValue(ImageSourceProperty, value); }
           }
   
           private void OnLayoutUpdated(object sender, object o)
           {
               var newSize = new Size(ActualWidth, ActualHeight);
               if (lastActualSize != newSize)
               {
                   lastActualSize = newSize;
                   Rebuild();
               }
           }
   
           private static void ImageSourceChanged(DependencyObject o, DependencyPropertyChangedEventArgs args)
           {
               TileCanvas self = (TileCanvas)o;
               var src = self.ImageSource;
               if (src != null)
               {
                   var image = new Image { Source = src };
                   image.ImageOpened += self.ImageOnImageOpened;
                   image.ImageFailed += self.ImageOnImageFailed;
   
                   //add it to the visual tree to kick off ImageOpened
                   self.Children.Add(image);
               }
           }
   
           private void ImageOnImageFailed(object sender, ExceptionRoutedEventArgs exceptionRoutedEventArgs)
           {
               var image = (Image)sender;
               image.ImageOpened -= ImageOnImageOpened;
               image.ImageFailed -= ImageOnImageFailed;
               Children.Add(new TextBlock { Text = exceptionRoutedEventArgs.ErrorMessage, Foreground = new SolidColorBrush(Colors.Red) });
           }
   
           private void ImageOnImageOpened(object sender, RoutedEventArgs routedEventArgs)
           {
               var image = (Image)sender;
               image.ImageOpened -= ImageOnImageOpened;
               image.ImageFailed -= ImageOnImageFailed;
               Rebuild();
           }
   
           private void Rebuild()
           {
               var bmp = ImageSource as BitmapSource;
               if (bmp == null)
               {
                   return;
               }
   
               var width = bmp.PixelWidth;
               var height = bmp.PixelHeight;
   
               if (width == 0 || height == 0)
               {
                   return;
               }
   
               Children.Clear();
               for (int x = 0; x < ActualWidth; x += width)
               {
                   for (int y = 0; y < ActualHeight; y += height)
                   {
                       var image = new Image { Source = ImageSource };
                       Canvas.SetLeft(image, x);
                       Canvas.SetTop(image, y);
                       Children.Add(image);
                   }
               }
               Clip = new RectangleGeometry { Rect = new Rect(0, 0, ActualWidth, ActualHeight) };
           }
       }
   

   Ctrl + S キーを押して、変更内容を保存します。

MainPage.xaml.cs を変更する

Windows.UI.Xaml.Media.Imaging 名前空間への参照をこのページに追加することで、イメージ ソースを参照する URI を使用できます。 この URI は FilmStrip.png を参照します。

Windows.UI.Xaml.Media.Imaging 名前空間への参照を追加するには

• ソリューション エクスプローラーで、[MainPage.xaml] を展開し、MainPage.xaml.cs をダブルクリックして開きます。 using Windows.UI.Xaml.Navigation; の後ろに次のステートメントを追加します。

  using Windows.UI.Xaml.Media.Imaging;
  

PageLoaded イベントを追加する

TileCanvas.cs には、FilmStrip グリッドを Image コントロールで埋めるコードが含まれています。 Windows.UI.Xaml.Media.Imaging 名前空間を参照することで、特定のイメージの URI を参照できるようになります。 コードを完成させるには、TileCanvas.cs を呼び出して MainPage.xaml の読み込み時のイメージの URI を定義する Page_Loaded イベントを追加する必要があります。

PageLoaded イベントを MainPage.xaml に追加する

1. ソリューション エクスプローラーで、MainPage.xaml をダブルクリックして開きます。

2. XAML ビューで、ページの上部にある Page ヘッダー内でクリックします。 [プロパティ] パネルで、[イベント] ボタン をクリックします。

3. [Loaded] ボックス内でダブルクリックして、Page_Loaded イベントを MainPage.xaml に追加します。

   

   MainPage.xaml.cs ファイルが開き、次のコードがページに追加されています。

   private void Page_Loaded(object sender, RoutedEventArgs e) {}
   

4. 次のコードを private void Page_Loaded(object sender, RoutedEventArgs e) の後ろの中かっこの間に貼り付けます。

               TileCanvas tc = new TileCanvas();
               BitmapImage img = new BitmapImage();
               Uri baseUri = new Uri("ms-appx:///");
               img.UriSource = new Uri(baseUri, "Assets/FilmStrip.png");
               tc.ImageSource = img;
               FilmStrip.Children.Add(tc);
   

   Ctrl + Shift + S キーを押して、すべての変更をプロジェクトに保存します。

5. Blend に切り替えます。 メッセージが表示され、プロジェクトを再読み込みするかどうかを尋ねられます。 [はい] をクリックします。

   

6. F5 キーを押してプロジェクトをビルドしてから実行します。 フィルムストリップは想定どおりにアプリの画面にまたがって表示されていますが、メイン ロゴの前に表示されているため、見にくくなっています。 Alt キーを押しながら F4 キーを押して、アプリを閉じます。

7. Blend の [オブジェクトとタイムライン] パネルで確認すると、オブジェクトの階層内で FilmStrip が MainLogo の下に表示されています。 XAML ファイルでのオブジェクトの重ね順は (ZIndex とも呼ばれる) は階層内での順序によって決まります。 [FilmStrip] をクリックし、階層内で [MainLogo] の上に表示されるようにドラッグします。

   ヒント

   別の方法として、[プロパティ] パネルで ZIndex を設定し、[オブジェクトとタイムライン] パネルで ZIndex 順に要素を表示することもできます。そのためには、パネルの左下にある [Z オーダーに並べ替え]  をクリックします。

   

   ヒント

   挿入ポイントは青いガイドで示されます。

8. F5 キーを押してアプリをビルドしてから実行します。 これで、フィルムストリップは想定どおりにメイン ロゴの後ろに表示されました。 Alt キーを押しながら F4 キーを押して、アプリを閉じます。

チキン ボタンを作成する

PickaFlick アプリの 3 つ目のイメージはボタン イメージ (ChickenSprite.png) です。 Image コントロールをデザイン サーフェイスに追加し、そのイメージを Button ユーザー コントロールに変換することで、イメージからボタンをすばやく作成できます。 その後、Button コントロールの作成時に自動的に生成される Button テンプレートに変更を加えることができます。

イメージからユーザー コントロールを作成する

次に示す手順では、チキン イメージをデザイン サーフェイスに追加し、[コントロールの作成] を使用して Button コントロールに変換します。

ChickenButton コントロールを作成するには

1. [オブジェクトとタイムライン] パネルで [Grid] が選択されていることを確認します。 [プロジェクト] パネルで、Assets フォルダーを開き、ChickenSprite.png をダブルクリックしてデザイン サーフェイスに追加します。

2. [オブジェクトとタイムライン] パネルで、Image コントロールの名前を変更するために、そのコントロールをクリックし、「ChickenSprite」と入力します。 Enter キーを押します。

   

3. [ツール] メニューの [コントロールの作成] をクリックします。

   [コントロールの作成] ダイアログ ボックスが表示されます。

   

4. [コントロールの作成] ダイアログ ボックスの [コントロール] ボックスの一覧で、[Button] をクリックします。

5. [名前 (キー)] ボックスに「ChickenButton」と入力します。

6. [定義先] で、[このドキュメント] が選択されています。 [このドキュメント] ドロップダウン リストに [ページ: <名前なし>] が表示されています。 [OK] をクリックします。

これで、ChickenSprite Image コントロールが Button コントロールになりました。 Button テンプレートはこの時点で、[オブジェクトとタイムライン] パネル (テンプレート編集モードとも呼ばれる) に表示されます。 このテンプレート ([ChickenButton (Button テンプレート)]) がパネル の上部に呼び出され、テンプレート オブジェクトの階層 ([Grid]、[ChickenSprite] コントロール、[ContentPresenter]) が表示されます。

コントロール テンプレートのスタイルを設定する

これで、コントロール テンプレートをカスタマイズする準備ができました。 ContentPresenter (デザイン サーフェイスにテキスト "Button" を表示するコントロール) の削除から始めます。 コンテナーの種類を変更してから、コンテナーにイメージの上半分のみが表示されるように変更を加えます。 イメージの下半分は非表示になります。

Button テンプレートを変更するには

1. ContentPresenter を削除するには、[オブジェクトとタイムライン] パネルで [ContentPresenter] を右クリックし、[削除] をクリックします。

2. レイアウト コンテナーの種類を変更するために、[Grid] を右クリックし、[レイアウトの種類の変更]、[Viewbox] の順にクリックします。

   

3. Viewbox のサイズをイメージの高さの半分に変更するには、[プロパティ] パネルの [レイアウト] カテゴリで [高さ] を「180」に設定します。

4. イメージは Viewbox の高さに合わせてサイズが変更されます。 サイズが変更されないようにするには、[プロパティ] パネルの [外観] カテゴリで [伸縮] を [なし] に設定します。

   これで、イメージは Viewbox コントロールの幅にまたがって上半分のみが表示されます。

5. テンプレートの編集が完了したので、テンプレート編集モードを終了します。そのためには、[オブジェクトとタイムライン] パネルの上部にある [スコープを戻す] アイコン  をクリックします。

6. Button コントロールをアプリの画面の中央に移動するには、[レイアウト] カテゴリで [余白] の右側にある [詳細プロパティ] アイコン  をクリックし、[リセット] をクリックします。 [HorizontalAlignment] の横にある [中央揃え] アイコン  をクリックします。

表示状態の変化を追加する

PickaFlick アプリを実行しているとき、ChickenButton は、クリックされるとムービーの詳細ページを開くコントロールです。 ChickenButton にポインターを合わせると、チキンが動いているように見えます。 このインタラクティブな効果はコントロールに適用される視覚的な状態の変化です。 既定では、イメージの上半分だけが表示されます。 ポインターを合わせると、隠れていたイメージの下半分が表示され、既定の表示が置き換えられてアニメーションがシミュレートされます。

状態の変化を追加するには、ChickenButton テンプレートを編集します。

ChickenButton コントロールに視覚的な状態の変化を追加するには

1. [オブジェクトとタイムライン] パネルで [ボタン] を右クリックし、[テンプレートの編集] をポイントして、[現在のテンプレートの編集] をクリックします。

   

   または、ドキュメント タブの下にある階層リンクで [テンプレート] をクリックします。

   

2. [オブジェクトとタイムライン] パネルで [ChickenSprite] をクリックします。

3. [状態] パネルで [PointerOver] をクリックします。

   

4. [プロパティ] パネルの [レイアウト] カテゴリで、上の [余白] を「-179」に設定します。

   注意

   上の [余白] を「-180」に設定すると、イメージの上半分と下半分の両方が表示されるようになります。

   

5. ドキュメント タブのデザイン ウィンドウで記録モード インジケーター  をクリックすることで、状態の記録をオフにします。

   

6. テンプレート編集モードを終了するために、[オブジェクトとタイムライン] パネルの上部にある [スコープを戻す] アイコン  をクリックします。

F5 キーを押して、アプリをビルドおよび実行します。 チキン イメージにポインターを合わせて、チキン イメージの状態が切り替わることを確認します。 Alt キーを押しながら F4 キーを押して、アプリを閉じます。

これで、詳細ページを作成する準備ができました。 続行するには、「Blend を使用した初めての Windows ストア アプリの作成、パート 2: 詳細ページ (XAML と C#)」を参照してください。