SQLの窓

2012年09月08日


Windows Phone(C#) データバインドアプリケーション(DataBoundApp)テンプレートの解説

全体のソース( XAML と CS(C#) )

このテンプレートの最大の特徴は、ListBox を使用しているところにあり、その定義は以下のようになります。
<ListBox
	x:Name="MainListBox"
	Margin="0,0,-12,0"
	ItemsSource="{Binding Items}"
	SelectionChanged="MainListBox_SelectionChanged" 
>
	<ListBox.ItemTemplate>
		<DataTemplate>
			<StackPanel Margin="0,0,0,17" Width="432" Height="78">
				<TextBlock
					Text="{Binding LineOne}"
					TextWrapping="Wrap"
					Style="{StaticResource PhoneTextExtraLargeStyle}"
				/>
				<TextBlock
					Text="{Binding LineTwo}"
					TextWrapping="Wrap"
					Margin="12,-6,12,0"
					Style="{StaticResource PhoneTextSubtleStyle}"
				/>
			</StackPanel>
		</DataTemplate>
	</ListBox.ItemTemplate>
</ListBox>

ただ、このリストボックスにバインドされるデータをセットする DataContext は、この XAML に対応するクラスである、MainPage.xaml.cs で設定されています。

DataContext = App.ViewModel;

この処理が、コンストラクタで実行されているので、MainPage.xaml 内では DataContext で設定されたオブジェクトをバインド可能になっています。App.ViewModel は、static なプロパティで、中身のインスタンスは App.xaml.cs で作成されています。

この ViewModel の中にあるオブジェクトは、MainViewModel.cs で定義される MainViewModel クラスで、items プロパティを持ちます。この Items プロパティの内容が ObservableCollection<ItemViewModel> という、ItemViewModel クラスを内部に持つコレクションとなっています。

ItemsSource="{Binding Items}"
( バインド記述 )

この ItemViewModel のプロパティ( LineOne と LineTwe )こそが、実際に ListBox の内容にバインドされる実体を供給するクラスです。

ここで、ListBox.ItemTemplate 部分を削除してもアプリケーションは動作し、以下のようにオブジェクト名の一覧が表示されます。



つまり、この部分は ItemViewModel のプロパティを使って具体的に表現している部分だという事です。
<ListBox.ItemTemplate>
	<DataTemplate>
		<StackPanel Margin="0,0,0,17" Width="432" Height="78">
			<TextBlock
				Text="{Binding LineOne}"
				TextWrapping="Wrap"
				Style="{StaticResource PhoneTextExtraLargeStyle}"
			/>
			<TextBlock
				Text="{Binding LineTwo}"
				TextWrapping="Wrap"
				Margin="12,-6,12,0"
				Style="{StaticResource PhoneTextSubtleStyle}"
			/>
		</StackPanel>
	</DataTemplate>
</ListBox.ItemTemplate>



第二画面の処理

ListBox を選択する事によって、どの行かを XAML の QueryString として与え受け取り側NavigationContext.QueryString.TryGetValue("selectedItem", out selectedIndex) で文字列として取得してから int に戻してどの行(index)が選択されたかを取得します。その後、

DataContext = App.ViewModel.Items[index];

として第二画面の DataContext を設定しています。


【Windows Phoneの最新記事】
posted by lightbox at 2012-09-08 19:56 | Windows Phone | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり