[WPF – How To] Row Details

[WPF – How To] Row Details

Utilizamos esta plantilla cuando queremos mostrar una estructura Maestro/Detalle, donde el Detalle correspondería a Row Details. En este ejemplo utilizaremos la grilla proveída por Microsoft, y no la de Telerik.

Aquí creamos una plantilla de Maestro/Detalle donde el maestro muestra datos de un Club y sus campeonatos internacionales ganados. El detalle muestro el logo, nombre, cantidad de títulos y el país de procedencia del club.

Nuestro XAML queda de la siguiente manera:


<Window x:Class="WPF_RowDetails.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPF_RowDetails"
mc:Ignorable="d" Loaded="Window_Loaded"
Title="MainWindow" Height="350" Width="525">
<Grid Margin="10">
<DataGrid Name="dgClubes" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Club" Binding="{Binding Name}" />
<DataGridTextColumn Header="Campeonatos" Binding="{Binding Champion}" />
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<DockPanel Background="GhostWhite">
<Image DockPanel.Dock="Left" Stretch="UniformToFill" Source="{Binding ImageUrl}" 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="País: " FontWeight="Bold" />
<TextBlock Text="{Binding Country}" Grid.Column="1" />
<TextBlock Text="Nombre: " FontWeight="Bold" Grid.Row="1" />
<TextBlock Text="{Binding Name}" Grid.Column="1" Grid.Row="1" />
<TextBlock Text="Campeonatos internacionales: " FontWeight="Bold" Grid.Row="2" />
<TextBlock Text="{Binding Champion}" Grid.Column="1" Grid.Row="2" />

</Grid>
</DockPanel>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
</Grid>
</Window>

En el código C# debemos crear una clase que almacene los datos particulares del club y en el constructor de la Vista cargamos los datos de prueba


using System.Collections.Generic;
using System.Windows;

namespace WPF_RowDetails
{
///
/// Lógica de interacción para MainWindow.xaml
///

public partial class MainWindow : Window
{

List clubes = new List();

public MainWindow()
{
InitializeComponent();

//Cargar datos de prueba
this.CargarDatos();
}

private void CargarDatos()
{
clubes.Add(new Club() { Country = "Inglaterra", Name = "Manchester United", Champion = 7, ImageUrl = "https://upload.wikimedia.org/wikipedia/en/thumb/7/7a/Manchester_United_FC_crest.svg/758px-Manchester_United_FC_crest.svg.png" });
clubes.Add(new Club() { Country = "Inglaterra", Name = "Liverpool", Champion = 11, ImageUrl = "http://3.bp.blogspot.com/-GrfSe8Gp4YE/TfqN9KoOl9I/AAAAAAAACxE/jo2aeu1HJ3E/s1600/liverpool_fc1.png" });
clubes.Add(new Club() { Country = "Paraguay", Name = "Olimpia", Champion = 8, ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/2/28/Escudo_de_Olimpia.png" });
clubes.Add(new Club() { Country = "Argentina", Name = "Independiente", Champion = 18, ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/00/Independiente_Arg_logo.svg" });
}

private void Window_Loaded(object sender, RoutedEventArgs e)
{
this.dgClubes.ItemsSource = clubes;
}
}

public class Club
{
public string Country { get; set; }

public string Name { get; set; }

public int Champion { get; set; }

public string ImageUrl { get; set; }
}
}

La pantalla final quedaría de la siguiente manera: 1

De esta manera bien sencilla hemos creado un visor Maestro/Detalle que se puede utilizar de múltiples formas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.