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

[アーティクル]
06/05/2015

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

Blend の PickaFlick アプリ

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

注意

このアプリを実行するには、ロッテントマトに登録してキーを取得し、そのキーをコードに貼り付ける必要があります。

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

項目テンプレートをプロジェクトに追加する

プロジェクトテンプレートに加えて、Blend と Visual Studio のいずれにも項目テンプレートが用意されています。項目テンプレートには一般的なコードが含まれていて、アプリ開発を高速化するためにプロジェクトに簡単に追加できます。「アプリ開発を高速化するためのテンプレート」を参照してください。

PickaFlick アプリの場合、既存のプロジェクトに空白のページの項目テンプレートを追加します。このページはアプリのムービー表示ページになります。

空白のページの項目テンプレートを追加するには

[プロジェクト] パネルで、プロジェクトファイルを右クリックし、[新しいアイテムの追加] をクリックします。

[新しいアイテム] ダイアログボックスが表示されます。
項目テンプレートの一覧で [空白のページ] をクリックします。
[名前] ボックスに「MovieDisplay.xaml」と入力し、[OK] をクリックして項目テンプレートを追加します。

次は、MovieDisplay.xaml の背景を変更します

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

[オブジェクトとタイムライン] パネルの [Grid] をクリックします。
[プロパティ] パネルの [ブラシ] カテゴリで、[単色ブラシ] アイコンをクリックします。
[16 進数値] ボックスに「#D5BF9A」と入力し、Enter キーを押します。

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

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

JSON を .NET オブジェクトに変換して、C# でビルドされた Windows ストアアプリで利用できるようにするには、PickaFlick アプリに JSON シリアライザーが必要です。 JSON シリアライザーは独自に記述するか、Microsoft Visual Studio の NuGet Package Manager を使用してダウンロードすることができます。 Blend から Visual Studio に切り替えると、この操作を簡単に実行できます。

次に示す手順では、Visual Studio に切り替えて Json.NET の JSON シリアライザーをダウンロードし、変更内容を保存します。その後、Blend に戻って作業を続行します。

NuGet Package Manager を使用して Json.NET をインストールするには

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

Visual Studio で PickaFlick プロジェクトが開きます。ファイルの再読み込みを求めるメッセージが表示されたら、[すべて再読み込み] をクリックします。

ヒント

このチュートリアルのパート 1 で Visual Studio を既に開いているため、Visual Studio は [Visual Studio で編集] のクリック後に Blend の後ろに隠れている場合があります。
ソリューションエクスプローラーで、プロジェクトファイルを右クリックし、[NuGet パッケージの管理] をクリックします。
[NuGet パッケージの管理] ダイアログボックスで、[検索] ボックスに「Json.Net」と入力します。 Enter キーを押します。
[結果] ボックスの一覧で、Json.NET の右側にある [インストール] ボタンをクリックします。
パッケージのインストールが完了した後、[閉じる] をクリックします。

Json.NET のホームページがドキュメントウィンドウに表示され、Newtonsoft.Json への参照がソリューションエクスプローラーの References フォルダーに表示されます。

PickaFlick コードをプロジェクトに追加するには

PickaFlick アプリのコードはロッテントマト Web サイトからデータを取得し、取得したデータから .NET オブジェクトをビルドします。これらのオブジェクトはアプリで直接利用できます。

コードをプロジェクトに追加するには

ソリューションエクスプローラーを右クリックし、[追加] をポイントして、[新しいフォルダー] をクリックします。
ソリューションエクスプローラーで、新しいフォルダーをクリックし、「DataModel」と入力します。
DataModel フォルダーを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。または、Ctrl + Shift + A キーを押します。
[新しい項目の追加] ダイアログボックスで、[クラス] をクリックし、「MovieData.cs」と入力します。 [追加] をクリックします。

MovieData.cs で、class MovieData {} を次のコードに置き換えます。

