Come probabilmente sapete, nelle soluzioni create coi Visual Studio Tools for Office è possibile utilizzare controlli utente WPF ricorrendo all'interoperabilità con Windows Forms, ospitando i controlli WPF all'interno di ElementHost e di questo impostare la proprietà Child che punta al controllo WPF desiderato. Ne parlammo un po' di tempo fa in questo vecchio post.
Ovviamente non siamo limitati all'aggiunta dei soli controlli esposti dalla libreria di classi base. Infatti è possibile aggiungere alle soluzioni VSTO anche controlli utente WPF personalizzati ed è ciò che vedremo in questo post. Possiamo, per esempio, creare una soluzione per la realizzazione di un add-in per Microsoft Excel 2007 in Visual Studio 2008 (File|New|Project|Visual Basic|Office 2007).
Il primo passaggio è costituito dalla creazione del controllo WPF. Selezioniamo il comando Project|Add new item e selezioniamo poi il template WPF User Control, come mostrato in figura:
Il nostro controllo si chiamerà CompositeUserControl.xaml. Questa è solo una dimostrazione didattica, di conseguenza non ci soffermeremo sulla creazione di un controllo utente complesso, ma piuttosto su qualcosa di semplice che ci sia utile per capire. Abbiamo una semplice griglia, suddivisa in due righe:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
Poi potremmo prevedere un messaggio di testo e un pulsante:
<TextBlock Grid.Row="0" Text="Write something here"
FontWeight="Bold" FontSize="14" Name="Text1">
<TextBlock.Foreground>
<SolidColorBrush Color="Black" x:Name="TextBrush1"/>
</TextBlock.Foreground>
</TextBlock>
<Button Grid.Row="1" Width="100" Height="40" Name="Button1">Click me!</Button>
</Grid>
Abbiamo specificato un elemento SolidColorBrush per il TextBlock perchè vogliamo rendere più simpatica l'interfaccia utilizzando una ColorAnimation da applicare al TextBlock e questa richiede un oggetto Brush come destinazione. Ipotizzando di voler avviare l'animazione al caricamento della griglia, possiamo gestire i Grid.Triggers come segue:
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="Black" To="Red"
AutoReverse="True" RepeatBehavior="Forever"
Duration="0:0:3"
Storyboard.TargetProperty="Color"
Storyboard.TargetName="TextBrush1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
A questo punto possiamo fare doppio clic sul pulsante nel designer affinché Visual Studio 2008 generi per noi un gestore di evento Click, che potremmo implementare come segue:
Private Sub Button1_Click(ByVal sender As System.Object, _
ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
System.Windows.MessageBox.Show("You clicked!")
End Sub
Come abbiamo detto in precedenza, si tratta di un qualcosa di semplice per capire come funzionino le cose. Compiliamo la soluzione affinché il nuovo controllo WPF sia disponibile nella toolbox e riconosciuto dall'IDE.
Ora aggiungiamo al progetto un nuovo controllo utente di tipo Windows Forms; questo passaggio è necessario per poter ospitare e utilizzare il nostro controllo WPF. Selezioniamo il comando Project|Add user control quindi il template User Control come riportato in figura:
Il controllo si chiamerà HostUserControl.vb. Nella casella degli strumenti, espandiamo la scheda chiamata WPF Interoperability (relativa all'interoperabilità tra Win Forms e WPF) e facciamo doppio clic sul controllo ElementHost, che verrà così aggiunto sulla superficie del nostro controllo utente. Questa operazione aggiungerà, inoltre, tutti i riferimenti necessari agli assembly principali di WPF, come WindowsBase.dll, PresentationCore.dll e PresentationFramework.dll. Facciamo clic sulla freccetta denominata ElementHost Tasks e selezioniamo il controllo WPF che dev'essere ospitato dalla finestra di popup illustrata in figura:
Come si può osservare dal designer, il nostro controllo Windows Forms ora ospita un controllo WPF personalizzato e funzionante a tutti gli effetti:
Per dimostrare come possiamo interagire con i vari elementi del controllo WPF, passiamo all'editor di codice Visual Basic per il file HostUserControl.vb e digitiamo quanto segue:
Public Sub New()
InitializeComponent()
'Posso interagire con gli elementi del mio controllo utente
'purchè abbiano impostata la proprietà Name
Me.CompositeUserControl1.Text1.Text = "WPF & VSTO Demo"
End Sub
Abbiamo semplicemente cambiato a run-time una proprietà di uno dei controlli che costituiscono l'interfaccia del controllo WPF. Ora ipotizziamo di voler crerare un riquadro delle attività personalizzato per Microsoft Excel 2007 che conterrà il nostro user control. Per informazioni su come creare riquadri attività personalizzati per le applicazioni di Microsoft Office System nelle soluzioni VSTO, potete consultare questo mio articolo sul Visual Basic Developer Center. Facciamo doppio clic sul file ThisAddin.vb e digitiamo il seguente codice:
Imports Microsoft.Office.Tools
…
Private WpfTaskPane As CustomTaskPane
Private Sub ThisAddIn_Startup(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Startup
Me.WpfTaskPane = Me.CustomTaskPanes.Add(New HostUserControl, "WPF Composite Control")
Me.WpfTaskPane.Visible = True
End Sub
Se ora proviamo ad avviare il componente aggiuntivo, dovremmo ottenere un risultato simile alla figura:
Se tutto è andato a buon fine, il colore di primo piano del messaggio di testo cambierà a intermittenza passando dal nero al rosso in autoreverse J
Quindi è abbastanza evidente che integrare controlli WPF personalizzati nelle soluzioni VSTO sia piuttosto semplice, potendo così estendere quanto già sapevamo relativamente all'uso dei controlli WPF standard.
Alessandro