ListBox con immagini

Il seguente esempio mostra come fare per inserire delle immagini in una listbox. La visualizzazione prevede gli items messi in orizzontale e per ogni item e' prevvista un'immagine e un testo alla base.
Per tale scopo viene creata una listbox facente riferimento ad una risorsa "listStyle" che definisce il template per l'item da visualizzare. Si noti che viene nascosta la barra verticale, mentre si utilizzarà solo quello orizzontale.

     <ListBox
      ItemContainerStyle="{StaticResource listStyle}"
      ScrollViewer.VerticalScrollBarVisibility="Hidden">
      <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
          <WrapPanel IsItemsHost="True"  />
        </ItemsPanelTemplate>
      </ListBox.ItemsPanel>
    </ListBox>

A questo punto nella sezione Resources della pagine e del controllo definiamo lo stile per l'item.

    <Style TargetType="{x:Type ListBoxItem}" x:Key="listStyle">
      <Setter Property="Template" Value="{StaticResource listControlTemplate}" ></Setter>
      <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}" />
    </Style>

In questo modo definiamo i SETTER e facciamo in modo che se la nostra listbox e' ridimensionabile in altezza, gli item verranno ridimensionati in modo da occupare tutta l'altezza e la larghezza verrà ridimensionata in modo proporzionale.
Definiamo quindi lo style listControlTemplate.

   <ControlTemplate x:Key="listControlTemplate" TargetType="{x:Type ListBoxItem}" >
      <Border x:Name="BorderImage" Margin="3,3,3,20" >
        <Grid x:Name="listItemGrid" VerticalAlignment="Stretch" >
          <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="20" />
          </Grid.RowDefinitions>
          <Border BorderThickness="1" Background="Black" >
          <Image  x:Name="coverImage2" Tag="{Binding nPage}"  Source="{Binding ., Converter={StaticResource ImageConverter} }"  Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Grid.Row="0" RenderTransformOrigin="1,1">
            <Image.RenderTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform X="0" Y="0"/>
              </TransformGroup>
            </Image.RenderTransform>
          </Image>
          </Border>
          <TextBlock Grid.Row="1" Text="{Binding nPage}" FontWeight="Bold"
         HorizontalAlignment="Center" />
        </Grid>
      </Border>
      <ControlTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=sfondo}" Value="1">
          <Setter Property="Background" Value="Aquamarine" TargetName="BorderImage"></Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding sfondo}" Value="10" >
          <Setter Property="Background" Value="Black"  TargetName="BorderImage"></Setter>
        </DataTrigger>
        <Trigger Property="IsSelected" Value="True">
          <Setter Property="Background" Value="Blue" TargetName="BorderImage"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

Quindi definiamo che il binding dell'immagine avviene tramite ImageConvert.

<local:ImageConverter x:Key="ImageConverter" />

Questa e' una classe nella quale possiamo prendere le nostre immagini da file, da database o altro. Ovviamente l'informazione sarà nel campo (io normalmente uso delle classi in qui definisco i campi e poi per la lista dei dati uso una ObservableCollection che collego alla listbox.

La classe viene definita in questo modo :

 #region "Converter Image"
  public sealed class ImageConverter : IValueConverter
  {
    public object Convert(object value, Type targetType,
                          object parameter, CultureInfo culture)
    {
      try
      {
        BitmapSource btImage = null;
        PageInfo pg = (PageInfo)value;
        if (pg.IconPath != "")
        {
          BitmapImage ba = new BitmapImage(new Uri(pg.IconPath));
          ba.BeginInit();
          ba.CacheOption = BitmapCacheOption.OnLoad;
          ba.EndInit();
          btImage = ba;
        }
        else
        {
            btImage =new BitmapImage();
        }
        if (btImage.CanFreeze) btImage.Freeze();
        return btImage;
      }
      catch
      {
        return new BitmapImage();
      }
    }
    public object ConvertBack(object value, Type targetType,
                              object parameter, CultureInfo culture)
    {
      throw new NotImplementedException();
    }
  }
  #endregion

La classe PageInfo contiene i campi di cui faccio binding nella listbox; nel campo IconPath c'e' il path dell'immagine.

Ricordarsi di fare il Freeze dell'immagine altrimenti il GC non libererà mai la memoria anche nel caso si pulisca la listview.