DataTemplate とStaticResource のBind

環境： 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”));
        }
    }
}