めとべや東京 #6 で使用したpptファイル

マイクロソフトの田中達彦です。2014/11/15に開催されためとべや東京 #6 で「ユニバーサルWindowsアプリの勘所」というセッションを持たせていただきました。ちょうどVisual Studio 2015 Previewの発表直後だったので、その話を少し入れつつセッションを行いました。そのときに使用したスライドを公開します。 マイクロソフト田中達彦 141115Metbeya_ttanaka.pdf

0

Windowsストア アプリ 縦書きビューワー おまけ04 ~ユニバーサル Windows アプリ化~

マイクロソフトの田中達彦です。以前に連載していたWindowsストアアプリの縦書きビューワーのユニバーサルWindowsアプリ版を作ってみました。実は6月くらいに作っていたのですが、しばらく放置していました。この度、めとべや 東京 #6というコミュニティイベントで高橋忍エバのピンチヒッターとして話すことになったので、そこのネタで使おうと思いドラフト版を公開します。 Windows、Windows Phoneそれぞれの固有のソースはなく、共有プロジェクトに #if を使ってWindows版とWindows Phone版を切り分けています。詳細はソースのコメントをご参照ください。 マイクロソフト田中達彦 Dazai_hashiremerosu_UnivApp_20141110_2ndDraft.zip

0

アプリの高DPI(High DPI)対応について 第2回 ~ アプリケーションの高DPIへの対応レベル ~

マイクロソフトの田中達彦です。本連載では、今後3年以内に避けて通れないと予測される高DPI(High DPI)への対応について連載します。 [DPI対応アプリケーションの種類]アプリケーションが高DPIに対応しているかどうかは、以下の3つのレベルで示されます。 Not DPI Aware : 高DPIに対応していないアプリケーションSystem DPI Aware : 高DPIに対応しているアプリケーション。ただし、モニターごとのDPIには対応していません。Per monitor DPI Aware : Windows 8.1でサポートされたモニターごとのDPIの設定にも対応しています。 Not DPI Awareアプリは、96DPIのモニターで表示されることを前提にしたアプリです。もしこのアプリを、144DPI相当すなわち150%のDPIスケールのモニターで表示させると、OS側が自動的にアプリを拡大して表示します。この自動的に拡大する機能は、Windows Vista以降でサポートされています。アプリを自動的に拡大する場合は、一旦96DPI相当で描画した後に150%に拡大します。そのため、Not DPI Awareアプリを150%などに設定しているモニターで表示させると、文字などのUI要素がぼやけてしまうことがあります。アプリケーションの設定によっては、自動的に拡大しないようにもできます。この方法は後述します。 System DPI Awareアプリは、システムで設定したDPIのスケールに対応したアプリです。System DPI Awareアプリの場合は、OSによって自動的に拡大/縮小されずに表示されます。ただし、DPIが動的に変わることに対しては対応していません。 Per Monitor DPI-Awareアプリは、DPIのスケールが動的に変わることに対応したアプリです。DPIが動的に変わることは、モニターごとに異なるDPIを設定していて、アプリがモニター間を移動するときに発生します。例えばプライマリモニターが100%、セカンダリモニターが150%に設定されているとき、プライマリモニターに表示しているアプリをセカンダリモニターに移動させると、その途中でDPIのスケールが100%から150%に変わります。モニターごとのDPIに対応していないWindows 8以前のOSでは、DPIスケールが動的に変わることはありません。 [各テクノロジの高DPIへの対応]UIを構築するテクノロジは、それぞれデフォルトで以下のような高DPIの対応レベルになっています。 Windowsフォーム : Not DPI AwareWPF : System DPI AwareMFC : System DPI AwareWindowsストアアプリ : Per Monitor DPI Aware これらは、最新のバージョン(現段階でVisual Studio 2013に搭載されているライブラリ)を使用したときの対応レベルです。例えばVisual…

0

de:code前夜 #decode14

