xaml
Plantillas de datos

Usando DataTemplate en un ListBox

Supongamos que tenemos el siguiente fragmento de código XAML:

<ListBox x:Name="MyListBox" />

Luego, en el código subyacente para este archivo XAML, escribimos lo siguiente en el constructor:

MyListBox.ItemsSource = new[]
{
    1, 2, 3, 4, 5
};

Al ejecutar la aplicación, obtenemos una lista de números que ingresamos.

Sin embargo, si intentamos mostrar una lista de objetos de un tipo personalizado, como este

MyListBox.ItemsSource = new[]
{
    new Book { Title = "The Hitchhiker's Guide to the Galaxy", Author = "Douglas Adams" },
    new Book { Title = "The Restaurant at the End of the Universe", Author = "Douglas Adams" },
    new Book { Title = "Life, the Universe and Everything", Author = "Douglas Adams" },
    new Book { Title = "So Long, and Thanks for All the Fish", Author = "Douglas Adams" },
    new Book { Title = "Mostly Harmless", Author = "Douglas Adams" }
};

asumiendo que tenemos una clase llamada Book

public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
}

entonces la lista se vería algo como esto:

Si bien podemos suponer que el ListBox será "lo suficientemente inteligente" para mostrar los objetos de nuestro libro de forma correcta, lo que realmente vemos es el nombre completo del tipo de Book . Lo que ListBox realmente hace aquí es llamar al método ToString() en los objetos que desea mostrar, y mientras eso produce el resultado deseable en el caso de los números, al llamar a ToString() en los objetos de clases personalizadas se obtiene el nombre de Su tipo, como se ve en la captura de pantalla.

Podríamos resolverlo escribiendo ToString() para nuestra clase de libros, es decir,

public override string ToString()
{
    return Title;
}

Sin embargo, eso no es muy flexible. ¿Y si también queremos mostrar al autor? También podríamos escribir eso en el ToString , pero ¿qué ToString si no queremos eso en todas las listas de la aplicación? ¿Qué tal una cubierta de libro agradable para mostrar?

Ahí es donde DataTemplates puede ayudar. Son fragmentos de XAML que pueden ser "instanciados" según sea necesario, rellenados con detalles de acuerdo con los datos de origen para los que fueron creados. En pocas palabras, si extendemos nuestro código ListBox de la siguiente manera:

<ListBox x:Name="MyListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Title}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

luego, la lista creará un TextBox para cada elemento en su fuente, y esos TextBoxes tendrán sus propiedades de Text "rellenadas" con valores de la propiedad Title de nuestros objetos.

Si ejecutamos la aplicación ahora, obtendremos el mismo resultado anterior *, incluso si eliminamos la implementación personalizada de ToString . Lo que es beneficioso de esto es que podemos personalizar esta plantilla mucho más allá de las capacidades de una string simple (y ToString ). Podemos usar cualquier elemento XAML que queramos, incluidos los personalizados, y podemos "vincular" sus valores a los datos reales de nuestros objetos (como Title en el ejemplo anterior). Por ejemplo, extienda la plantilla de la siguiente manera:

<ListBox x:Name="MyListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock FontStyle="Italic" Text="{Binding Author}" />
                <TextBlock FontSize="18" Text="{Binding Title}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

¡Entonces obtenemos una buena vista formateada de nuestros libros!