WPF Cookbook: personalizzare una ListBox

<< Oracle DataAccess: una valida alternativa… | Home | Correttezza ed integrità dei dati: l’oro della nostra azienda. >>

WPF Cookbook: personalizzare una ListBox – Part 2

Una delle (molte) cose che fanno VERAMENTE la differenza nell’impiego di WPF è il concetto di Stile e Template di controllo. Un concetto così raffinato è impossibile da trovare in altri ambienti client (leggi Windows Forms). In pratica il concetto di stile e quello di template di controllo vanno di pari passo, in quanto mentre il primo definisce le caratteristiche di un particolare controllo quali Font, Colori, dimensioni dei bordi, effetti vari etc., il secondo definisce la struttura del controllo stesso.

La caratteristica veramente dirompente consiste però nella possibilità di cambiare completamente la struttura del controllo mantenendone le funzionalità. Nel nostro caso, infatti, vogliamo “rendere presentabile” la listbox, senza però perderne le caratteristiche di base. Definiremo lo stile nel file App.xaml, anche se personalmente consiglio sempre di impiegare un file ResourceDictionary, in modo da renderlo “intercambiabile”.

        1: <Style x:Key="CoolListBoxStyle" TargetType="{x:Type ListBox}">

       2:     <Style.Resources>

       3:         <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>

       4:         <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>

       5:     </Style.Resources>

       6:     <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>

       7:     <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>

       8:     <Setter Property="BorderThickness" Value="1"/>

       9:     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>

    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>

    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>

    <Setter Property="VerticalContentAlignment" Value="Center"/>

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type ListBox}">

                <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" 

                    BorderThickness="{TemplateBinding BorderThickness}" Padding="1" CornerRadius="10,10,10,10" Height="Auto">

                    <ScrollViewer Padding="{TemplateBinding Padding}" Focusable="false">

                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

                    </ScrollViewer>

                </Border>                        

                <ControlTemplate.Triggers>

                    <Trigger Property="IsEnabled" Value="false">

                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>

                    </Trigger>

                    <Trigger Property="IsGrouping" Value="true">

                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>

                    </Trigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

    <Setter Property="ListBox.ItemContainerStyle">

        <Setter.Value>

            <Style>

                <Setter Property="Control.Padding" Value="0"></Setter>

                <Style.Triggers>

                    <Trigger Property="ListBoxItem.IsSelected" Value="True">

                        <Setter Property="ListBoxItem.Background">

                            <Setter.Value>

                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                    <GradientStop Color="#FFFFFFFF"/>

                                    <GradientStop Color="#9968D2FA" Offset="0.536"/>

                                </LinearGradientBrush>

                            </Setter.Value>

                        </Setter>

                    </Trigger>

                </Style.Triggers>

            </Style>

        </Setter.Value>

    </Setter>

</Style>

Focalizzandoci sullo stile CoolListBoxStyle, tralasciando il bordo arrotondato e sfumato che “wrappa” lo scroll viewer e l’items presenter, possiamo notare un paio di accorgimenti “particolari”. Nello stile sono definite delle Resources, e nello specifico viene fatto lo shadowing delle proprietà di Highlight e Control Brush. Questo perchè vogliamo per prima cosa eliminare il brutto effetto di “selezione blu”. Questo è una delle cose più fastidiose e, una volta che si sa come fare, più facili da eliminare nel controllo listbox.

Avendo impostato anche uno sfondino ed i colori del data template a White, un background semitrasparente con gradiente sulla listbox i risultato è come quello nella figura a destra; già buono, ma non ancora perfetto. Manca infatti una qualunque variazione di colore/struttura nell’item selezionato. Questo non va bene, perchè di solito la selezione dell’elemento è la chiave per una buona usabilità del controllo. L’utente deve avere ben chiaro che cosa sta selezionando, per cui bisogna scegliere una buona tecnica di evidenziazione della selezione.

Enter ItemViewModel

La selezione è una caratteristica dell’elemento della listbox; quindi perchè non intervenire a livello dell’elemento, ovvero nella view associata al FilmViewModel? Questa sembra una buona idea, ma con WPF si può perseguire solo in parte. Infatti i colori del bordo dell’item si possono controllare dalla view associata all’item stesso, mentre lo sfondo no. Il background deve essere impostato a livello di Listbox e reperito tramite una Binding Expression piuttosto articolata che vedremo nel prossimo snippet.

In pratica, nel nostro caso, si tratta di andare a valorizzare lo sfondo ed il bordo dell’elemento Border. Lo faremo prendendo il valore dello sfondo dichiarato a livello di ListBox.ItemContainerStyle nello stile CoolListBoxStyle. Nello snippet seguente possiamo vedere come l’utilizzo di una Binding Expression con impostata la proprietà RelativeSource = FindAncestor ed AncestorType=ListBoxItem indica al motore di rendering di WPF di “risalire” l’albero dei controlli e trovare il controllo contenitore di tipo ListBoxItem. Essendo questa istruzione collocata in un DataTemplate contenuto a sua volta in un ListBoxItem creato dinamicamente dal databinding della listbox, il risultato è piuttosto scontato:

