環境： Windows 8 Release Preview Build 8400 + Visual Studio 2012 RC
詳細は、DataTemplate class を参照してください。
<Grid Style=”{StaticResource LayoutRootStyle}”>
<Grid.Resources>
<src:Customers x:Key=”customers”/>
<DataTemplate x:Key=”MyDataTemplate“>
<Grid HorizontalAlignment=”Left” Width=”250″ Height=”150″>
<Border Background=”{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}”>
<Image Source=”{Binding Image}” Stretch=”UniformToFill”/>
</Border>
<StackPanel VerticalAlignment=”Bottom” Background=”{StaticResource ListViewItemOverlayBackgroundThemeBrush}”>
<TextBlock Text=”{Binding FirstName}” Foreground=”{StaticResource ListViewItemOverlayForegroundThemeBrush}” Style=”{StaticResource TitleTextStyle}” Height=”60″ Margin=”15,0,15,0″/>
<TextBlock Text=”{Binding LastName}” Foreground=”{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}” Style=”{StaticResource CaptionTextStyle}” TextWrapping=”NoWrap” Margin=”15,0,15,10″/>
<TextBlock Text=”{Binding Address}” Foreground=”{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}” Style=”{StaticResource CaptionTextStyle}” TextWrapping=”NoWrap” Margin=”15,0,15,10″/>
</StackPanel>
</Grid>
</DataTemplate>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height=”140″/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<!– [戻る] ボタンおよびページ タイトル–>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”Auto”/>
<ColumnDefinition Width=”*”/>
</Grid.ColumnDefinitions>
<Button x:Name=”backButton” Click=”GoBack” IsEnabled=”{Binding Frame.CanGoBack, ElementName=pageRoot}” Style=”{StaticResource BackButtonStyle}”/>
<TextBlock x:Name=”pageTitle” Text=”{StaticResource AppName}” Grid.Column=”1″ Style=”{StaticResource PageHeaderTextStyle}”/>
</Grid>
<GridView
x:Name=”itemGridView”
AutomationProperties.AutomationId=”ItemGridView”
AutomationProperties.Name=”Grouped Items”
Margin=”0,137,0,0″
Padding=”0,0,0,0″
HorizontalAlignment=”Left”
Width=”300″
ItemsSource=”{Binding Source={StaticResource customers}}”
ItemTemplate=”{StaticResource MyDataTemplate}”
ScrollViewer.VerticalScrollBarVisibility=”Auto”
SelectionMode=”None”
IsItemClickEnabled=”True”
ItemClick=”ItemView_ItemClick” Grid.RowSpan=”2″>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation=”Vertical”/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin=”1,0,0,6″>
<Button
AutomationProperties.Name=”Group Title”
Content=”{Binding Title}”
Click=”Header_Click”
Style=”{StaticResource TextButtonStyle}”/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation=”Vertical” Margin=”0,0,80,0″/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
……
</Grid>
Customers.cs
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace App5
{
public class Customer
{
public String FirstName { get; set; }
public String LastName { get; set; }
public String Address { get; set; }
public Customer(String firstName, String lastName, String address)
{
this.FirstName = firstName;
this.LastName = lastName;
this.Address = address;
}
}
public class Customers : ObservableCollection<Customer>
{
public Customers()
{
Add(new Customer(“Michael”, “Anderberg”,
“12 North Third Street, Apartment 45”));
Add(new Customer(“Chris”, “Ashton”,
“34 West Fifth Street, Apartment 67”));
Add(new Customer(“Cassie”, “Hicks”,
“56 East Seventh Street, Apartment 89”));
Add(new Customer(“Guido”, “Pica”,
“78 South Ninth Street, Apartment 10”));
Add(new Customer(“Guido”, “Pica”,
“78 South Ninth Street, Apartment 10”));
Add(new Customer(“Guido”, “Pica”,
“78 South Ninth Street, Apartment 10”));
Add(new Customer(“Guido”, “Pica”,
“78 South Ninth Street, Apartment 10”));
Add(new Customer(“Guido”, “Pica”,
“78 South Ninth Street, Apartment 10”));
Add(new Customer(“Guido”, “Pica”,
“78 South Ninth Street, Apartment 10”));
Add(new Customer(“Guido”, “Pica”,
“78 South Ninth Street, Apartment 10”));
}
}
}
宇宙仮面の研究室 