SkyDrive へ移動
ダウンロードしたテンプレートは、『C:\Users\ユーザー名\Documents\Visual Studio 2012\Templates\ProjectTemplates\Visual C#\Windows Store』に保存します。 Windows Store フォルダは最初は存在しないので作成します( 好きな名前のフォルダでも Visual Studio から利用できます )ソースコード表示 仕様 ❶ Page.Resources で XAML 内で利用する文字列を定義 ❷ テキストエリアを設置( ファイルの処理を想定しているので Package.appxmanifest に設定済 ) ❸ AppBar を XAML で定義 (ボタンを左側2つ、右側2つ定義) ❹ それぞれのボタンにイベントを定義 ❺ 保存ボタンのイベントで、MessageDialog の利用サンプルを実装 ❻ MessageDialog のイベントを別のソースコードに定義( partial ) ❼ TextResource.cs に、StaticResource 用のクラスを定義 ❽ MessageDialog 処理用の MsgBox クラス プロジェクト用固定文字列の定義部分
<Page.Resources> <local:TextResource x:Key="GlobalText" PageTitle="ストアブランク テンプレート" AppName="lightbox サンプルアプリケーション" /> </Page.Resources>
プロジェクト用固定文字列の参照部分
<TextBlock
DataContext="{StaticResource GlobalText}"
HorizontalAlignment="Left"
Height="61"
Margin="76,60,0,0"
TextWrapping="Wrap"
Text="{Binding PageTitle}"
VerticalAlignment="Top"
Width="1090"
FontSize="40"
FontWeight="Bold"
FontFamily="Meiryo"
>
</TextBlock>
次のテンプレートでファイルアクセスをするので、テキストエリアを設置しています。
<TextBox x:Name="TextData" HorizontalAlignment="Left" Height="209" Margin="36,37,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="580" AcceptsReturn="True"/>
テキストエリアは、実際には TextBox で、AcceptsReturn="True" にする事によって複数行の入力が可能になります また、ファイルのアクセスを想定して、Package.appxmanifest に『機能』と『宣言』の設定をしています ( ページのロードでは、『text.txt』というファイルの存在チェックのみ行っています )
Page.Resources の参照 XAML 内での参照は、『AppBar テンプレート / Win8 ストアアプリ(C#)』 では、一括で定義して参照していましたが、実際には DataContext に設定して、Binding のみで参照します。DataContext も、自分自身のものである必要は無く、親要素でも構わないので効率的に良い方法を選びます。 ソースコードから参照するには、少しやっかいですがそのような処理は専用クラス内で行えば良いと思います。ここでは、MsgBox クラスで、タイトルに使用するのに参照しています。この参照方法は、Framework のバージョンによって違っており、4.5 から Where メソッドが使用できます
// Page.Resources から TextResource を取得
var NameSpace = pg.GetType().Namespace;
var trs = pg.Resources.Values.Where(Value => Value.ToString() == NameSpace + ".TextResource");
TextResource tr = (TextResource)trs.First();
var Title = tr.PageTitle;
var AppName = tr.AppName;
var messageDialog = new MessageDialog(message, Title + " (" + AppName + ")");
MsgBox クラス MsgBox の処理は結構煩雑なので、応答用と確認用を固定で、static メソッドとして定義しています。 ❶ public static async void ShowAsync(MainPage pg, string ok, string cancel, string message, UICommandInvokedHandler handler) OK か Cancel のメッセージボックスを開いて、指定したメッセージを表示して、指定したイベントを応答に使用する。 仕様コードMsgBox.ShowAsync( this, "OK", "Cancel", "データを保存しますか?", this.CommandInvokedHandler );❷ public static async void ShowAsync(MainPage pg, string ok, string message) イベントは使用せずにメッセージボックスのみが開く。 OnNavigatedTo で取得するパラメータ用構造体 ページを表示する時に、Frame クラスの Navigate(typeof(MainPage), 引き渡すオブジェクト) という形で呼び出します。この呼び出しは、MainPage のインスタンスが新しく作成される方法なので、最初以外は望ましくありませんが、他のページを呼び出したい時の引数として使ってコードがわかりやすくなるかもしれません。 その為のテンプレートとして、App.xaml.cs に定義して初回に使用して呼び出しています 受け取るのは、MainPage 側の OnNavigateTo イベント(Page の protected イベント)です
// *************************************************
// このページがフレームに表示されるときに呼び出されます。
// *************************************************
protected override void OnNavigatedTo(NavigationEventArgs e)
{
Debug.WriteLine("ページがフレームに表示されました");
// Navigate が実行された時のパラメータを表示しています
var mp = (App.MyParam)e.Parameter;
Debug.WriteLine("Title : " + mp.title);
Debug.WriteLine("Type : " + mp.type);
}
関連する情報 XAML コードを横に長く表示させずに、属性毎に縦に表示させる設定
タグ：Windows8
StandardStyles.xaml の変更
Common フォルダにある StandardStyles.xaml を、
▼ 新規作成すると以下のようになります
しかし、これでは何も設定されていないので、AppBar を選択した状態でデザイナ画面に移動して、AppBar をドロップします。
そうすると、やっとテンプレートらしきものが設定されるのですが、AppBar が二重になってしまうので、外側を削除します。
ボタンの追加
これでやっと、AppBar が作成されて、左右にバーが作成されている事になります。左側の StackPanel を選択してからデザイナ画面に移動して Button をドロップします。
ボタンが追加されたら、プロパティで余計な Content プロパティに設定されている表示用の文字列を削除し、Style プロパティでリソースに定義されている AppBar 用のボタンスタイルを設定します。
続けてイベントと他のコントロールを作成して動作確認
イベントは、プロパティウインドウの雷マークタブに移動して、該当するイベント欄をダブルクリックすると自動作成されます。
それぞれの API は API エクスプローラでテストする事ができます。例えばその
ログイン > 画像表示 > 画像投稿
( WEB カメラの画像も投稿できます )
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
