Des items « à la Outlook » dans nos ListBoxs WPF ou Silverlight

La création d’une ListBox en WPF ou en Silverlight est une opération facile.
En revanche, on peut rencontrer des difficultés lorsque l’on veut utiliser des items de la même taille que la Listbox (« à la Outlook »).
L’image qui ci-dessous nous montre le résultat que l’on pourra escompté à la fin de l’article, notamment des elements pouvant se positionner à droite du ListBoxItem (l’element Platform ici).

Pour reproduire la chose, partons, tout d’abord d’une ListBox classique possédant un Item.
L’exemple ci-dessous est écrit en WPF mais pourrait être porté facilement en Silverlight.

<ListBox >
                    
<ListBoxItem>
       	<Grid Margin="5">
             		<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
                           <ColumnDefinition Width="*" ></ColumnDefinition>
</Grid.ColumnDefinitions>

                    <Border Background="LightGray" Width="40" Height="40">
                    	<Image Grid.Column="0"></Image>
</Border>

                    <StackPanel Grid.Column="1" Margin="10,0,10,0">
                    	<TextBlock Text="Donkey Kong Land" TextWrapping="NoWrap" FontSize="15"></TextBlock>

                           <DockPanel>
                           	<TextBlock Foreground="DarkGray" Text="Platform" DockPanel.Dock="Right"></TextBlock>
                                  <TextBlock Foreground="DarkGray" TextWrapping="WrapWithOverflow"  Text="Nintendo"></TextBlock>
</DockPanel>
</StackPanel>

</Grid>
</ListBoxItem>
</Listbox>

Voila ce que l’on obtient :

Le ListBoxItem de classe fournit par la ListBox ne possède pas, par défaut, la possibilité de s’étendre à la taille de la ListBox.
On va donc ajouter à la ListBoxItem cette fonctionnalité en créant un ItemContainerStyle spécifique.
Ce Style permet de controler les propriétés des ListBoxItems. La propriété HorizontalContentAlignment fixé à Stretch permettra à l’item de s’etendre sur toute la longueur de la ListBox :

<ListBox>
<ListBox.ItemContainerStyle>
       	<Style TargetType="ListBoxItem">
             		<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
…
</ListBox>

Pour parfaire le tout, on n’autorisera pas le scroll Horizontal du ScrollViewer de la ListBox :

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</ListBox>

On possède maintenant, une ListBox d’items « à la Outlook » qui donnera, à coup sûr, un look professionnel à vos applications !

leave your comment