// This class represents a movie. It contains properties the describe the movie.
    public class MovieData
    {
        public MovieData(string title, string summary, string image)
        {
            this.Title = title;
            this.Summary = summary;
            this.Image = image;

        }
        public string Title { get; set; }
        public string Summary { get; set; }
        public string Image { get; set; }
    }

Ctrl + Shift + A キーを押します [クラス] が選択されていることを確認します。 [新しい項目の追加] ダイアログボックスで、[クラス] をクリックし、「PickaFlickQuery.cs」と入力します。 [追加] をクリックします。

PickaFlickQuery.cs で、using System.Threading.Tasks; の後ろに次のコードを追加します。

using System.IO;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using System.Collections.ObjectModel;
using System.Net;
using System.Net.Http;
using Newtonsoft.Json;
using System.IO.Compression;

class PickaFlickQuery {} を次のコードに置き換えます。

    public class PickaFlickQuery
    {
        protected Uri Uri { get; private set; }
        // A collection class used to store a list of MovieData objects.
        public ObservableCollection<MovieData> results = new ObservableCollection<MovieData>();
        private bool hasExecutedQuery;

        public PickaFlickQuery(Uri uri)
        {
            this.Uri = uri;
        }

        // Executes a query to obtain information about movies.
        // This property also stores the movies in a collection class.
        public ObservableCollection<MovieData> Results
        {
            get
            {
                if (!hasExecutedQuery)
                {
                    this.ExecuteQuery();
                }

                return this.results;
            }
        }

        // Calls a service to obtain a list of movies. This method stores each movie
        // in a collection object.
        private async void ExecuteQuery()
        {
            try
            {          
                HttpClient httpClient = new HttpClient();

                var response = await httpClient.GetAsync(this.Uri);

                string responseText = "";

                IEnumerable<string> headerValues = Enumerable.Empty<string>();

                if (response.Content.Headers.TryGetValues("Content-Encoding", out headerValues))
                {
                    foreach (string headerValue in response.Content.Headers.GetValues("Content-Encoding"))
                    {
                        if (headerValue == "gzip")
                        {
                            using (var responseStream = await response.Content.ReadAsStreamAsync())
                            using (var decompressedStream = new GZipStream(responseStream, CompressionMode.Decompress))
                            using (var streamReader = new StreamReader(decompressedStream))
                            {
                                responseText = streamReader.ReadToEnd();
                            }
                        }
                    }   
                }
                if (responseText == "")
                {
                    var stream = await response.Content.ReadAsStreamAsync();
                    var streamReader = new StreamReader(stream);
                    responseText = streamReader.ReadToEnd();
                }

            
                // Convert the stream to JSON so that it is easier to iterate through
                // each item in the stream.
                dynamic myObj = JsonConvert.DeserializeObject(responseText);
                dynamic movies = myObj.movies;

                // Iterate through the collection of JSON objects to obtain information
                // each movie in the collection.
                foreach (dynamic movie in movies)
                {
                    string title = movie.title;
                    string summary = movie.synopsis;
                    string image = movie.posters.detailed;

                    // Create a Moviedata object by using movie information and add 
                    // that object to a collection.
                    results.Add(new MovieData(title, summary, image));
                 }
             
                hasExecutedQuery = true;
            }
            catch (Exception)
            {
                hasExecutedQuery = false;
                showErrorMessage();
            }
        }
        private async void showErrorMessage()
        {
            var msg = new Windows.UI.Popups.MessageDialog
                ("The service is unavailable or there was a problem with the service.");

            msg.Commands.Add(new Windows.UI.Popups.UICommand("Try again?"));

            msg.Commands.Add(new Windows.UI.Popups.UICommand("I'll try again later."));

            msg.DefaultCommandIndex = 0;
            msg.CancelCommandIndex = 1;

            var results = await msg.ShowAsync();

            if (results.Label == "I'll try again later.")
            {
                hasExecutedQuery = true;
                this.Results.Clear();
            }
            else
            {
                hasExecutedQuery = false;
                this.Results.Clear();
            }


        }

    }

