Lathund XAML: Databinding

Kontrollen ListView kan användas för att presentera data i listform, och tillsammans med GridView kan man använda den för att presentera tabulär data i listform. Följande exempel fyller ett fönster med en ListView, som har en GridView med tre kolumner.

<ListView x:Name="listView" Margin="5,5,5,5">
   <ListView.View>
      <GridView>
         <GridViewColumn Header="First name" Width="100" />
         <GridViewColumn Header="Last name" Width="100" />
         <GridViewColumn Header="Birthdate" Width="100" />
      </GridView>
   </ListView.View>
</ListView>

Det enklaste sättet att lägga till data till listan är att binda dess kolumner till properties, och sedan binda listan till en samling vars objekt har dessa properties. I XAML uttrycks bindningen med DisplayMemberBinding.

<ListView x:Name="listView" Margin="5,5,5,5">
   <ListView.View>
      <GridView>
         <GridViewColumn Header="First name"
         Width="100" DisplayMemberBinding="{Binding FirstName}" />
         <GridViewColumn Header="Last name"
         Width="100" DisplayMemberBinding="{Binding LastName}" />
         <GridViewColumn Header="Birthdate"
         Width="100" DisplayMemberBinding="{Binding BirthDate}" />
      </GridView>
   </ListView.View>
</ListView>

Så här skulle klassen som beskriver objektet som vi ska placera i listan som ska bindas:

class Employee
{
   public string FirstName { get; set; }
   public string LastName { get; set; }
   public DateTime BirthDate { get; set; }
}

Slutligen, denna kod utför bindningen. Den kan t.ex. köras i fönstrets Initialized-event:

var emps = new List<Employee>();
emps.Add(new Employee() { FirstName = "Sven", LastName = "Svensson", BirthDate = new DateTime(1960, 1, 1) });
emps.Add(new Employee() { FirstName = "Klas", LastName = "Klasson", BirthDate = new DateTime(1970, 1, 1) });
emps.Add(new Employee() { FirstName = "Göran", LastName = "Göransson", BirthDate = new DateTime(1980, 1, 1) });
listView.ItemsSource = emps;

Förändringar som sker i listan under programmets gång reflekteras först när man anropar metoden Refresh på listans Items-property.

(listView.ItemsSource as List<Employee>).Add(
   new Employee()
   {
      FirstName = "Pierre",
      LastName = "Fridell",
      BirthDate = new DateTime(1955, 1, 1)
   });
listView.Items.Refresh();

Slutligen, om vi vill styra format eller design så kan vi placera en CellTemplate under en GridViewColumn, och placera värdet (eller propertynamnet i detta fall) där. Här använder jag en TextBlock-kontroll. För att centreringen av texten ska fungera, måste jag tala om att alla ListViewItem-objekt ska dras ut till sin fulla storlek.

<ListView x:Name="listView" Margin="5,5,5,5">
   <ListView.Resources>
      <Style TargetType="ListViewItem">
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      </Style>
   </ListView.Resources>
   <ListView.View>
      <GridView>
         <GridViewColumn Header="First name" Width="100" DisplayMemberBinding="{Binding FirstName}" />
         <GridViewColumn Header="Last name" Width="100" DisplayMemberBinding="{Binding LastName}" />
         <GridViewColumn Header="Birthdate" Width="100">
            <GridViewColumn.CellTemplate>
               <DataTemplate>
                  <TextBlock Text="{Binding BirthDate, StringFormat=\{0:yyyy\}}" TextAlignment="Center"></TextBlock>
               </DataTemplate>
            </GridViewColumn.CellTemplate>
         </GridViewColumn>
      </GridView>
   </ListView.View>
</ListView>