マイクロソフトの田中達彦です。いよいよde:codeの開催が明日に迫りました。de:codeは、マイクロソフトがお送りする渾身のテクニカルイベントです。 僕自身は、Devicesトラックのトラックオーナーをしていました。トラックオーナーとは、そのトラックの内容やクオリティをチェックし、有償イベントとしてふさわしいセッションを提供する役割を担っています。Devicesトラックには全部で24のセッションがあります。どのセッションもお勧めですので、de:codeに参加される方は、ぜひ興味がある内容のセッションにご参加ください。 僕自身も、3つのセッションを担当しています。今は、最終段階の調整をしています。担当しているセッションのスライドをチラ見せしちゃいます。 [5/29 15:20-16:10  XAML による Universal Windows アプリ 徹底解説] [5/29 17:40-18:30  アプリ構築のための次世代 .NET テクノロジ] [5/30 10:00-10:50  既存デスクトップアプリの最新 OS への対応] セッションをお楽しみに! マイクロソフト田中達彦

0

Build 2014とde:code #decode14

マイクロソフトの田中達彦です。2週間ほど経ってしまいましたが、2014年4月2日~4日にBuild 2014という開発者向けイベントが米国サンフランシスコで開催されました。Buildというイベントはマイクロソフトの最新技術に関するカンファレンスで、新しいテクノロジを発表する場でもあります。 Buildそのものに関しては、MVA(Microsoft Virtual Academy)で速報をお届けしました。http://www.microsoftvirtualacademy.com/training-courses/build2014-sokuhouこの速報では、Buildでの発表内容からいくつかのテクノロジを抜粋して簡単に紹介しています。 もっとこってり最新テクノロジを解説する場として、日本でde:codeというイベントを2014年5月29日~30日に開催します。de:codeではセッションをいくつかのトラックに分類しています。僕自身も、Devicesというトラックのオーナーをしていて、他のトラックオーナーやスピーカーとともにセッションを作り上げていっています。 Devicesトラックの概要文(青字の部分)をWebサイトから持ってきました。 業務においても、個人的な用途においても、今後デバイスの多様性や役割が向上することは間違いないでしょう。PC で動作をすることを前提に開発、設計されてきた Web やアプリケーションを、その開発スキルや資産を活かしつつ、あるいは、新しいフレームワークを取り込みながら、デバイス & サービス時代に対応するための手法や最新の技術情報をお届けします。 Devicesトラックでは、主にクライアントのソフトやアプリを開発している開発者の方に、マイクロソフトがどのような方向に進もうとしているのか、そしてそのためにどのようなテクノロジを選べばよいのかという答えを、Devicesトラックのセッションを通じてお届けします。 Buildで発表されたWindows 8.1 updateでは、マウスやキーボードでの操作性を向上させています。デスクトップのタスクバーにWindowsストア アプリをピン止めできたり、ストア アプリからデスクトップアプリにタスクバーを使って切り替えれたりと、今まで隔離していた感のあるデスクトップ アプリとストア アプリの行き来がスムーズになっています。さらに、サイドローディングと呼ばれる方法でストア アプリを直接PCにインストールしたときは、ストア アプリからPC内のWin32アプリとやり取りできるようになりました。これらの変更は、ストア アプリをビジネスで使う際の利便性を大幅に向上させています。すなわち、ストア アプリは一般消費者向けだけではなく、ビジネスの世界でも活用できるのです。 de:codeでは奥の深いセッションを用意するとともに、ストア アプリの開発をよく知らない方が体系的に学べるセッションも用意しています。例えば、以下のセッションに順に参加することにより、ビジネスで使うストア アプリについて学ぶことができます。 Windows アプリ開発、どこへ向かうのか。どう考えるべきなのか  ↓Windows ストア アプリの開発、テスト、デバッグ、ストアへの提出まで  ↓XAML による Universal Windows アプリ 徹底解説  ↓業務システム/LOB アプリをタブレットに注入! Windows ストア アプリの開発と展開  ↓デスクトップ アプリケーションと Windows ストア アプリの連携(各セッションタイトルは最終版のものではありません。変更する可能性があります) 1つ新しいテクノロジを紹介します。セッションタイトルの中に、Universal Windowsアプリという文言があります。Universal Windowsアプリとは、Windows 8.1とWindows Phone 8.1で一部のソースコードを共有できるアプリです。Windows…

