Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1909, comments - 2047, trackbacks - 352

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

Cookie e Privacy

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

Creare un aggregatore di feed RSS con VB 2008, WPF & LINQ - sesta parte

Riprendiamo oggi, dopo un periodo di pausa, il tutorial che ci ha permesso di ricostruire la mia applicazione, basata su Windows Presentation Foundation, chiamata Custom RSS Feed Aggregator e pubblicata su CodePlex a questo indirizzo. Se avete perso le puntate precedenti:

 

Creare un aggregatore di feed RSS con VB 2008, WPF & LINQ - prima parte

 

Creare un aggregatore di feed RSS con VB 2008, WPF & LINQ - seconda parte

 

Creare un aggregatore di feed RSS con VB 2008, WPF & LINQ - terza parte

 

Creare un aggregatore di feed RSS con VB 2008, WPF & LINQ - quarta parte

 

Creare un aggregatore di feed RSS con VB 2008, WPF & LINQ - quinta parte

 

In questo post iniziamo la seconda fase del tutorial, ossia l’applicazione di stili e control template all’interfaccia grafica utilizzando Microsoft Expression Blend 2.0. Se non avete questo strumento di design, indispensabile per lavorare seriamente con WPF, potete scaricare l’edizione Trial a questo indirizzo.

 

Una volta scaricato, installato ed avviato, potete aprire direttamente da Blend il progetto precedentemente creato in Visual Studio 2008. In questo primo post ci occuperemo di assegnare uno stile agli elementi della ListView, quindi ListViewItem, affinchè assumano un aspetto diverso al passaggio del puntatore del mouse oppure nel momento in cui vengono selezionati.

 

Nella parte sinistra dell’area di lavoro, c’è una tool window chiamata Objects and Timeline. Da qui possiamo spostarci agevolmente all’interno del Visual Tree. Espandiamo i vari controlli, fino a rendere visibile il controllo FeedListView, quindi selezioniamolo. Fatto questo, dal menu Object selezioniamo il comando Edit other styles|Edit ItemContainerStyle|Create Empty, come mostrato in figura:

 

 

in questo modo stiamo creando uno stile da assegnare al contenitore di ciascun ListViewItem. Dopo aver assegnato un identificatore per lo stile, vedrete che Expression Blend mostra, nel designer, un ListViewItem che, una volta personalizzato, influenzerà tutti gli elementi analoghi. L’operazione successiva da eseguire è associare un evento all’aspetto estetico: ipotizzando di voler definire un gradiente diverso per quando l’elemento viene selezionato, dobbiamo impostare il property trigger chiamato IsSelected. Nella tool window chiamata Triggers, posta sulla sinistra, facciamo clic su +Property e scegliamo la proprietà IsSelected, impostando la condizione da verificare su True, come mostrato in figura:

 

 

 

A questo punto noterete che l’area di design viene contornata da un bordo rosso e decorata dalla scritta “Trigger recording is on”. Sostanzialmente è uno scenario analogo a quando registrate una macro in Microsoft Office. Detto questo, dobbiamo stabilire il nuovo gradiente da assegnare all’elemento quando viene selezionato. Nella finestra delle proprietà, posta sulla destra, ci accertiamo che sia attivo l’elemento Background, quindi facciamo clic sul pulsante Gradient brush (uno dei riquadri posti appena sopra le schede Editor e Color resources). La figura seguente mostra la finestra delle proprietà e il nuovo gradiente, che voi potrete modificare come preferite:

 

 

 

Per aggiungere più livelli al gradiente è sufficiente fare clic col mouse sulla barra del gradiente stesso. A questo punto, il nostro ListViewItem si presenta, a design-time, come in figura:

 

 

 

Ora definiamo un nuovo gradiente per quando il puntatore del mouse passa sull’elemento. Dobbiamo quindi ripetere i passaggi sopra descritti per impostare il property trigger IsMouseOver su True e assegnare il nuovo gradiente tramite finestra delle proprietà. Scegliete i colori che preferite, nel mio caso il ListViewItem si presenta così:

 

 

 

Fate doppio clic sull’area di lavoro per terminare la registrazione dei Trigger ed avviate l’applicazione premendo F5. Il risultato ottenuto è quello evidenziato nella seguente figura, in cui il primo elemento è quello che ha il focus, mentre il secondo è quello effettivamente selezionato:

 

 

Ultima curiosità: per tutto il lavoro svolto, Microsoft Expression Blend ha generato codice XAML riutilizzabile anche in Visual Studio. Per vedere tale codice, è sufficiente fare clic sulla scheda XAML del designer di Expression Blend. Il codice XAML generato è il seguente:

 

            <Style x:Key="ListViewItemStyle1" TargetType="{x:Type ListViewItem}">

                  <Style.Triggers>

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

                             <Setter Property="Background">

                                   <Setter.Value>

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

                                               <GradientStop Color="#FF080F69" Offset="0"/>

                                               <GradientStop Color="#FF3C429B" Offset="1"/>

                                               <GradientStop Color="#FFF0F0F7" Offset="0.384"/>

                                         </LinearGradientBrush>

                                   </Setter.Value>

                             </Setter>

                        </Trigger>

                        <Trigger Property="IsMouseOver" Value="True">

                             <Setter Property="Background">

                                   <Setter.Value>

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

                                               <GradientStop Color="#FF95E6EB" Offset="0"/>

                                               <GradientStop Color="#FF92CAE1" Offset="1"/>

                                               <GradientStop Color="#FFB3B9ED" Offset="0.335"/>

                                         </LinearGradientBrush>

                                   </Setter.Value>

                             </Setter>

                        </Trigger>

                  </Style.Triggers>

            <EventSetter Event="GotFocus" Handler="Item_GotFocus"/>

        </Style>

 

Probabilmente state già iniziando a capire perchè Expression Blend sia uno strumento indispensabile per chi vuole lavorare con WPF, anche se nell’ottica del developer e non per forza del designer. Scrivere uno stile simile in Visual Studio 2008 può non essere complicato, ma quando si tratterà di applicare un control template, costituito da decine di righe di XAML a volte non di semplice comprensione, tutto sarà più chiaro J

 

Alessandro

Print | posted on sabato 6 dicembre 2008 18:31 | Filed Under [ Visual Basic Visual Studio 2008 Windows Presentation Foundation LINQ ]

Powered by:
Powered By Subtext Powered By ASP.NET