Ctrl + Shift + A キーを押します [クラス] が選択されていることを確認します。 [新しい項目の追加] ダイアログボックスで、[クラス] をクリックし、「PickaFlickViewModel.cs」と入力します。 [追加] をクリックします。

PickaFlickViewModel.cs で、class PickaFlickViewModel {} を次のコードに置き換えます。

// Provides an object that returns movie data. You can bind to this class in the designer.
    // For example, by referencing this class in the ItemSource property of a GridView control. 
    public class PickaFlickViewModel
    {
// A Rotten Tomatoes API key is required. See https://go.microsoft.com/fwlink/?LinkId=313841 
        private static readonly string apikey = "Insert API Key Here";
        private static readonly string baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
        private static readonly string moviesSearchUrl = baseUrl + "/lists/movies/box_office.json?apikey=" + apikey;

        private static readonly Uri uri = new Uri(moviesSearchUrl);

        private readonly PickaFlickQuery query = new PickaFlickQuery(uri);
        
        // Property that returns a collection of MovieData objects. 
        public PickaFlickQuery Query
        {
            get
            {
                return this.query;
            }
        }
    }

重要

ロッテントマト API キーがある場合は、"Insert API Key Here" というテキストをそのキーに置き換えます。キーがないとアプリは想定どおりに動作しません。

Ctrl キーと Shift キーを押しながら S キーを押してすべての変更を保存し、Blend に戻ります。
Blend で、プロジェクトを再読み込みするかどうかを尋ねるメッセージが表示されます。 [はい] をクリックします。

DataContext を設定する

DataContext を設定することで、アプリに表示されるオブジェクトのソースデータを指定します。

DataContext を設定するには

Ctrl + B キーを押してプロジェクトをビルドすると、Visual Studio で行った変更が Blend で使用できるようになります。
ドキュメントウィンドウの上部にある [MovieDisplay.xaml] タブをクリックして、MovieDisplay.xaml が開いている状態にします。 [オブジェクトとタイムライン] パネルの [Grid] をクリックします。
[プロパティ] パネルで、[DataContext] の右側にある [新規] をクリックします。
[オブジェクトの選択] ダイアログボックスで、[PickaFlickViewModel] をクリックします。 [OK] をクリックします。

ヒント

リストが長すぎて見にくい場合は、ダイアログボックスの左下隅にある [すべてのアセンブリを表示する] チェックボックスをオフにします。

データのビューを作成する

ムービーアプリのデータを表示するデータバインディング GridView は簡単に作成できます。そのためには、[データ] パネルの DataContext セクションから Results ノードをデザインサーフェイスにドラッグします。 GridView コントロールおよび関連付けられた DataTemplate が自動的に作成され、データがデザインサーフェイスに表示されます。

PickaFlick アプリでは GridView コントロールを使用しません。 FlipView コントロールを使用します。これにより、リスト内の項目を簡単にめくることができるようになります。このビューはすばやく作成できます。そのためには、FlipView をプロジェクトに追加し、[オブジェクトとタイムライン] パネルで [結果] ノードを直接 FlipView にドラッグします。

注意

データのグリッドビューを作成し、その後で削除しても、元の DataTemplate は XAML に残っています。データの追加のグリッドビューを作成した場合は、別の DataTemplate が作成されて、その x:Key 値に数値が付加されます。たとえば、最初の DataTemplate の x:Key 属性が MovieTemplate の場合、2 番目の DataTemplate の x:Key は MovieTemplate1 になります。

FlipView コントロールを使用してデータのビューを作成するには

[アセット] パネルで、[コントロール] をクリックし、[FlipView] をダブルクリックします。
[データ] パネルの [データコンテキスト] セクションで [結果: (MovieData)] をクリックしてドラッグし、[オブジェクトとタイムライン] パネルで FlipView コントロールにドロップします。

ヒント

[結果] ノードが表示されていない場合は、そのノードが見つかるまで [データコンテキスト] セクションでノードを展開します。

データが FlipView コントロール内のデザインサーフェイスに表示されます。これで、データのレイアウトをカスタマイズする準備ができました。

ヒント

未承認のアクセス例外がトリガーされ、デザインサーフェイスに表示されている場合、API キーを再確認し、そのキーがコードに正しく入力されていることを確認してください。

データビューのスタイルを設定する

Flipview は適切な位置に表示され、データが読み込まれますが、ムービーは正しく表示されません。生成されたデータテンプレートのスタイルを設定して、想定した見栄えでデータが表示されるようにしてから、データバインディングを絞り込んで、必要なデータが表示されるようにすることができます。

データテンプレートをカスタマイズする

[結果] パネルをドラッグして FlipView にドロップしたとき、データテンプレートが自動的に生成されました。このテンプレートに変更を加えて、完成したサンプルアプリでのデータの表示に近づくようにカスタマイズできます。

生成されたテンプレートを編集するには

[オブジェクトとタイムライン] パネルで、[FlipView] を右クリックし、[追加テンプレートの編集]、[生成されたアイテムの編集 (ItemTemplate)] の順にポイントして、[現在のテンプレートの編集] をクリックします。
[オブジェクトとタイムライン] パネルで Ctrl キーを押しながら、[Border] と [StackPanel] をクリックします。右クリックし、[削除] をクリックします。
[オブジェクトとタイムライン] パネルの [Grid] をクリックします。 [プロパティ] パネルの [レイアウト] カテゴリで、[Width] の右側にある [自動に設定] をクリックします。この手順を [Height] に対して繰り返します。
[余白] の右側にある [詳細プロパティ] をクリックし、[リセット] をクリックします。

これで、カスタムテンプレートをデザインする準備ができました。

レイアウトグリッドを作成する

Grid レイアウトパネルは Blend プロジェクトの既定のパネルです。 Grid レイアウトパネルについて、Windows ストアアプリのデザインガイドラインに従うことにより、アプリのスタイルを Windows 8 スタイルガイドラインに準拠したものに設定できます。ガイドラインについて詳しくは、「アプリのページのレイアウト」を参照してください。

ガイドラインによると、Windows ストアアプリの基本単位は 20 x 20 ピクセルであり、各基本単位は 5 x 5 ピクセルのサブ単位に分割されます。レイアウトはヘッダー、左余白、コンテンツ領域で定義されたグリッドに基づきます。ガイドラインによると、グリッドの主要な要素は次のとおりです。

ページヘッダー ページヘッダーのベースラインは上部から 5 単位 (100 ピクセル) にする必要があります。
左余白 左余白は左端から 6 単位 (120 ピクセル) にする必要があります。
コンテンツ領域 上余白は上部から 7 単位 (140 ピクセル) にする必要があります。

ガイド (表示されるハンドル) を使用して、オブジェクトに変更を加えることができます。ガイドはオブジェクトの輪郭の四隅とそれらの中間に表示されます。ガイドはガイドラインとグリッド線の両端にも表示されます。グリッドを作成するときは、挿入ガイドに基づいて目的の位置にグリッド線を配置できます。

グリッド内の行と列のサイズを変更するオプションは 3 つあり、各オプションがグリッド内のオブジェクトの配列に影響します。サイズ変更オプションは次のとおりです。

ピクセル ピクセル値を使用して固定サイズを設定します。
Star (*) Star 値を使用します。パーセント値による幅の設定に似ています。
自動サイズ 相対的な幅を使用します。親オブジェクトのサイズが変更されると、グリッド内のオブジェクトのサイズも変更されます。

レイアウトグリッドでは、ピクセル幅と Star 幅の両方の列を使用します。

レイアウトグリッドの列を作成するには

