[WPF - How To] Row Details

marzo 22, 2016 Christian Amado 0 Comentarios

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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDsarpj-lqomE2LBYhK1yeRSYS-xXL7wloRKCdjt1OvM1_F70H9kYHW3Y960NUHwnzZ6DXyOhW1vme5Dc2lSk1Ih8DC7RsctrU0eC5HWFo-VRIpj2kMFkPjeH7NgdZLfscvz-Bcczh1no/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: