example - Cómo utilizar ListView en la plataforma universal de Windows(aplicación de Windows 10)

gridview uwp

Question

¿Alguien puede explicar ItemTemplate.DataTemplate y ListView ? En este fragmento de código. Realmente no entiendo el concepto de Templates , será de gran ayuda si alguien pudiera aclarar eso también. Tuve que mirar esta pregunta:

Aplicación de Metro: ListView ItemTemplate DataTemplate para el elemento seleccionado

Pero sigue confundido. ¡Gracias! :(

<ListView Margin="10" Name="lvDataBinding">
     <ListView.ItemTemplate>
           <DataTemplate>
                <WrapPanel>
                    <TextBlock Text="Name: " />
                    <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                    <TextBlock Text=", " />
                    <TextBlock Text="Age: " />
                    <TextBlock Text="{Binding Age}" FontWeight="Bold" />
                    <TextBlock Text=" (" />
                    <TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
                    <TextBlock Text=")" />
                    </WrapPanel>
            </DataTemplate>
     </ListView.ItemTemplate>
</ListView>

Answer 1

ListView es un control que le permite mostrar dinámicamente una lista de elementos para que los usuarios puedan desplazarse por esa lista de elementos para verlos y encontrar lo que puedan necesitar. Es muy simple definirlo en XAML:

<ListView x:Name="StudentsList" />

Ahora, digamos que tienes una lista de estudiantes universitarios. Cada estudiante está representado con una clase de estudiante simple.

public class Student
{
    public string Name { get; set; }
    public int Age { get; set; }
}

Puede haber docenas, cientos o miles de estudiantes, por lo que no puede definir la UI de forma estática. Por lo general, mantienes a esos estudiantes en algún tipo de lista / colección en código subyacente. Los obtiene de varias fuentes: base de datos, servicios web o código duro, como lo haré ahora con fines de demostración:

private List<Student> listOfStudents = new List<Student>();

public MainPage()
{
    this.InitializeComponent();

    listOfStudents.Add(new Student { Name = "John", Age = 20 });
    listOfStudents.Add(new Student { Name = "Bob", Age = 21 });
    listOfStudents.Add(new Student { Name = "Steve", Age = 19 });
    listOfStudents.Add(new Student { Name = "Marko", Age = 18 });
    listOfStudents.Add(new Student { Name = "Igor", Age = 20 });
    listOfStudents.Add(new Student { Name = "Ivan", Age = 20 });
    listOfStudents.Add(new Student { Name = "Nina", Age = 21 });
    listOfStudents.Add(new Student { Name = "Paul", Age = 20 });
    listOfStudents.Add(new Student { Name = "Ana", Age = 23 });
    listOfStudents.Add(new Student { Name = "Ivana", Age = 20 });

    StudentsList.ItemsSource = listOfStudents;
}

Esa lista / colección sirve como fuente de elementos para ListView, por lo que establece la propiedad ItemsSource de ListView para conectar los dos y mostrar la lista en la interfaz de usuario. Usando un ListView, todos los elementos se representan dinámicamente independientemente del número de elementos.

Si ejecutáramos la aplicación ahora, sería bastante feo, sin embargo:

Necesitas definir un DataTemplate para hacerlo más bonito. Como cada estudiante tiene un nombre y edad, querrá usar esas propiedades para que se vea más bonita. Este DataTemplate está asignado a la propiedad ListView.ItemTemplate y ListView lo usará para todos y cada uno de los elementos de la lista.

<ListView x:Name="StudentsList">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" 
                           Margin="20,0,20,8"
                           FontSize="24" 
                           FontStyle="Italic" 
                           FontWeight="SemiBold"
                           Foreground="DarkBlue" />
                <TextBlock Text="{Binding Age}" 
                           Margin="20,0,20,8"
                           FontSize="16"
                           Foreground="DarkGray" 
                           Opacity="0.8" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Mira, usé el DataTemplate para definir qué propiedades mostrar y cómo representarlas. Jugué con el tamaño de fuente, los colores de fuente, los márgenes, etc. Admito que esto no es realmente tan bonito, pero estoy seguro de que obtendrás el punto:

Una cosa más que notarás es que usé una construcción de enlace como esta:

<TextBlock Text="{Binding Name}" ... />

Básicamente, esto significa: compruebe si el objeto tiene la propiedad Name y, si la tiene, TextBlock.Text como TextBlock.Text .

Tenga en cuenta que las cosas pueden complicarse más, por lo que podría usar diferentes plantillas para diferentes elementos en una lista, etc. Pero creo que eso no está en el alcance de la pregunta.

TLDR: ListView renderiza dinámicamente una lista de elementos. ItemsSource define la fuente de los artículos para ese ListView . DataTemplate define una plantilla que se usará para renderizar algo. Esta DataTemplate se asigna a la propiedad ItemTemplate de ListView para que ListView sepa que debe usar exactamente esa plantilla para representar sus elementos.