元のテンプレートは 2 列 (グリッド列ガイドによって識別) と 1 行で構成されているとします。グリッド列ガイドをクリックし、右にドラッグします。
表示された値エディターで、ドロップダウン矢印をクリックして一覧を開き、[ピクセル] をクリックします。
値エディターで「120」と入力します。
作成した最初のガイドの左側にあるグリッドの上部をポイントし、オレンジ色の挿入ガイドをクリックします。さらに 2 回繰り返します。

この時点で 5 列が表示されています。
2 列目の値エディターで「1」と入力します。 [サイズ変更] オプションは [Star] (*) に設定したままにします。
3 列目の値エディターで「40」と入力します。 [サイズ変更] オプションを [ピクセル] に設定します。
4 列目の値エディターで「1」と入力します。 [サイズ変更] オプションは [Star] (*) に設定したままにします。
5 列目の値エディターで「120」と入力します。 [サイズ変更] オプションを [ピクセル] に設定します。

レイアウトの行を作成するには

デザインサーフェイスで、グリッドの左側の青い点線にポインターを合わせ、表示されるオレンジ色の挿入ガイドをクリックします。
表示された値エディターで、ドロップダウン矢印をクリックして一覧を開き、[ピクセル] をクリックします。値エディターで「100」と入力します。
先ほど作成したグリッド線の下部でポイントし、表示されるオレンジ色の挿入ガイドをクリックします。
値エディターの一覧を開き、[ピクセル] をクリックします。値エディターで「40」と入力します。

この設定により、2 番目のグリッド線が最初のグリッド線の 40 ピクセル下 (140 ピクセルマーク) に配置されます。

この時点で 5 列と 3 行が表示されています。

Blend の PickaFlick のレイアウトグリッド

これで、グリッドへのコンテンツの追加を開始する準備ができました。追加する最初のオブジェクトはロゴです。

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

[オブジェクトとタイムライン] パネルで [Grid] が選択されていることを確認します。 [プロジェクト] パネルの Assets フォルダーで、SmallLogo-Chicken.png をダブルクリックしてデザインサーフェイスに追加します。
[プロパティ] パネルの [レイアウト] カテゴリで、HorizontalAlignment を [Center] に、VerticalAlignment を [Bottom] に設定します。
[余白] の右側にある [詳細プロパティ] をクリックし、[リセット] をクリックします。
[共通] カテゴリで、[伸縮] を [なし] に設定します。

データバインディングを作成してスタイルを設定する

テンプレートを完成させるには、テンプレートにオブジェクトを追加していき、その後、それらのオブジェクトにデータをバインドします。想定した見栄えでデータが表示されるように、オブジェクトの表示に変更を加えます。使用するオブジェクトの種類は、バインドするデータの種類によって決まります。たとえば、ムービーポスターイメージは Image コントロールにバインドされます。ムービータイトルと概要は TextBlock コントロールにバインドされます。

ムービータイトルを追加して配置するには

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

新しい Textblock オブジェクトがデザインサーフェイスの左上隅に追加されます。 Esc キーを押してテキスト編集モードを終了します。
目的のグリッドの列と行に Textblock を配置するには、[プロパティ] パネルの [レイアウト] カテゴリで、次のように設定します。
- Row 0
  
  Textblock は先頭の行に配置されます。
- RowSpan 1
  
  タイトルは 1 行内に配置されます。
- Column 1
  
  列と行の番号は 0 から始まるため、この設定により Textblock は 2 列目に配置されます。
- ColumnSpan 3
  
  長いタイトルは複数の列にまたがって 1 行内に表示されます。
これで、TextBlock は 2 列目の右上に表示されます。
TextBlock を目的の行内に配置するには、[VerticalAlignement] を [Bottom] に設定します。

これで、TextBlock のテキストのスタイルを設定する準備ができました。次の手順では、テキストのフォントとサイズを設定し、テキストの色を変更します。

TextBlock のテキストのスタイルを設定するには

