サンプルをコピーして実行すればできてしまいますが、『ブランクテンプレート』から、正攻法で作成する手順です。StandardStyles.xaml の変更 Common フォルダにある StandardStyles.xaml を、Microsoft のサンプルの中にあるもので置き換えます。( 何故か、中身を変更しないと、AppBar のスタイルが使えないのですが、変更するよりコピーしたほうが確実なので ) 実際問題として、Visual Studio 2012 のテンプレートやデザイナの出来は『良いものとは言えません』。製品版になる前から検証していますが、なにも問題は改良されていないので、がっかりしないようにして下さい。 Page のプロパティから『新規作成』 Visual Studio のデザイナ部分は、『Blend for Visual Studio』に力が入ってしまっていて、Visual Studio 本体のデザイナは、『とりあえずある』という程度です。なので、AppBar を追加するにしても、納得のいく形では出来上がりませんので注意して下さい。 本来ならば、デザイナに直接ドロップして Page のプロパティに設定すべき AppBar なのですが、デザイナから見えるのは Grid なので、そのままドロップすると Grid の中に定義されてしまって意味不明になります。 ですから、まずはテンプレートとして『プロパティ』の BottomAppBar プロパティの『新規作成』ボタンで挿入します。
▼ 新規作成すると以下のようになります
しかし、これでは何も設定されていないので、AppBar を選択した状態でデザイナ画面に移動して、AppBar をドロップします。
そうすると、やっとテンプレートらしきものが設定されるのですが、AppBar が二重になってしまうので、外側を削除します。
ボタンの追加 これでやっと、AppBar が作成されて、左右にバーが作成されている事になります。左側の StackPanel を選択してからデザイナ画面に移動して Button をドロップします。
ボタンが追加されたら、プロパティで余計な Content プロパティに設定されている表示用の文字列を削除し、Style プロパティでリソースに定義されている AppBar 用のボタンスタイルを設定します。
プロパティは、カテゴリで表示して『寄せ集め』から設定すると、いろいろ変更してテストしやすいです。続けてイベントと他のコントロールを作成して動作確認 イベントは、プロパティウインドウの雷マークタブに移動して、該当するイベント欄をダブルクリックすると自動作成されます。
<Page
x:Class="BlankApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BlankApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.BottomAppBar>
<AppBar>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Button
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Style="{StaticResource SettingsAppBarButtonStyle}"
Click="Button_Click_1"/>
</StackPanel>
<StackPanel
Grid.Column="1"
HorizontalAlignment="Right"
Orientation="Horizontal"/>
</Grid>
</AppBar>
</Page.BottomAppBar>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBox
x:Name="MessageArea"
HorizontalAlignment="Left"
Height="116"
Margin="88,68,0,0"
TextWrapping="Wrap"
VerticalAlignment="Top"
Width="448"
IsReadOnly="True"/>
</Grid>
</Page>
以下は、メッセージ表示を行う『MessageDialog』ですが、応答するボタンを三つまで自由に作成する事ができます。
C# ならではの記述方法として、() => {処理}と、インスタンスを作成する場合に同時にプロパティを設定する {プロパティ=初期値[,プロパティ=初期値...]} を使っています。Id は、設定しておかないと、イベント内では何も入って来ないので注意して下さい
async と await については、こちらを参照して下さい。
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
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;
namespace BlankApp
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private async void Button_Click_1(object sender, RoutedEventArgs e)
{
var messageDialog = new MessageDialog("メッセージ", "タイトル");
messageDialog.Commands.Add(new UICommand("選択肢１", (command) =>
{
Debug.WriteLine(command.Label);
Debug.WriteLine(command.Id);
this.MessageArea.Text = command.Label + "\n" + command.Id;
}) { Id = "idの型はobject" });
messageDialog.Commands.Add(new UICommand("選択肢２", (command) =>
{
Debug.WriteLine(command.Label);
Debug.WriteLine(command.Id);
this.MessageArea.Text = command.Label + "\n" + command.Id;
}) { Id = new Uri("http://winofsql.jp") });
messageDialog.Commands.Add(new UICommand("アプリ終了", (command) =>
{
App.Current.Exit();
}) { Id = 3 });
messageDialog.DefaultCommandIndex = 1;
await messageDialog.ShowAsync();
}
}
}
|
|
【Win8 ストアアプリの最新記事】
- C# : HttpClient で Post と Get する汎用 static クラス
- Win8.1 ストアアプリ(JS) : Visual Studio 2013 で Three.js(v65) の WebGLRenderer の動作を確認しました
- WinJS ストア : Three.js を組み込んで、『画像を飛ばす』テンプレート( Bird.js を利用 )
- WinJS ストア : 『背景画像をチェンジする２画面アプリ』のテンプレート
- VS2012ストア(C#) : WebView テンプレート
- VS2012(C#)ストア : ListView Twitter 検索テンプレート
- イラストを背景にして２ページの画面遷移を解りやすくした Windows Store テンプレート
- Twitter API の自分のアプリのトークンを使って投稿するだけの class VS2012_Twitter
- Win8 ストア(C#) / PDF viewer sample (Windows 8.1)
- ストアアプリの TextBox のスクロールバー
- Win8 ストアアプリの、メモリ上にページを残す画面遷移と、前画面のコントロールの参照
- Win8 ストアアプリで、『選択肢を応答するダイアログ』を簡単に使うための MessageBox クラス
- Win8 ストアから Post 投稿
- Win8ストア XAML の AppBarButtonStyle のContent に指定する 16進数 Unicode の取得
- Win8 ストア : UrlEncode と UrlDecode
- Win8 ストア : HttpClient + XDocument で RSS の取得
- Win8 ストア : リストボックス テンプレート
- Win8 ストア : ファイルアクセス テンプレート
- Win8 ストア : ストアブランク テンプレート
- AppBar テンプレート / Win8 ストアアプリ(C#)