Se l’elemento (ListBoxItem) è selezionato, viene applicato un colore al bordo dell’elemento, definito nel trigger dello style del border stesso
Lo sfondo viene reperito dallo stile impostato (CoolListBoxStyle) ed è un gradiente che fa variare di fatto la proprietà background del ListBoxItem
La proprietà Background del ListBoxItem viene reperita dalla binding expression ed assegnata allo sfondo del Border.

       1: <UserControl x:Class="FilmList.Views.FilmView"

       2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:     xmlns:Converters="clr-namespace:FilmList.Converters">

       5:     <UserControl.Resources>

       6:         <Converters:ImagePathConverter x:Key="ImagePathConverter"/>

       7:     </UserControl.Resources>

       8:     <Border BorderThickness="2" CornerRadius="10" Padding="4" Margin="2" 

       9:         Background="{Binding Path=Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}">

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition/>

                <RowDefinition/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="70"></ColumnDefinition>

                <ColumnDefinition Width="300"></ColumnDefinition>

                <ColumnDefinition Width="*"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <Border Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Stretch" Background="White" Margin="0,0,10,0" CornerRadius="4">

                <Image  Source="{Binding Path=Cover, Converter={StaticResource ImagePathConverter}, ConverterParameter=../Images}" 

                    Margin="2,2,2,2" VerticalAlignment="Center" Height="64"/>

            </Border>

            <TextBlock Grid.Row="0" Grid.Column="1" Style="{StaticResource SubTitleStyle}" Text="{Binding Path=Title}" MinWidth="50" Margin="0,0,5,0" />

            <TextBlock Grid.Row="1" Grid.Column="2" Style="{StaticResource SubTitleStyle}" Text="{Binding Path=Genre}" FontSize="20" MinWidth="50" Margin="0,0,5,0" />

            <TextBlock Grid.Row="1" Grid.Column="1" Style="{StaticResource SubTitleStyle}" Text="{Binding Path=OriginalTitle}" FontSize="20" MinWidth="50" Margin="0,0,5,0" />            

        </Grid>

        <Border.Style>

            <Style>

                <Style.Triggers>

                    <DataTrigger Binding="{Binding Path=IsSelected, 

                        RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True">

                        <Setter Property="Border.BorderBrush" Value="#FF0561CE"/>

                    </DataTrigger>

                    <DataTrigger Binding="{Binding Path=IsSelected, 

                        RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="False">

                        <Setter Property="Border.BorderBrush" Value="#FF9B9B9B"/>

                    </DataTrigger>

                </Style.Triggers>

            </Style>

        </Border.Style>

    </Border>

</UserControl>

Mi preme ribadire un paio di cose:

La binding Expression {Binding Path=Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}} significa:
- Rispetto a “dove” ti trovi, cerca il primo “ancestor” (antenato) di tipo ListBoxItem, ovvero il tuo contenitore di tipo ListBoxItem. Di ciò che trovi, prendi la proprietà Background, ed usala come sfondo dell’elemento border. Ovviamente il valore di Background varierà a seconda che l’elemento sia selezionato o meno.
Il DataTrigger impostato a livello di border ha lo scopo di selezionare un colore diverso anche per il bordo a seconda che l’elemento sia quello con selezione attiva.

Il risultato lo potete vedere nella immagine a destra. E’ stato completamente stravolto il comportamento della ListBox, annullando di fatto anche i colori di selezione blu standard e sostituendoli con dei piacevoli effetti di gradiente. Ovviamente è possibile aggiungere a tutto questo anche animazioni ed effetti sonori… ma questo è materiale per un altro articolo!

Se qualcuno di voi vuole fare altri esperimenti, il codice d’esempio lo può trovare qui.

Print | posted on giovedì 15 ottobre 2009 17:16 |

Feedback

# re: WPF Cookbook: personalizzare una ListBox – Part 2

Per quanto riguarda il riuso puoi ottenerlo anche con un semplice datatemplate, visto che usi RelativeBinding e cerchi un ListBoxItem dubito che tu possa utilizzarlo al di fuori di una listbox.
Per quanto riguarda l'overhead direi che se virtualizzi il container non dovrebbe essere granchè, sicuramente un datatemplate è un oggetto più 'light'.

16/10/2009 11:38 | Corrado Cavalli

Comments have been closed on this topic.

Confessions of a Dangerous Mind

My Links

News

Article Categories

Archives

Post Categories

Image Galleries

Blogs

Friends Blogs

Links