フォントのガイドライン (Windows ストアアプリ) によると、Windows 8 アプリのヘッダーには 42pt Segoe UI Light を使用する必要があります。

[プロパティ] パネルの [テキスト] カテゴリで、[フォント] ボックスの一覧から [Segoe UI Light] を選択します。
サイズについては、[フォント] ボックスの右側にある一覧から選択するか、値エディターに直接入力することができます。ヘッダーについては、「42pt」と入力し、Enter キーを押します。
文字の下部がテキストブロックのベースラインから浮いて表示されています。

この余分なスペースはディセンダー (小文字 g の尾部など) 用です。メインテキストのベースをベースラインに載るようにすると、ディセンダー用のスペースがすべてベースラインより下のタイトルに含まれることがあります。ベースラインを調整するには、[レイアウト] カテゴリで下余白を「-18」に設定します。

これで、テキストはベースラインに載りました。
[プロパティ] パネルの [ブラシ] カテゴリで、色スポイトをクリックします。

デザインサーフェイスの左上にあるチキンイメージをポイントします。ポイントしているチキンイメージの部分に応じて、TextBlock のテキストの色が変わります。目的の赤の色合いが見つかったら、イメージをクリックするとフォントの色が設定されます。

これで、ムービータイトルデータを TextBlock にバインドする準備ができました。

ムービータイトルデータを TextBlock オブジェクトにバインドするには

[共通] カテゴリで、[テキスト] の右側にある [詳細プロパティ] をクリックし、[データバインディングの作成] をクリックします。
[[TextBlock].Text のデータバインディングを作成] ダイアログボックスで、[Title] をクリックし、[OK] をクリックします。

次は、ムービーアートを追加し、スタイルを設定します。

ムービーアートを追加して配置するには

[オブジェクトとタイムライン] パネルで [Grid] を選択したら、[プロジェクト] パネルで Assets フォルダーにある Temp.png をデザインサーフェイスに追加します。

新しい Image オブジェクトが、Temp.png をソースとして、デザインサーフェイスに追加されます。
[プロパティ] パネルの [レイアウト] カテゴリで、次のように設定します。
- Row 3
- RowSpan 1
- Column 1
- ColumnSpan 1
[HorizontalAlignment] を [Center] に、[VerticalAlignment] を [Top] に設定します。
[余白] の右側にある [詳細プロパティ] をクリックし、[リセット] をクリックします。

ここでは一時イメージの縦横比の設定は省略します。ムービーイメージを Image オブジェクトにバインドした後に表示を修正します。

ムービーアートを Image オブジェクトにバインドするには

[共通] カテゴリで、[ソース] の右側にある [詳細プロパティ] をクリックし、[データバインディングの作成] をクリックします。
[[Image].Source のデータバインディングを作成] ダイアログボックスで、[Image] をクリックし、[OK] をクリックします。
[共通] カテゴリの [伸縮] ボックスの一覧で [均一] をクリックします。

次は、ムービー概要を追加し、スタイルを設定します。ムービー概要によっては、画面の高さより長くなる場合があります。概要のスクロールを有効にするには、ScrollViewer オブジェクトをテンプレートに追加し、TextBlock を ScrollViewer に追加して、テキストが表示されるようにします。

ムービー概要を追加して配置するには

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

新しい ScrollViewer オブジェクトがデザインサーフェイスの左上隅に追加されます。
[オブジェクトとタイムライン] パネルで ScrollViewer を選択したら、[レイアウト] カテゴリで [Width] の右側にある [自動に設定] をクリックします。この手順を [Height] に対して繰り返します。
Textblock を配置するには、[プロパティ] パネルの [レイアウト] カテゴリで、次のように設定します。
- Row 2
- RowSpan 1
- Column 3
- ColumnSpan 1
これで、ScrollViewer が 4 列目、3 行目の左上に表示されました。
[オブジェクトとタイムライン] パネルで ScrollViewer を選択したら、[アセット] パネルで TextBlock をダブルクリックして、2 番目の TextBlock をデザインサーフェイスに追加します。

