Introduzione.
In questo articolo vedremo l’utilizzo della classe PopUp presente in Silverlight 3 e 4.
La classe popup, ci permette di visualizzare a video, del testo, permettendo in questo modo di visualizzare delle informazioni, il tutto come mostrato in figura 1. Nella popup possiamo inserire immagini, pulsanti, testo ed altri oggeti.
Figura 1
Introduzione di base.
Ma vediamo in dettaglio questa classe, e come la possiamo utilizzare nei nostri progetti.
Dopo aver creato un progetto di tipo Silverlight, in visualizzazione XAML, inseriamo un controllo textblox, nel quale visualizzare la popup al click sulla scritta.
Subito dopo inseriamo la classe Popup, al cui interno si trova un controllo border ed un controllo Textblock che quest’ultimo avrà il compito di visualizzare il testo al click del mouse.
Qui di seguito si riporta il codice XAML
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Margin="20">
<TextBlock Height="38" TextWrapping="Wrap" Margin="20" Name="txbTesto" Text="Esempio PopUp" MouseLeftButtonDown="txbTesto_MouseLeftButtonDown" Width="152" />
<Popup Name="popUpinfo" MaxWidth="200">
<Border Background="Red" MouseLeftButtonDown="popUpinfo_MouseLeftButtonDown">
<TextBlock Margin="45" Name="txbPopup" Text="testo popup"></TextBlock>
</Border>
</Popup>
</StackPanel>
</Grid>
Come si vede dal precedente codice XAML il controllo TextBlock, contiene un testo che viene visualizzato appena si avvia l’applicazione, l’evento “mouseLeftButtonDown” esegue l’apertura della popup, impostando la proprietà IsOpen a true dell’oggetto PopUp.
La classe popup, contiene al suo interno, un controllo border, nel quale imposta il colore di sfondo del messaggio, mentre il controllo TextBlock, visualizza il testo che verrà visualizzato.
Il controllo Border ha impostato l’evento MouseLeftButtonDown, in questo modo al click sul testo della popup verrà nascosto tramite la proprietà IsOpen a False.
Qui di seguito si riporta il codice C# e VB.Net della gestione degli eventi.
VB.Net
Private Sub txbTesto_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
popUpinfo.IsOpen = True
End Sub
Private Sub popUpinfo_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
popUpinfo.IsOpen = False
End Sub
C#
private void txbTesto_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
popUpinfo.IsOpen = true;
}
private void popUpinfo_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
popUpinfo.IsOpen = false;
}
Caricamento dinamico
Vediamo in questa parte, come caricare dinamicamente una popup tramite il clik di un pulsante il tutto come mostrato in figura 2.
Figura 2
Aggiungiamo nel nostro progetto un controllo stackpanel ed un pulsante, il file XAML dev’essere simile a quello riportato qui di seguito.
Codice XAML
<StackPanel x:Name="skpShow" Background="White">
<Button Width="100" Height="50" x:Name="btnPopUp"
Click="btnPopUp_Click" Content="Apri PopUp" />
</StackPanel>
Ora passiamo in visualizzazione codice.
Si crea un oggetto di tipo Popup visibile in tutto l’applicazione di Silverlight, per quell’istanza di finestra.
Dopo la dichiarazione di classe, inserire la creazione di tale oggetto, il tutto come riportato qui di seguito.
VB.Net
Private finestra As New Popup()
C#
Popup Finestra = new Popup();
Si ricorda che per utilizzare la classe PopUp, occorre aggiungere lo spazio dei nomi System.Windows.Controls.Primitives
Come riportato qui di seguito:
VB.Net
Imports System.Windows.Controls.Primitives
C#
using System.Windows.Controls.Primitives;
Completata questa operazione, nell’evento click del pulsante dobbiamo creare la nostra popup, che sarà compostato da un controllo stackpanel, nel quale avremmo un controllo textblock per visualizzare del testo, un pulsante, che avrà il compito di chiudere la finestra popup, tramite la proprietà isopen a false, un controllo border per impostare lo sfondo.
Il codice riportato qui di seguito, riguarda tali operazioni, la creazione del pannello, dei vari oggetti e la relativa visualizzazione.
Nel codice viene creato anche gestore di evento per il click del pulsante, in modo che si chiuda la finestra popup dopo aver fatto click sul pulsante.
Vediamo qui di seguito il codice completo per il linguaggio VB.Net e C#
VB.Net
Private Sub btnPopUp_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
'Creo un pannello
Dim pannello As New StackPanel()
pannello.Background = New SolidColorBrush(Colors.Red)
'una teblock
Dim txbTesto As New TextBlock()
txbTesto.Text = "Testo popup"
txbTesto.Margin = New Thickness(5.0)
'aggiungo al pannello
pannello.Children.Add(txbTesto)
'creo un pulsante
Dim pulsante As New Button()
pulsante.Content = "Chiudi finestra"
pulsante.Margin = New Thickness(5.0)
'gestore di evento
AddHandler pulsante.Click, AddressOf pulsante_Click
'lo aggiungo al pannello
pannello.Children.Add(pulsante)
'imposto lo sfondo
Dim sfondo As New Border()
sfondo.BorderBrush = New SolidColorBrush(Colors.Green)
sfondo.BorderThickness = New Thickness(5.0)
sfondo.Child = pannello
Finestra.Child = sfondo
'posizionamento popUp
finestra.VerticalOffset = 100
finestra.HorizontalOffset = 900
Finestra.IsOpen = True
End Sub
Private Sub pulsante_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
'Chiudo la popup
finestra.IsOpen = False
End Sub
C#
private void btnPopUp_Click(object sender, RoutedEventArgs e)
{
//Creo un pannello
StackPanel pannello = new StackPanel();
pannello.Background = new SolidColorBrush(Colors.Red);
//una teblock
TextBlock txbTesto = new TextBlock();
txbTesto.Text = "Testo popup";
txbTesto.Margin = new Thickness(5.0);
//aggiungo al pannello
pannello.Children.Add(txbTesto);
//creo un pulsante
Button pulsante = new Button();
pulsante.Content = "Chiudi finestra";
pulsante.Margin = new Thickness(5.0);
//gestore di evento
pulsante.Click += new RoutedEventHandler(pulsante_Click);
//lo aggiungo al pannello
pannello.Children.Add(pulsante);
//imposto lo sfondo
Border sfondo = new Border();
sfondo.BorderBrush = new SolidColorBrush(Colors.Green);
sfondo.BorderThickness = new Thickness(5.0);
sfondo.Child = pannello;
Finestra.Child = sfondo;
//posizionamento popUp
Finestra.VerticalOffset = 100;
Finestra.HorizontalOffset = 900;
Finestra.IsOpen = true;
}
private void pulsante_Click(object sender, RoutedEventArgs e)
{
Finestra.IsOpen = false;
}
Conclusioni
L’articolo ha voluto fornire al lettore, l’utilizzo del controllo popup, una finestra che può ritornare utile nel visualizzare determinate informazioni all’utilizzatore dell’applicazione.
In questi esempi di codice, si è visto come utilizzarla normale o dinamicamente.