0

名刺アプリ作成のすすめ(Windows 8.1 アプリ開発入門) 第10回 ~ アプリ内でのWebサイトの表示 ~

マイクロソフトの田中達彦です。本連載では、Windows 8.1に対応した名刺アプリの作り方を通じて、アプリの開発方法を説明します。今回は、アプリ内でWebサイトを表示させる方法を説明します。 [WebViewコントロール]Windowsストア アプリからWebサイトを表示させるとき、2つの方法があります。1つは別のウィンドウでWebサイトを表示させる方法です。別ウィンドウでWebサイトを表示させる方法は、第8回で説明しました。もう1つは、アプリ内でWebサイトを表示させる方法です。アプリ内でWebサイトを表示させるときには、WebViewというコントロールを使用します。このWebViewは、コントロールの内部で任意のWebサイトを表示させることができます。下図は、WebViewを使用してアプリ内でWebサイトを表示している例です。 [別のページの作成]それでは、作成中のアプリにWebViewを使ったページを追加してみましょう。Visual Studioのソリューション エクスプローラーのプロジェクト名が表示されているところを右クリックし、[追加]-[新しい項目]を選択します。 新しい項目の追加ダイアログが表示されたら、基本ページを選んで[追加]ボタンを押します。このときのファイル名のデフォルトはBasicPage1.xamlです。 このファイル名を任意の名前に変更できますが、ここではデフォルトの名前のまま使用します。もしファイル名を変えたときは、この後の記事のBasicPage1という部分を読み替えてください。基本ページと似ているものに、空白のページというものがあります。基本ページと空白のページの大きな違いは、戻るボタンがついているかどうかです。今回追加するページは、トップページからナビゲーションされるように設定するので、再びトップページに戻れるように空白のページではなく基本ページを使用しています。 BasicPage1が追加されたら、Visual Studioの中央にデザイン画面が表示されます。左側にあるツールボックスの中からWebViewと書かれたコントロールを探し出し、デザイン画面の下のほうにドラッグ アンド ドロップします。 もしツールボックスが表示されていないときは、メニューの[表示]-[ツールボックス]を選ぶと表示されます。WebViewは「すべてのXAMLコントロール」を展開すると出てきます。 [WebViewの大きさを整える]WebViewをドラッグ アンド ドロップしたままの状態では、WebViewが小さい正方形として表示されます。このままではWebサイトを表示させるには小さすぎますので、WebViewの大きさを変更しましょう。ここでWebViewの端をドラッグすると大きくなりますが、その方法の場合は不都合が出てしまいます。端をドラッグして大きくする方法では、WebViewの幅や高さがドラッグした大きさで固定されます。もし違う解像度のPCで見たときには、幅と高さが固定されているためWebViewの周囲の黒い余白の部分が大きすぎたり小さすぎたりする可能性があります。そこで、WebViewの大きさを幅と高さで決めるのではなく、アプリが表示されている画面の大きさによって変わるように設定します。 まず、WebViewコントロールの幅と高さの情報をリセットします。デザイン画面でWebViewを選択している状態にして、プロパティウィンドウを表示させます。プロパティウィンドウの中からWidthとHeightと書かれたところを見つけ出し、右端にある黒い四角をクリックします。以下のようなメニューが表示されたら、[リセット]を選択します。 これで、幅と高さの情報をリセットしました。 もしプロパティウィンドウにWidthやHeightの表示がなく、イベント名が並んでいる状態だったときは、プロパティウィンドウの右上にあるスパナの形をしたボタン () をクリックすることで、プロパティの表示に戻ります。 次に、WebViewコントロールの横方向と縦方向の配置状況を変更します。プロパティウィンドウでHorizontalAlignmentとVerticalAlignmentと書かれたところを見つけ、以下の図のようにそれぞれ4つあるボタンのいちばん右にあるStretchボタンを選択します。 これで、アプリが表示されている場所の大きさに合わせてWebViewコントロールの大きさが変わるようになりました。 最後の仕上げとして、上下左右の余白を設定します。プロパティウィンドウにMarginという余白を設定するためのプロパティが表示されています。ここに、上の図のように左右の余白を120、上の余白を0、下の余白を60に設定します。上の余白を0に設定しているものの、デザイン画面上は上に余白が140px分あるように表示されます。WebViewコントロールを貼り付けている先はGridというコントロールで、そのGridはあらかじめ上下に分割されている状態で定義されています。その分割している線が、上から140pxの場所にあります。WebViewコントロールをツールボックスからドラッグ アンド ドロップしたときに、「画面の下のほうにドラッグ アンド ドロップ」と書いています。これは、上下に分割されている場所のうち、下のほうにドロップしてもらうために入れた文言です。 Windowsストアアプリの場合、余白の取り方のガイドラインがあります。コンテンツを表示させる領域の余白は、上余白が140px、左余白が120pxというガイドラインがあります。今回は、そのガイドラインを踏襲した余白を設定しました。ガイドラインについては、以下のWebサイトをご参照ください。http://msdn.microsoft.com/ja-jp/library/windows/apps/hh872191.aspx#_______ [特定のWebサイトの表示]現段階ではWebViewコントロールを貼り付けただけで、特定のWebサイトを表示させる設定をしていません。それでは、BasicPage1が読み込まれたときに特定のWebページを表示させるように設定しましょう。 最初に、貼り付けているWebViewコントロールに名前をつけます。デザイン画面でWebViewコントロールを選択するか、XAMLのコードのWebViewの行にキャレットを置いて、プロパティウィンドウを見ます。プロパティウィンドウのいちばん上にある名前の部分に、「<名前なし>」と表示されているので、ここにwebView1と入力します。 これで貼り付けているWebViewコントロールに、webView1という名前が付きました。 次に、Visual Studioのドキュメント アウトラインを表示し、下図のようにpageRootと書かれた部分を選択します。 そしてプロパティウィンドウのイベントボタン(右上の稲妻ボタン)を押して、pageRootのイベント一覧を表示させます。イベントの中からLoadedと書かれたイベントを探し、その右側のテキストボックスをダブルクリックします。Loadedイベントは、このページが読み込まれたときに発生するイベントです。 ダブルクリックすることにより、Loadedに対応したイベントハンドラーが自動的に生成され、以下のようにBasicPage1.xaml.csに作られたイベントハンドラーが表示されます。 ここに、以下の黄色でマーカーしたコードを入力します。 private void pageRoot_Loaded(object sender, RoutedEventArgs e){    webView1.Navigate(new Uri(“http://www.microsoft.com/”));} URLは、任意のものに変更してしまって構いません。これでBasicPage1側の実装は終わりです。 [トップページからのナビゲーション]トップページの2つめのボタンをクリックしたら、BasicPage1が表示されるように実装しましょう。トップページであるHubPage1.xamlを表示し、以下のように2つめのボタンのContentの部分を「Webサイト」に変更します。 このContentに設定した文字列が、アプリを実行したときにボタンに表示されます。キャレットが2つめのボタンの行にあるままの状態で、プロパティウィンドウにイベント一覧を表示させます。先ほどイベントボタンを押しているので、イベントの一覧が表示されているはずです。もしイベントの一覧が表示されていなければ、プロパティウィンドウの右上のイベントボタンを押してください。 プロパティウィンドウにClickと書かれたところがあるので、その右側のテキストボックスをダブルクリックします。button2_Clickというイベントハンドラーが自動生成されますので、ここに黄色でマーカーしたコードを入力します。 private void button2_Click(object sender,…