新しい Textblock オブジェクトが ScrollViewer オブジェクトに追加されます。 Esc キーを押してテキスト編集モードを終了します。

TextBlock 要素をムービー概要データにバインドした後は、テキストのスタイルの設定が簡単になります。

ムービー概要データを TextBlock オブジェクトにバインドするには

[共通] カテゴリで、[テキスト] の右側にある [詳細プロパティ] をクリックし、[データバインディングの作成] をクリックします。
[[TextBlock].Text のデータバインディングを作成] ダイアログボックスで、[Summary] をクリックし、[OK] をクリックします。

これで、概要テキストのスタイルを設定する準備ができました。

TextBlock のテキストのスタイルを設定するには

フォントのガイドライン (Windows ストアアプリ) によると、Windows 8 アプリの本文フォントには Segoe UI Semilight を使用することが推奨されています。

[プロパティ] パネルの [テキスト] カテゴリで、[フォント] ボックスの一覧から [Segoe UI Semilight] を選択します。
サイズについては、[フォント] ボックスの右側にある一覧から選択するか、値エディター内でクリックし、上向きおよび下向きの矢印を使用してフォントサイズを選択します。 Enter キーを押します。デザインサーフェイスでの表示を確認することで、目的のフォントサイズを選択します。
[プロパティ] パネルの [ブラシ] カテゴリで、色スポイトをクリックして画面から色を選択するか、カラーエディター内でクリックしてパレットから色を選択します。

さまざまなデバイスディスプレイでプレビューする

Blend ではアプリのライブビューが表示されるため、アプリが想定どおりに表示されるかどうかをアプリを実行せずに確認できます。また、[デバイス] パネルを使用して、アプリがさまざまなデバイスディスプレイでどのように表示されるかをプレビューすることもできます。

[デバイス] パネルでの表示を有効にするには

[表示] オプションを有効にするには、[スコープを戻す] をクリックしてテンプレート編集モードを終了します。

ヒント

すべてのオプションがすべてのプロジェクトまたは項目テンプレートに対して有効になるわけではありません。たとえば、[ハイコントラスト] と [テーマ] の設定は、選択したプロジェクトテンプレート (グリッドアプリ、ハブアプリ、分割アプリなどのプロジェクトテンプレート) と項目テンプレート (分割ページ、項目ページ、ハブページなどの項目テンプレート) に適用されます。

一部のオプションはマニフェストデザイナーで有効にする必要があります。たとえば、[最小幅] を [320px] に設定した場合、このオプションはアプリマニフェストで有効にする必要があることを警告するメッセージが表示されます。詳細については、「マニフェストデザイナーを使用したアプリケーションパッケージの構成」を参照してください。

Blend のデバイスパネル

組み込みのビヘイビアーを追加する

アプリを実行すると、メインページが表示され、チキンボタンイメージにポインターを合わせると、そのイメージが変わります。ボタンをクリックしても何も起こりません。クリックイベントトリガーがコントロールに定義されていないためです。組み込みのビヘイビアーを使用して、NavigateToPageAction をボタンに追加することで、このボタンをクリックするとムービー表示ページが開くようにできます。

NavigateToPageAction ビヘイビアーを Button コントロールに追加する

MainPage.xaml に切り替えます。 [オブジェクトとタイムライン] パネルで [Button] を選択したら、[ビヘイビアー] カテゴリの [アセット] パネルで NavigateToPageAction をダブルクリックして Button に追加します。

[EventTriggerBehavior] と [NavigateToPageAction] が [オブジェクトとタイムライン] パネルに表示されます。
[プロパティ] パネルに [共通] カテゴリが表示されます。 [TargetPage] ドロップダウンリストで、[MovieDisplay.xaml] をクリックします。

ヒント

