WPF – Il controllo Image

Questo testo fa parte del capitolo 27 del libro “Visual Basic 2010 spiegato a mia nonna” che sarà pubblicato fra poche settimane. Trovate l’esempio di codice tra gli esempi liberamente scaricabili al seguente indirizzo:https://deghetto.wordpress.com/2011/02/05/libro-visual-basic-2010-spiegato-a-mia-nonna/

Un controllo Image di WPF ha la stessa funzione del suo omologo di Windows Forms: visualizzare delle immagini. Nella seguente figura potete vedere il controllo in fase di progettazione.

La definizione XAML predefinita è la seguente:

   1:  <Image

   2:    Height="150"

   3:    HorizontalAlignment="Left"

   4:    Margin="10,10,0,0"

   5:    Name="Image1"

   6:    Stretch="Fill"

   7:    VerticalAlignment="Top"

   8:    Width="200" />

 

Vediamo ora un esempio che permette di visualizzare un insieme di immagini incluse nell’applicazione. A ogni click che l’utente farà sull’immagine, quest’ultima passerà alla visualizzazione dell’immagine successiva. All’ultima immagine, infine, la visualizzazione tornerà alla prima immagine. Il codice XAML è il seguente:

   1:  <!—Esempio 27.07 -->

   2:    <Window x:Class="MainWindow"

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

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

   5:      Title="MainWindow" Height="393" Width="482">

   6:      <Grid>

   7:        <Image

   8:          Height="301"

   9:          HorizontalAlignment="Center"

  10:          Margin="28,12,30,0"

  11:          Name="Image1"

  12:          Stretch="Uniform"

  13:          VerticalAlignment="Top"

  14:          Width="402"

  15:          Source="/27.07;component/Koala.jpg"

  16:          ClipToBounds="True" />

  17:        <Label

  18:          Content="Clicca sull'immagine per cambiarla"

  19:          Height="28"

  20:          HorizontalAlignment="Center"

  21:          Margin="28,314,30,0"

  22:          Name="Label1"

  23:          VerticalAlignment="Top"

  24:          Width="402"

  25:          FontWeight="Normal" />

  26:      </Grid>

  27:    </Window>

 

Il codice Visual Basic, invece, è il seguente:

   1:  ' Esempio: 27.07

   2:  Class MainWindow

   3:    Private indice As Integer = 1

   4:    Private arrayImmagini(2) As String

   5:    Public Sub New()

   6:      ' Chiamata richiesta dalla finestra di progettazione.

   7:      InitializeComponent()

   8:      ' Aggiungere le eventuali istruzioni di inizializzazione

   9:      ' dopo la chiamata a InitializeComponent().

  10:      arrayImmagini(0) = ".\Koala.jpg"

  11:      arrayImmagini(1) = ".\Lighthouse.jpg"

  12:      arrayImmagini(2) = ".\Penguins.jpg"

  13:      Call CaricaImmagine()

  14:    End Sub

  15:    Private Sub Image1_MouseDown(

  16:        ByVal sender As Object,

  17:        ByVal e As _

  18:          System.Windows.Input.MouseButtonEventArgs) _

  19:        Handles Image1.MouseDown

  20:      Call CaricaImmagine()

  21:    End Sub

  22:    Private Sub CaricaImmagine()

  23:      Dim i As Image = New Image()

  24:      Dim src As BitmapImage = New BitmapImage()

  25:      src.BeginInit()

  26:      src.UriSource = New Uri(

  27:        arrayImmagini(indice),

  28:        UriKind.Relative)

  29:      src.CacheOption =

  30:        BitmapCacheOption.OnLoad

  31:      src.EndInit()

  32:      Me.Image1.Source = src

  33:      Me.Image1.Stretch =

  34:        Stretch.Uniform

  35:      ' scorrimento dell'immagine

  36:      indice += 1

  37:      If indice = 3 Then

  38:        indice = 0

  39:      End If

  40:    End Sub

  41:  End Class

Nella seguente figura potete osservare il funzionamento dell’applicazione.