0

名刺アプリ作成のすすめ(Windows 8.1 アプリ開発入門) 第9回 ~ ハブ ページ (トップページ) の追加 ~

マイクロソフトの田中達彦です。本連載では、Windows 8.1に対応した名刺アプリの作り方を通じて、アプリの開発方法を説明します。今回は、アプリの起動直後に表示させるハブ ページを追加します。 [第8回までのアプリ]第8回までのアプリは、起動直後にGroupedItemsPageが表示されていました。このページには、花札の画像などが表示されています。 このままでもよいのですが、公開している名刺アプリのように、起動直後に表示されるトップページにハブページを使ってみましょう。起動直後のイメージは、このような感じです。 [ハブページの追加]ハブページを追加するには、Visual Studioのソリューション エクスプローラーのプロジェクト名が表示されているところの上で右クリックし、[追加]-[新しい項目]を選択します。 新しい項目の追加というダイアログが表示されたら、ハブページを選び、必要に応じてファイル名を変更して[追加]ボタンを押します。ここではデフォルトのファイル名であるHubPage1.xamlのままで説明します。ファイル名を変更したときは、この後の説明のHubPage1という部分を変更したファイル名に置き換えてください。 [起動直後のページの変更]ハブページを追加しただけでは、アプリを起動しても今までのGroupedItemsPageが表示されます。アプリ起動直後に表示するページはApp.xaml.cs内で定義されているので、その部分を変更します。App.xaml.csにOnLaunchedというイベントハンドラーがあります。このイベントハンドラーは、アプリの起動直後に呼ばれます。その中に、以下のコードがあります。この黄色くマーカーした部分で、最初に表示させるページを指定しています。 if (rootFrame.Content == null){    // ナビゲーションの履歴スタックが復元されていない場合、最初のページに移動します。    // このとき、必要な情報をナビゲーション パラメーターとして渡して、新しいページを    // 作成します    rootFrame.Navigate(typeof(GroupedItemsPage), e.Arguments);} このGroupedItemsPageをHubPage1に変更すると、起動直後に追加したハブページが呼ばれるようになります。 [ハブページとは]ハブページは、異なる表示形式のセクションと呼ばれるものを、横に並べて表示させるページです。グリッドページが同じ大きさの画像を並べていたのに対し、ハブページはセクションごとに表示形式を変えられるため、多彩な表現ができます。 デフォルトのハブページには、以下のように4つのセクションが含まれています。 このハブページには、最初のセクション(いちばん左のセクション)に大きな画像を表示させるスペースがあります。マイアプリケーションと書かれたところの下のほうの画面上黒く見える部分が、画像を表示させるスペースです。次のセクションにはSection 1というタイトルが表示され、その下に画像を表示するスペースとその下にテキストでの説明文があります。セクションの数は自由に設定できます。 Windows 8.1に標準でついているBINGニュースやBINGファイナンスのアプリも、ハブページを使用しています。 [背景と画像の設定]今のままだととてもシンプルな見栄えなので、アプリ全体の背景と最初のセクションの画像を設定しましょう。 まずは画像を用意します。画像は任意の画像で構いません。ここでは、Windows アプリ アート ギャラリーに登録されている画像を使います。使う画像は、CGの中からCG002.jpgとCG005.jpgを選びました。CG002.jpg CG005.jpg これらのファイルをアート キャラリーからダウンロードしたら、Visual Studioのソリューション エクスプローラーのAssetsフォルダーにドラッグ アンド ドロップします。 CG005.jpgは、アプリ全体の背景として使用しましょう。Visual StudioでHubPage1.xamlを開いた状態にして、ドキュメント アウトラインを表示させます。もしドキュメント アウトラインが表示されていないときは、メニューの[表示]-[その他のウィンドウ]-[ドキュメント アウトライン]を選択します。 ドキュメント アウトラインには、HubPage1.xamlに記載されている要素が表示されています。ここではアプリ全体を覆っている[Grid]を選択します。 そしてプロパティ ウィンドウでBackgroundと書かれたところを見つけ、その下にあるタイルブラシボタン  を選びます。さらにその下にあるImageSourceでは、先ほどAssetsフォルダーにドロップしたCG005.jpgを選択します。 これでアプリ全体の背景を設定しました。 次に、最初のHubSectionに表示させる画像を設定します。先ほどと同じように、HubPage1.xamlを表示した状態でドキュメント アウトラインを開き、今度はHubSectionと書かれているものの中のいちばん上のものを選択します。…

0

名刺アプリ作成のすすめ(Windows 8.1 アプリ開発入門) 第8回 ~ グリッド ページ (著書一覧ページ) からWebサイトにとばす ~

マイクロソフトの田中達彦です。本連載では、Windows 8.1に対応した名刺アプリの作り方を通じて、アプリの開発方法を説明します。今回は、第7回で編集した画像データを表示しているページを修正していきます。 [第7回までのグリッド ページ]第7回までの記事の内容を実装したアプリを起動させると、以下のような画面が表示されます。 ここで花札の画像をクリックしたり、「花札 >」と書かれた場所をクリックすると、以下の画像が表示されます。 花札の画像をクリックしたときはItemDetailPage.xamlが表示され、「花札 >」をクリックするとGroupDetailPage.xamlが表示されるのです。 [特定のWebサイトの表示]ItemDetailPageやGroupDetailPageをそのまま使用しても良いのですが、ここでは画像をクリックすると特定のWebサイトを表示させるように変更します。Windowsストアに公開している名刺アプリでも、特定のWebサイトを表示させるようにしています。 表示させるWebサイトのURLは、SampleData.jsonに記載します。SampleData.jsonは既に第6回の記事で変更しています。そのとき、個々のデータのTitle、Subtitle、ImagePathを変更しました。アプリでまだ使用していない項目としては、DescriptionとContentがあります。どちらを使用してもよいのですが、ここではDescriptionを利用しましょう。今はSampleData.jsonの項目を変えずに利用しています。もちろん、項目そのものを変えてしまっても構いません。 それでは、松に鶴のデータのDescriptionの部分を以下のように任意のURLに変更します。ここではhttp://www.microsoft.com/ja/jp/に変更しています。 次に、GroupedItemsPage.xaml.csを変更します。変更する場所は、ItemView_ItemClickの中です。このイベントハンドラーは、アイテムがクリックされたときに呼ばれます。変更前はクリックしたアイテムの詳細が表示されます。これを変更後のコードの黄色でマーカーしているように変更します。 (変更前)void ItemView_ItemClick(object sender, ItemClickEventArgs e){    // 適切な移動先のページに移動し、新しいページを構成します。    // このとき、必要な情報をナビゲーション パラメーターとして渡します    var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;    this.Frame.Navigate(typeof(ItemDetailPage), itemId);} (変更後)async void ItemView_ItemClick(object sender, ItemClickEventArgs e){    // 適切な移動先のページに移動し、新しいページを構成します。    // このとき、必要な情報をナビゲーション パラメーターとして渡します    var url = ((SampleDataItem)e.ClickedItem).Description;     if(url.Substring(0, 5) == “http:”)        await Windows.System.Launcher.LaunchUriAsync(new Uri(url));} ここでは、SampleData.jsonのDescriptionに書かれている文字列を取得し、もしその文字列の最初の5文字が http: で始まるものであれば、そのWebサイトを表示させています。これを実行すると、以下のようになります。 [グループ詳細ページの非表示]「花札…

0

Windowsストア アプリ開発 Tips集012 ~レビューページへの誘導~

マイクロソフトの田中達彦です。本連載では、C#/XAML でWindowsストアアプリを開発するときにヒントを紹介します。 [レビューとは]Windowsストア アプリをインストールした人は、そのアプリに対してレビューを行うことができます。星5つを最高とする評価と、オプションでコメントを残すことができます。評価は以下のようにWindowsストアに表示されます。 アプリをインストールするときに、評価が高いアプリのほうがインストールされやすいので、評価を高くできる可能性がある方法を紹介します。 [サンプルについて]添付のサンプルは、3回起動するごとに以下のメッセージダイアログを表示します。 このダイアログで「いいえ」を押すと、レビューに行かずにダイアログが閉じます。「はい」を押すと、以下のメッセージダイアログを表示します。 ここでダイアログを閉じると、以下のようにレビューページが表示されます。 ポイントは、アプリに満足していない人には評価してもらわず、アプリに満足している人のみに評価を求めるという点です。この手法により、高い評価のみを得られる可能性が高まります。 [自分のアプリのレビューページ]サンプルの最後のほうに以下のようなコードがあります。 // レビューページの表示。PFN= のあとに、自分のアプリのディープリンクを入れるawait Windows.System.Launcher.LaunchUriAsync(new Uri(“ms-windows-store:REVIEW?PFN=94909f7c-d5a9-4f98-85f2-356164de9e49”)); この中の黄色でマーカーしている PFN= に続く数字とアルファベットの並びを自分のアプリのものに変更します。この並びは、開発者ダッシュボードを見ると知ることができます。既に公開しているアプリであれば、開発者ダッシュボードでそのアプリの詳細ページを開くと、以下のようにアプリの紹介に使えるURLが書かれています。この赤い部分の情報を使用します。 まだ公開していないアプリの場合は、以下のようにそのアプリのリリース用の情報を入力するページを表示し、そのページのURLに入っている情報を使用します。  [前後の記事]011 ~コントロールの明るさを一発で変える~ マイクロソフト田中達彦 ReviewSample.zip

1

名刺アプリ作成のすすめ(Windows 8.1 アプリ開発入門) 第7回 ~ グリッド ページ (著書一覧ページ) を整える ~

マイクロソフトの田中達彦です。本連載では、Windows 8.1に対応した名刺アプリの作り方を通じて、アプリの開発方法を説明します。今回は、第6回で作成した画像データを表示しているページを修正していきます。 [XAMLとC#]WindowsストアアプリでのUIの記述方法の1つに、XAML(ザムルと読みます)があります。XAMLはマークアップ言語の一種で、開発言語であるC#やVisual Basic、C++と組み合わせて使用します。ここでは開発言語としてC#を使用していますので、C#とXAMLを組み合わせて使います。UI部分をXAMLで表現し、ロジックの部分をC#で記述します。 Visual Studioで作成したグリッド アプリケーションには、XAMLとC#をペアで生成しているファイルが4つあります。1つはアプリケーションの基本部分を構成しているApp.xamlとApp.xaml.csのペアです。他の3つは、グリッド アプリケーションの3階層をそれぞれ実装しているGroupedItemsPage.xamlとGroupedItemsPage.xaml.csのペア、GroupDetailPage.xamlとGroupDetailPage.xaml.csのペア、ItemDetailPage.xamlとItemDetailPage.xaml.csのペアです。 今回は、この中でGroupedItemsPage.xamlを変更します。 [画像の大きさの変更]前回は、トップページに花札の画像を表示するところまで作りました。実行すると、以下の画面が表示されます。 まずは、花札を表示する部分の大きさを変えてみましょう。Visual Studioのソリューション エクスプローラーに表示されているGroupedItemsPage.xamlをダブルクリックします。すると、以下のように画面中央に黒いデザイン画面と、その下にXAMLのコードが表示されます。XAMLのコードの以下の場所を見つけ出し、黄色くマーカーしているWidthの値を250から160に変更します。これによって、幅が小さくなります。<GridView.ItemTemplate>    <DataTemplate>        <Grid HorizontalAlignment=”Left” Width=”250″ Height=”250″>            <Border Background=”{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}”>                <Image Source=”{Binding ImagePath}” Stretch=”UniformToFill” AutomationProperties.Name=”{Binding Title}”/>            </Border>            <StackPanel VerticalAlignment=”Bottom” Background=”{ThemeResource ListViewItemOverlayBackgroundThemeBrush}”>                <TextBlock Text=”{Binding Title}” Foreground=”{ThemeResource ListViewItemOverlayForegroundThemeBrush}” Style=”{StaticResource TitleTextBlockStyle}” Height=”60″ Margin=”15,0,15,0″/>                <TextBlock Text=”{Binding Subtitle}” Foreground=”{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}” Style=”{StaticResource CaptionTextBlockStyle}” TextWrapping=”NoWrap” Margin=”15,0,15,10″/>            </StackPanel>        </Grid>    </DataTemplate></GridView.ItemTemplate> このWidthなどの要素をプロパティと呼んでいます。直接XAMLのコードを編集してもいいですし、Visual Studioの右下に表示されているプロパティ…

0