publish/ MSPTutorial 応用編
67
応用編 Microsoft Student Partners 五十嵐 祐貴 2014/5/17 /publish// 1
-
Upload
yuki-igarashi -
Category
Technology
-
view
334 -
download
3
description
//publish/のMSPによるハンズオンで使用したスライドです。 発展編のみを掲載しております。
Transcript of publish/ MSPTutorial 応用編
応用編Microsoft Student Par tners
五十嵐 祐貴
2014/5/17 /publish// 1
データバインディング
2014/5/17 /publish// 2
データバインディングとはデータソースとビューを簡単に結びつける(同期する)ための仕組み
◦ コントロールのプロパティとインスタンスのプロパティ
◦ コントロールのプロパティとコントロールのプロパティ etc…
同期の方向も選べる◦ ソース → Target : OneTime
◦ ソースが変更されたとき（もしくは起動時）、1回のみターゲットプロパティを変更
◦ ソース⇒ターゲット : OneWay
◦ ソースプロパティが変更されたとき、ターゲットプロパティを変更（こちらは複数回可能）
◦ ソース⇔ターゲット : TwoWay
◦ ソースプロパティorターゲットプロパティが変更されたとき、ターゲットプロパティorソースプロパティを変更
2014/5/17 /publish// 3
データバインディングとは今までの例
XAML
コード
実行結果
コントロールのプロパティに直接インスタンスを格納している
2014/5/17 /publish// 4
listView_Todo.Items.Add("ほげ");
listView_Todo.Items.Add("ふが");
<ListView x:Name="listView_Todo" />
要素
ほげ
ふが
データバインディングとはデータバインディングを用いた例
XAML
コード
実行結果は同様
インスタンスはコード側が保持
2014/5/17 /publish// 5
<ListView x:Name="listView_Todo" ItemsSource="{Binding}" />
var foo = new
System.Collections.ObjectModel.ObservableCollection<string>();foo.Add("ほげ");
foo.Add("ふが");
foo.Add("ぴよ");
listView_Todo.DataContext = foo;
// listView_Todo.ItemsSource = foo;
データバインディングとは今までの例
XAML
コード
実行結果
someTextBlockにlistView_Todoで選択している値が表示される
コントロールのプロパティとプロパティに関係を持たせる(ex.同期させる)場合、そのトリガーとしてイベントを使う必要がある
2014/5/17 /publish// 6
private void listView_Todo_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (listView_Todo.SelectedIndex > -1)
someTextBlock.Text = listView_Todo.Items[listView_Todo.SelectedIndex].ToString();
}
<ListView x:Name="listView_Todo"
SelectionChanged="listView_Todo_SelectionChanged"/>
<TextBlock x:Name=“someTextBlock" />
データバインディングとはデータバインディングを用いた例
XAML
コード不要
実行結果は同様
Bindingのターゲットにはコントロールのプロパティも指定できるため、容易に関係を持たせることができる
この場合、同期の方向はOneWay(ListView⇒ TextBlock)であるため、ListViewで選択されている要素を変えれば、TextBlockの値も即時変更される
2014/5/17 /publish// 7
<ListView x:Name="listView_Todo" />
<TextBlock Text="{Binding
ElementName=listView_Todo,Path=SelectedItem}" />
データバインディングの実装例ソースをバインディングに対応させる
◦ ソースのフィールドをプロパティに変更する
ソースの値が変更された際に更新(を通知)する必要がある場合、INotifyPropertyChangedインターフェイスを実装する
2014/5/17 /publish// 8
// TodoItem.csを編集
public class TodoItem
{
public string Name { get; set; }
public int Level { get; set; }
public DateTimeOffset PeriodTime { get; set; }(…後略…)
データバインディングの実装例コード側にソースのインスタンスを保持する
List<T>でも出来るが、ObservableCollection<T>を使うと、要素の追加・削除も更新が通知される
2014/5/17 /publish// 9
// MainPage.xaml.csを編集using System.Collections.ObjectModel; // 先頭に追加
(…中略…)
public sealed partial class MainPage : Page
{
private ObservableCollection<string> todoCollection = new ObservableCollection<string>();(…後略…)
データバインディングの実装例コントロールのDataContextにインスタンスをセットする
2014/5/17 /publish// 10
// MainPage.xaml.csを編集
public MainPage()
{
this.InitializeComponent();
App.Current.Suspending+=Current_Suspending;
App.Current.Resuming += Current_Resuming;(…中略…)
listView_Todo.DataContext = todoCollection; // 追加
}(…後略…)
データバインディングの実装例ビューをBindingを用いて書き換える
コードを書き換える◦ 直接UIを操作するコードからモデルを操作するコードへ
以上で完成です。
動作確認をしてみましょう。
2014/5/17 /publish// 11
// MainPage.xamlを編集<ListView (…中略…) ItemsSource="{Binding}" />
// MainPage.xaml.csを編集
private void button_Add_Click(object sender, RoutedEventArgs e)
{
string name = textBox_Name.Text;
int level = int.Parse(comboBox_Level.SelectedItem.ToString());
DateTimeOffset period = datePicker_Period.Date;
TodoItem item = new TodoItem(name,level,period);
todoCollection.Add(item.ConvertTodoString());
}
データバインディングおまけ編モデル、ビュー部分を以下のように書き換えることも可能
Converterを用いることでBindingの値を変更することも可能
2014/5/17 /publish// 12
private ObservableCollection<TodoItem> todoCollection = new ObservableCollection<TodoItem>();
<ListView (…中略…) ItemsSource=“{Binding}“ DisplayPath=“Name" />
private void button_Add_Click(object sender, RoutedEventArgs e)
{
string name = textBox_Name.Text;
int level = int.Parse(comboBox_Level.SelectedItem.ToString());
DateTimeOffset period = datePicker_Period.Date;
TodoItem item = new TodoItem(name,level,period);
todoCollection.Add(item);
}
データバインディング参考リンク集データバインディング（WPF） - ++C++;// 未確認飛行 C
◦ http://ufcpp.net/study/dotnet/wpf_binding.html
連載：WPF入門：WPFの「データ・バインディング」を理解する - @IT
◦ http://www.atmarkit.co.jp/ait/articles/1010/08/news123.html
WindowsストアアプリプログラミングTips – garicchi.com
◦ http://garicchi.com/?page_id=111
2014/5/17 /publish// 13
ストーリーボード
2014/5/17 /publish// 14
ストーリーボードとはストアアプリではアニメーションを簡単に適用することができる
基本的に、1つのアニメーションは始点の値,終点の値,アニメーション時間で構成される
アニメーションごとの結びつき等、アニメーションのまとまりを表したものをストーリーボードと言う
2014/5/17 /publish// 15
ストーリーボードの実装例例として、追加ボタンを押した際にIS12Tちゃんが震えるモーションを追加する
Visual Studioには非常に強力なUIデザインツール、Blendが付属
Blendを使えば、UIデザインを人手でコードを書かずスムーズに行える
今回はBlendを用いて作業を行っていく
2014/5/17 /publish// 16
ストーリーボードの実装例MainPage.xamlを右クリックし、[Blendで開く]をクリック
Blendが起動する
2014/5/17 /publish// 17
ストーリーボードの実装例Blendの画面
2014/5/17 /publish// 18
「オブジェクトとタイムライン」ウインドウ
プロパティウインドウ
ストーリーボードの実装例オブジェクトとタイムラインウインドウの新規作成ボタンをクリック
今回は ItemAddStoryboardと入力(ここは任意の名前で良い)
OKをクリック
2014/5/17 /publish// 19
ストーリーボードの実装例Blendが記録モードとなる
この時操作した内容が記録され、自動的にタイムラインに追加される
2014/5/17 /publish// 20
ストーリーボードの実装例タイムラインウインドウの時間軸(黄色の線)が0:00.000(0.0秒)であることを確認
デザイナ、もしくはオブジェクトウインドウから Image コントロールが選択されていることを確認する
2014/5/17 /publish// 21
ストーリーボードの実装例Blend右側のプロパティウインドウにある変換グループの回転プロパティのZの値の右側にある□をクリックし、現在地の記録をクリック
2014/5/17 /publish// 22
ストーリーボードの実装例タイムラインウインドウの時間軸(黄色の線)を0:00.200(0.2秒)へ移動(ドラッグ)
デザイナ、もしくはオブジェクトウインドウから Image コントロールが選択されていることを確認する
2014/5/17 /publish// 23
ストーリーボードの実装例タイムラインウインドウの0.0sの箇所にひし形の点が打たれている
これはキーフレームと呼ばれる、アニメーションの始点や終点時のプロパティの値を記録しておくもの
2014/5/17 /publish// 24
ストーリーボードの実装例Blend右側のプロパティウインドウにある変換グループの回転プロパティのZの値を20に変更しEnterキーを押す(もしくは現在値の記録)
デザイナのIS12Tちゃんも変更されていることが確認できる
2014/5/17 /publish// 25
ストーリーボードの実装例タイムラインウインドウの0.0s～0.2sまでに線が引かれる
始点と終点のキーフレームが指定され、アニメーションが発生した
基本的に間の値は補間される
2014/5/17 /publish// 26
ストーリーボードの実装例同様に、タイムラインウインドウの時間軸を0:00.400(0.4秒)へ移動(ドラッグ)
Imageが選択されているかを確認し、回転のZプロパティの値を -20に変更
2014/5/17 /publish// 27
ストーリーボードの実装例さらに同様に、タイムラインウインドウの時間軸を0:00.600(0.6秒)へ移動(ドラッグ)
Imageが選択されているかを確認し、回転のZプロパティの値を 0に変更
2014/5/17 /publish// 28
ストーリーボードの実装例タイムラインに4つのキーフレームが打たれている
動作確認のため、再生ボタンを押す
⇒ IS12Tちゃんが動けばOK
2014/5/17 /publish// 29
ストーリーボードの実装例動きが少々ぎこちない
キーフレームの間の値は補間される
補間のされ方(値の変わり方)を表す関数をEasing Functionと呼ぶ
Easing Functionを変更してみよう
2014/5/17 /publish// 30
ストーリーボードの実装例オブジェクトとタイムラインウインドウ内にあるImageの左側の▷をクリックし展開する
展開されて出てきた要素 Projection をクリック
2014/5/17 /publish// 31
ストーリーボードの実装例プロパティウインドウからEasing Functionを選択できる
好きなものを選びましょう (例: Bounce InOut)
2014/5/17 /publish// 32
ストーリーボードの実装例一通り操作が終わったら、記録を停止するため、デザイナ左上の赤いボタンをクリック
ファイル → すべて保存をクリックした後、Blendを終了させる
2014/5/17 /publish// 33
ストーリーボードの実装例Visual Studioに戻ると、以下のような画面が表示される場合がある
その場合はすべてに適用をクリックする
2014/5/17 /publish// 34
ストーリーボードの実装例MainPage.xaml.csのbutton_Addをクリックしたときのイベントハンドラに追記する
以上で完了です。
動作確認をしてみましょう
2014/5/17 /publish// 35
// MainPage.xaml.csを編集
private void button_Add_Click(object sender, RoutedEventArgs e)
{(…中略…)
ItemAddStoryboard.Begin(); // この行を追加
}
コントロールテンプレート
2014/5/17 /publish// 36
コントロールテンプレートとはコントロールに対して適用する(UIの構成も含めた)スタイルを定義するもの
コントロール自体の形や動作(例:ボタンが押された時のアクション)も変更することが出来る
定義したテンプレートを参照させることで、変更を最小限にできる
ストアアプリの強力な”スタイルシート”
複雑なスタイルも定義することが出来る
2014/5/17 /publish// 37
コントロールテンプレートの実装例MainPage.xamlを右クリックし、[Blendで開く]をクリック
Blendが起動する
2014/5/17 /publish// 38
コントロールテンプレートの実装例button_Add(“追加”ボタン)をオブジェクトとタイムラインウインドウで選択
右クリックし、テンプレートの編集からコピーとして編集をクリックする
2014/5/17 /publish// 39
コントロールテンプレートの実装例Styleリソースの作成画面が表示される
名前には適当な文字列(ここではRadiusButtonStyleとする)を入力する
以上でbutton_Addをベースとしたテンプレートが作成される
2014/5/17 /publish// 40
コントロールテンプレートの実装例Blendがテンプレートの編集画面となる
Blendの上部に階層リンクバーが表示されていることが確認できる
2014/5/17 /publish// 41
コントロールテンプレートの実装例テンプレートとして設定したい項目を、左側のオブジェクトとタイムラインウインドウ、右側のプロパティウインドウを用いて設定していく
今回は角丸スタイルを設定するため、オブジェクトとタイムラインウインドウからBorderを選択
2014/5/17 /publish// 42
コントロールテンプレートの実装例今回は角丸スタイルを設定するため、CornerRadiusを10とした
プロパティの値を変更すると、デザイナーにも即時反映される
2014/5/17 /publish// 43
コントロールテンプレートの実装例オブジェクトとタイムラインウインドウのテンプレート名(今回は
RadiusButton)の左側にあるボタンをクリックする
以上でテンプレートの編集が終わり、元の画面に戻る
2014/5/17 /publish// 44
コントロールテンプレートの実装例作成したテンプレートを他のボタンにも適用させましょう
button_Deleteを右クリック
テンプレートの編集のリソースの適用
作成したテンプレートを選択する
同様にしてbutton_hushigiにも適用する
2014/5/17 /publish// 45
コントロールテンプレートの実装例すべてのボタンが角丸になったことが確認できる
2014/5/17 /publish// 46
コントロールテンプレートの実装例では、RadiusButtonスタイルを変更してみましょう
リソースウインドウ(初期設定ではプロパティウインドウと同じウインドウグループ)の[Page]を展開する
RadiusButtonの右側にあるリソースの編集ボタンをクリック
2014/5/17 /publish// 47
コントロールテンプレートの実装例先ほどと同じテンプレートの編集画面に移動する
同様にして、プロパティウインドウを用いて編集できる
2014/5/17 /publish// 48
コントロールテンプレートの実装例変化をわかりやすくするため、Buttonを180度回転させる
テンプレートに変更を適用する
2014/5/17 /publish// 49
コントロールテンプレートの実装例RadiusButtonを適用したすべてのボタンが180度回転している
同じ作業を繰り返してボタンの回転を取り消し(0度にする)、修正が適用されたか確認してみましょう
2014/5/17 /publish// 50
ストーリーボードの実装例全ての操作が終わったら、ファイル → すべて保存をクリックした後、
Blendを終了させる
Visual Studioに戻ると、以下のような画面が表示される場合がある
その場合はすべてに適用をクリックする
2014/5/17 /publish// 51
コントロールテンプレートの実装例おまけ
表示メニューから分割ビューを選択すると、Blendによって生成されたXAMLを確認することができます。
自動生成されたXAMLがどのようなことを行っているのか確認してみましょう
2014/5/17 /publish// 52
コントロールテンプレートの実装例おまけ
XAMLを確認すると、ControlTemplateとStyleの両方が含まれていることが確認できる。余裕があれば自動生成されたXAMLの意味を考えてみましょう
2014/5/17 /publish// 53
<Style x:Key="RadiusButtonStyle" TargetType="Button"><Setter Property=“Background” Value=“{ThemeResource ButtonBackgroundThemeBrush}”/> // プロパティの値の変更を行う箇所
(…中略…)
<Setter Property="Template">
<Setter.Value><ControlTemplate TargetType=“Button”> // ControlTemplateを定義する箇所
<Grid> // ベースとなるコントロールとしてGridを用いている<VisualStateManager.VisualStateGroups> // クリックされた等の状態でのスタイルを定義する場所
<VisualStateGroup x:Name="CommonStates"><VisualState x:Name=“Normal”/> // それぞれの状態の定義を行う場所
<VisualState x:Name="PointerOver">(…中略…)
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush=" {TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
Margin="3" CornerRadius="10">
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Azure Mobile Service
2014/5/17 /publish// 54
Azure Mobile Serviceの実装例Microsoft Azureポータル ( https://manage.windowsazure.com/ )に移動する
左下の新規ボタンをクリックし、コンピューティング、モバイルサービス、作成の順にクリックする
2014/5/17 /publish// 55
Azure Mobile Serviceの実装例モバイルサービスの作成画面が表示されるので、画面の指示にしたがって作成する
今回はデータベースも利用する
入力が終わったら右下の矢印ボタンをクリックする
2014/5/17 /publish// 56
Azure Mobile Serviceの実装例データベースを作成する場合、次の画面でデータベースの設定画面が表示される
入力が終わったら右下の完了ボタンをクリックする
2014/5/17 /publish// 57
Azure Mobile Serviceの実装例ステータスバーに以下のような表示が現れたらモバイルサービスの構築は完了
作成したモバイルサービス名をクリックする
2014/5/17 /publish// 58
Azure Mobile Serviceの実装例プラットフォームの選択からWindowsストアをクリックし、既存の
WINDOWSストアアプリに接続するをクリックする
2014/5/17 /publish// 59
Azure Mobile Serviceの実装例画面の表示に沿って進めていきましょう
プロジェクトを右クリックし、NuGetパッケージの管理をクリックする
2014/5/17 /publish// 60
Azure Mobile Serviceの実装例検索ボックスにWindowsAzure.MobileServicesと入力し、Windows
Azure Mobile Servicesをインストールする
2014/5/17 /publish// 61
Azure Mobile Serviceの実装例インストールが終了したらApp.xaml.csを開き、先ほど表示された手順1を実行する
以下に例を示す
2014/5/17 /publish// 62
using Microsoft.WindowsAzure.MobileServices;(…中略…)
namespace SampleTodoApp
{
sealed partial class App : Application
{
public static MobileServiceClient MobileService = new MobileServiceClient(
"https://mspsample.azure-mobile.net/",
“AAAAAAAAAAAAAAAAAAAAAAA"
);(…後略…)
Azure Mobile Serviceの実装例データを追加した時、データを削除した時にモバイルサービスを更新するコードを追加する
2014/5/17 /publish// 63
private async void button_Add_Click(object sender, RoutedEventArgs e)// button_Addをクリックした時のイベントハンドラ
{(…中略…)
await App.MobileService.GetTable<TodoItem>().InsertAsync(item); //MobileServiceに追加
}
(…前略…)
await App.MobileService.GetTable<TodoItem>().DeleteAsync(item); //MobileServiceから削除
Azure Mobile Serviceの実装例MainPageをロードした際に、Mobile Serviceからデータを取得しUIを更新するコードを追加する
2014/5/17 /publish// 64
(…前略…)
todoCollection = await App.MobileService.GetTable<TodoItem>(). .ToCollectionAsync();
Azure Mobile Serviceのサンプル新しいWINDOWSストアアプリを作成するをクリックすると、ストアアプリのサンプルがダウンロードできる
2014/5/17 /publish// 65
Azure Mobile Service参考リンク集MicrosoftAzureMobileService入門 – garicchi.com
◦ http://garicchi.com/?page_id=8131
第1回 Windows Azureモバイルサービスの基礎 –技術評論社
◦ http://gihyo.jp/dev/serial/01/wams/0001
2014/5/17 /publish// 66
2014/5/17 /publish// 67
