Blog de Oskar Alvarez

DataTemplates en WPF

Los DataTemplates en WPF nos van a permitir definir uListViewna plantilla para una clase de datos, es decir como vamos a mostrar visualmente al usuario. Generalmente se suelen utilizar en los controles de listas como son ItemsControl, ListBox, ListView…

Si no utilizamos nuestro propio DataTemplate en estos controles el tiene por defecto como DataTemplate un TextBlock. Si enlazamos un objeto complejo como Persona llamará a ToString() de esta clase y lo enlazara al TetBloxk por defecto, mostrandonos

Pero donde definimos el DataTemplate?, esta definición puede estar en varios sitios en el propio control como por ejemplo

<ListBox ItemsSource="{Binding}" BorderBrush="Transparent" 
         Grid.IsSharedSizeScope="True"
         HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Como un recurso, en el cual se le dice el tipo de objeto que se va a enlazar

<DataTemplate x:Key="itemsTemplate">
        <Border x:Name="personsBorder" Style="{StaticResource PersonBorderStyle}">
            <Grid>
                <StackPanel Orientation="Horizontal">

                                     <Image Width="40" Height="40" 
                           Source="{Binding Path=ImageRef, 
                        Converter={StaticResource imageConverter}}">
                        <Image.BitmapEffect>
                            <DropShadowBitmapEffect />
                        </Image.BitmapEffect>

                    </Image>

                    <TextBlock x:Name="personName" 
                               Text="{Binding Name}"  
                               Padding="15,15"
                               Foreground="Black" />
        
                </StackPanel>
            </Grid>
        </Border>
    </DataTemplate>

A la hora de asociarlo a la lista es como cualquier recurso en este caso a la propiedad ItemTemplate

<ItemsControl x:Name="personItems" Grid.Row="1" 
            HorizontalAlignment="Stretch"   
            Margin="10" 

      ItemTemplate="{StaticResource itemsTemplate}" 
      VerticalAlignment="Center"
        />

Aquí tenéis un ejemplo en el que mostramos una listado de personas y de ha definido un DataTemplate