Features > Row Details Template |
FlexGrid provides the flexibility to show additional information about each row through a row details template. A row details template is an empty data template that can be added to a row for displaying details. You can embed text, UI elements, and data-bound controls such as InputPanel in the row details template. For each row in a grid, you can insert a data template to present its summary, or enlist details in other controls such as text box, without affecting the dimensions of the grid. You can also use this template to create hierarchical grids displaying grouped data.
The following image shows details of each row displayed in a row details template.
XAML |
Copy Code
|
---|---|
<FlexGrid:C1FlexGrid.Columns> <FlexGrid:Column Header="Product ID" Binding="{Binding ProductId}" Width="75" /> <FlexGrid:Column Header="Product Name" Binding="{Binding ProductName}" Width="150" /> <FlexGrid:Column Header="Order Date" Binding="{Binding OrderDate}" Width="300" /> </FlexGrid:C1FlexGrid.Columns> |
XAML |
Copy Code
|
---|---|
<FlexGrid:C1FlexGrid.RowDetailsTemplate> <DataTemplate> <StackPanel Background="GhostWhite"> <Image HorizontalAlignment="Left" Name="img" Source="{Binding ImgSource}" Height="64" Margin="10" /> <Grid Margin="0, 10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Text="Product ID: " FontWeight="Bold" /> <TextBlock Text="{Binding ProductId}" Grid.Column="1" /> <TextBlock Text="Product Name: " FontWeight="Bold" Grid.Row="1" /> <TextBlock Text="{Binding ProductName}" Grid.Column="1" Grid.Row="1" /> <TextBlock Text="Order Date: " FontWeight="Bold" Grid.Row="2" /> <TextBlock Text="{Binding OrderDate}" Grid.Column="1" Grid.Row="2" /> </Grid> </StackPanel> </DataTemplate> </FlexGrid:C1FlexGrid.RowDetailsTemplate> |
Public Class ProductDetails Public Property ProductId() As Integer Get Return m_ProductId End Get Set m_ProductId = Value End Set End Property Private m_ProductId As Integer Public Property ProductName() As String Get Return m_ProductName End Get Set m_ProductName = Value End Set End Property Private m_ProductName As String Public Property OrderDate() As DateTime Get Return m_OrderDate End Get Set m_OrderDate = Value End Set End Property Private m_OrderDate As DateTime Public Property ImgSource() As ImageSource Get Return m_ImgSource End Get Set m_ImgSource = Value End Set End Property Private m_ImgSource As ImageSource End Class
public class ProductDetails { public int ProductId { get; set; } public string ProductName { get; set; } public DateTime OrderDate { get; set; } public ImageSource ImgSource { get; set; } }
'Create a list Dim users As New List(Of ProductDetails)() 'Add items to the list users.Add(New ProductDetails() With { .ProductId = 101, .ProductName = "Beverages", .OrderDate = New DateTime(1971, 7, 23, 8, 0, 20), .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Beverage.png")) }) users.Add(New ProductDetails() With { .ProductId = 102, .ProductName = "Condiments", .OrderDate = New DateTime(1974, 1, 17, 12, 30, 10), .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Condiments.png")) }) users.Add(New ProductDetails() With { .ProductId = 103, .ProductName = "Confections", .OrderDate = New DateTime(1991, 9, 2, 2, 42, 45), .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Confections.png")) }) users.Add(New ProductDetails() With { .ProductId = 104, .ProductName = "Poultry", .OrderDate = New DateTime(1991, 10, 24, 6, 20, 49), .ImgSource = New BitmapImage(New Uri("ms-appx:///Resources/Poultry.png")) }) 'Populate the grid grid.ItemsSource = users
//Create a list List<ProductDetails> users = new List<ProductDetails>(); //Add items to the list users.Add(new ProductDetails() { ProductId = 101, ProductName = "Beverages", OrderDate = new DateTime(1971, 7, 23, 8, 0,20), ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Beverage.png"))}); users.Add(new ProductDetails() { ProductId = 102, ProductName = "Condiments", OrderDate = new DateTime(1974, 1, 17, 12,30,10), ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Condiments.png"))}); users.Add(new ProductDetails() { ProductId = 103, ProductName = "Confections", OrderDate = new DateTime(1991, 9, 2, 2,42,45), ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Confections.png"))}); users.Add(new ProductDetails() { ProductId = 104, ProductName = "Poultry", OrderDate = new DateTime(1991, 10, 24, 6,20,49), ImgSource = new BitmapImage(new Uri("ms-appx:///Resources/Poultry.png"))}); //Populate the grid grid.ItemsSource = users;