Utilizzo dei DataTemplate
Dobbiamo ricordare che uno dei principali obiettivi di WPF è riuscire a ottenere una separazione netta tra la presentazione e la logica applicativa, ed essere costretti a modificare parte della nostra classe per soddisfare esigenze esclusivamente di presentazione non va certo in questa direzione.
Proprio per favorire e rendere possibile questa separazione la classe ListBox espone la proprietà ItemTemplate del tipo DataTemplate al fine di definire il layout da utilizzare per la visualizzazione di ogni elemento della collezione.
Proseguendo con l'esempio, prepariamo un template composto da un Border con gli angoli leggermente smussati e al suo interno un Grid con un'unica riga e tre colonne, la prima della quale contiene un Image per visualizzare la cover del gioco, mentre le rimanenti due sono occupate invece da TextBlock che visualizzano rispettivamente il nome del gioco e il voto assegnato in fase di recensione dall'editore.
<Window x:Class="MyGamePlace.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:FairPlay="clr-namespace:MyGamePlace"
Title="MyGamePlace" Height="500" Width="500"
>
<Window.Resources>
<FairPlay:Reviews x:Key="GameReviews"/>
</Window.Resources>
<StackPanel>
<ListBox ItemsSource="{Binding Source={StaticResource GameReviews}, Path=GameReviews }" HorizontalContentAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border Padding="15" CornerRadius="10">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="DarkGray" Offset="0.0" />
<GradientStop Color="Black" Offset="1.0" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60px" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0" Source="{Binding Path=Game.Cover}" Stretch="UniformToFill" >
<Image.RenderTransform>
<SkewTransform CenterX="35" CenterY="25" AngleX="0" AngleY="-25" />
</Image.RenderTransform>
<Image.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Direction="130" ShadowDepth="15" Softness="0.5" Opacity="0.6"/>
</Image.BitmapEffect>
</Image>
<TextBlock FontSize="18" Foreground="White" VerticalAlignment="Center" TextAlignment="Center" Grid.Row="0" Grid.Column="1" Text="{Binding Path=Game.Name}"></TextBlock>
<TextBlock FontSize="18" Foreground="White" VerticalAlignment="Center" TextAlignment="Center" Grid.Row="0" Grid.Column="2" Text="{Binding Path=Vote}"></TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Window>
Il risultato è quello mostrato nell'immagine seguente; sicuramente più accattivante della semplice ListBox senza l'ausilio del Template.
Attenzione: Questo articolo contiene un allegato
Contenuti dell'articolo
- Pagina 1
- Pagina 3
- Pagina 4
- Pagina 5
Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.
Difficoltà
Stampa 
Download
10annidi.ASPItalia.com: iscriviti alla competizione e vinci fantastici premi ogni mese!