別の方法として、[オブジェクトとタイムライン] パネルで [EventTriggerBehavior] をクリックし、[プロパティ] パネルで [Actions (コレクション)] ボタンをクリックできます。[DependencyObjectCollection Editor: Actions] ダイアログボックスの [プロパティ] セクションで、[TargetPage] ドロップダウンリストの [MovieDisplay] をクリックします。

F5 キーを押して、アプリをビルドおよび実行します。チキンボタンをクリックしてムービー詳細ページを開きます。画面の左右にある矢印を使用して、新作ムービーをクリックしていきます。

Alt キーを押しながら F4 キーを押して、アプリを閉じます。

次の手順

これが実際のアプリであれば、次の手順はアプリの公開になります。 Windows ストアにアプリを公開する方法の詳細については、「Windows ストアにアプリを公開する作業の概要」を参照してください。

次の方法で共有

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

項目テンプレートをプロジェクトに追加する

空白のページの項目テンプレートを追加するには

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

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

NuGet Package Manager を使用して Json.NET をインストールするには

PickaFlick コードをプロジェクトに追加するには

コードをプロジェクトに追加するには

DataContext を設定する

DataContext を設定するには

データのビューを作成する

FlipView コントロールを使用してデータのビューを作成するには

データビューのスタイルを設定する

データテンプレートをカスタマイズする

生成されたテンプレートを編集するには

レイアウトグリッドを作成する

レイアウトグリッドの列を作成するには

レイアウトの行を作成するには

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

データバインディングを作成してスタイルを設定する

ムービータイトルを追加して配置するには

TextBlock のテキストのスタイルを設定するには

ムービータイトルデータを TextBlock オブジェクトにバインドするには

ムービーアートを追加して配置するには

ムービーアートを Image オブジェクトにバインドするには

ムービー概要を追加して配置するには

ムービー概要データを TextBlock オブジェクトにバインドするには

TextBlock のテキストのスタイルを設定するには

さまざまなデバイスディスプレイでプレビューする

[デバイス] パネルでの表示を有効にするには

組み込みのビヘイビアーを追加する

NavigateToPageAction ビヘイビアーを Button コントロールに追加する

次の手順

その他のリソース

次の方法で共有

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

項目テンプレートをプロジェクトに追加する

空白のページの項目テンプレートを追加するには

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

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

NuGet Package Manager を使用して Json.NET をインストールするには

PickaFlick コードをプロジェクトに追加するには

コードをプロジェクトに追加するには

DataContext を設定する

DataContext を設定するには

データのビューを作成する

FlipView コントロールを使用してデータのビューを作成するには

データ ビューのスタイルを設定する

データ テンプレートをカスタマイズする

生成されたテンプレートを編集するには

レイアウト グリッドを作成する

レイアウト グリッドの列を作成するには

レイアウトの行を作成するには

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

データ バインディングを作成してスタイルを設定する

ムービー タイトルを追加して配置するには

TextBlock のテキストのスタイルを設定するには

ムービー タイトル データを TextBlock オブジェクトにバインドするには

ムービー アートを追加して配置するには

ムービー アートを Image オブジェクトにバインドするには

ムービー概要を追加して配置するには

ムービー概要データを TextBlock オブジェクトにバインドするには

TextBlock のテキストのスタイルを設定するには

さまざまなデバイス ディスプレイでプレビューする

[デバイス] パネルでの表示を有効にするには

組み込みのビヘイビアーを追加する

NavigateToPageAction ビヘイビアーを Button コントロールに追加する

次の手順

その他のリソース

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

データビューのスタイルを設定する

データテンプレートをカスタマイズする

レイアウトグリッドを作成する

レイアウトグリッドの列を作成するには

データバインディングを作成してスタイルを設定する

ムービータイトルを追加して配置するには

ムービータイトルデータを TextBlock オブジェクトにバインドするには

ムービーアートを追加して配置するには

ムービーアートを Image オブジェクトにバインドするには

さまざまなデバイスディスプレイでプレビューする