@SHOW
http://lightbox.matrix.jp/ginpro/patio.cgi?mode=view&no=417《Windows8(C#) ストアアプリ MVVM : ListBox テンプレート 用 画面( XAML ) バインド用クラス》
@END

https://lh3.googleusercontent.com/-Egs4wF6b8qk/UZipLuZkMPI/AAAAAAAAN7I/Px6RH9xqOq4/s600/_img.jpg

https://lh3.googleusercontent.com/-MZXJf-ZSxIY/UZipzuQkJbI/AAAAAAAAN7U/gEkuKdxAmtg/s600/_img.jpg

[[MainPage.xaml]]
@DIV
<Page
	x:Class="LBOX_ListBox.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:LBOX_ListBox"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	d:DataContext="{d:DesignData ListMainDesignData.xaml}"
	Loaded="Page_Loaded">
	
	<Page.Resources>
		<local:TextResource
			x:Key="GlobalText"
			PageTitle="ListBox テンプレート"
			AppName="lightbox サンプルアプリケーション" />

		<!-- ListBox 用ビジュアル定義 -->
		<DataTemplate
			x:Key="ListBox2Item">
			<StackPanel
				Margin="0,0,0,4"
				Width="432"
				Height="45">
				<TextBlock
					Text="{Binding id}"
					TextWrapping="Wrap" />
				<TextBlock
					Text="{Binding name}"
					TextWrapping="Wrap"
					Margin="12,-6,12,0"
					FontSize="24" />
			</StackPanel>
		</DataTemplate>

	</Page.Resources>

	<!--画面定義-->
	<Grid
		x:Name="MainGrid"
		Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
		<Border 
			BorderBrush="#FF999999"
			BorderThickness="3"
			HorizontalAlignment="Left"
			Height="422"
			Margin="76,126,0,0"
			VerticalAlignment="Top"
			Width="574"
			Background="#FF323232" CornerRadius="20">
			<!-- メインリストボックス -->
			<ListBox
				x:Name="ListMenu"
				HorizontalAlignment="Left"
				Height="324"
				Margin="57,43,0,0"
				VerticalAlignment="Top"
				Width="462"
				ItemsSource="{Binding Items}"
				ItemTemplate="{StaticResource ListBox2Item}"
				Tapped="ListMenu_Tapped" />
		</Border>
		<Border
			BorderBrush="#FF999999"
			BorderThickness="3"
			HorizontalAlignment="Left"
			Height="546"
			Margin="682,126,0,0"
			VerticalAlignment="Top"
			Width="526"
			Background="#FF323232"
			CornerRadius="20"
			Grid.Row="1"
			Grid.Column="1">
			<!-- サブリストボックス -->
			<ListBox
				x:Name="ListMenu_Child"
				HorizontalAlignment="Left"
				Height="448"
				Margin="57,43,0,0"
				VerticalAlignment="Top"
				Width="410"
				ItemsSource="{Binding Items}"
				ItemTemplate="{StaticResource ListBox2Item}" />

		</Border>

		<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="UpdateField"
			HorizontalAlignment="Left"
			Margin="140,582,0,0"
			TextWrapping="Wrap"
			VerticalAlignment="Top"
			Width="460"
			Height="90"
			AcceptsReturn="True"
			FontSize="26" />


	</Grid>

	<!--AppBar の定義-->
	<Page.BottomAppBar>
		<AppBar>
			<Grid
				x:Name="AppBarGrid">
				<Grid.ColumnDefinitions>
					<ColumnDefinition />
					<ColumnDefinition />
				</Grid.ColumnDefinitions>

				<StackPanel
					x:Name="LeftBar"
					Orientation="Horizontal"
					HorizontalAlignment="Left">

					<!--StandardStyles に定義されたスタイルをそのまま適用する-->

					<!--設定ボタン-->
					<Button
						x:Name="SettingButton"
						AutomationProperties.Name="設定"
						HorizontalAlignment="Stretch"
						VerticalAlignment="Stretch"
						Style="{StaticResource SettingsAppBarButtonStyle}"
						Click="SettingButton_Click" />

					<!--お気に入りボタン-->
					<Button
						x:Name="FavoriteButton"
						AutomationProperties.Name="お気に入り"
						HorizontalAlignment="Stretch"
						VerticalAlignment="Stretch"
						Style="{StaticResource FavoriteAppBarButtonStyle}"
						Click="FavoriteButton_Click" />

				</StackPanel>

				<StackPanel
					x:Name="RightBar"
					Grid.Column="1"
					HorizontalAlignment="Right"
					Orientation="Horizontal">

					<!-- 保存ボタンを定義時に、表示文字列を変更する-->
					<Button
						x:Name="SaveButton"
						AutomationProperties.Name="保存"
						Grid.Column="1"
						HorizontalAlignment="Stretch"
						VerticalAlignment="Stretch"
						Style="{StaticResource SaveAppBarButtonStyle}"
						Click="SaveButton_Click"					 />

					<!--メールボタン-->
					<Button
						x:Name="MailButton"
						AutomationProperties.Name="メール"
						Grid.Column="1"
						HorizontalAlignment="Stretch"
						VerticalAlignment="Stretch"
						Style="{StaticResource MailAppBarButtonStyle}"
						Click="MailButton_Click" />

				</StackPanel>
			</Grid>
		</AppBar>
	</Page.BottomAppBar>
	
</Page>
@END