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

WPF: Il mio primo User Control

Ho voluto cimentarmi nella realizzazione del mio primo controllo utente in Windows Presentation Foundation. Per farlo, ho ripreso l'applicazione di esempio MyMediaPlayer realizzata nella serie di miei articoli introduttivi a WPF pubblicati su Visual Basic Tips & Tricks, inglobando il lettore multimediale in un controllo utente invece di implementarlo all'interno di un'applicazione Windows.

Vediamo il procedimento. Il modello di nuovo progetto da utilizzare in Visual Studio si chiama Custom Control Library (WPF) e ci ricorda la libreria di controlli utente che è possibile utilizzare in Windows Forms. Il file di codice XAML è caratterizzato da un elemento UserControl al posto dei consueti Window e Page. All'interno di questo elemento ho riportato tutto il codice illustrato nei predetti articoli e che riporto, per completezza, anche qui sotto:

<UserControl x:Class="MyMediaPlayer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="401" Width="343">

  <UserControl.Background>
    <LinearGradientBrush>
      <GradientStop Color="Black" Offset="0.4" />
      <GradientStop Color="Gainsboro" Offset="0.8" />
      <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>
  </UserControl.Background>

  <UserControl.Resources>
    <Style x:Key="MyButton" TargetType="Button">
      <Setter Property="Margin" Value="2"/>
      <Setter Property="Background" >
        <Setter.Value>
          <LinearGradientBrush>
            <GradientStop Color="Yellow" Offset="0"/>
            <GradientStop Color="Orange" Offset="0.5"/>
            <GradientStop Color="Red" Offset="1"/>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
    </Style>
  </UserControl.Resources>

    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition/>
      </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal" Grid.Row="0">
          <Button Style="{StaticResource MyButton}" Click="Seleziona" Name="Select" Width="75">
            Apri
          </Button>
          <Button Style="{StaticResource MyButton}" Name="Play" Width="75" Click="Riproduci">
            Riproduci
          </Button>
          <Separator/>
          <Button Style="{StaticResource MyButton}" Name="Stop" Width="75" Click="Interrompi">
            Interrompi
          </Button>
          <Button Style="{StaticResource MyButton}" Name="Pause" Width="75" Click="Pausa">
            Pausa
          </Button>
        </StackPanel>

      <StackPanel Orientation="Vertical" Grid.Row="1" VerticalAlignment="Top" >
        <MediaElement Name="myMedia" LoadedBehavior="Manual" UnloadedBehavior ="Stop"
                      Margin="10,10,10,10" Width="320" Height="240" Volume="0" Stretch="Fill">
          <MediaElement.RenderTransform>
            <SkewTransform CenterX="10" CenterY="10" AngleX="{Binding Path=Value,
                     ElementName=skewSlider}" />
          </MediaElement.RenderTransform>
        </MediaElement>
        <Label Foreground="Orange" Margin="-1,0,1,10" Height="25"
               VerticalAlignment="Bottom">Volume</Label>
        <Slider Name="volumeSlider" ValueChanged="volumeChanged" Height="25" Margin="1,-10,-1,10"
                VerticalAlignment="Bottom" Minimum="0" Maximum="10" Value="5" />
        <Label Foreground="Orange" Margin="-1,-10,1,10" Height="25"
               VerticalAlignment="Bottom">Inclina</Label>
        <Slider Name="skewSlider" Height="30" Margin="1,-10,-1,10" VerticalAlignment="Bottom"
                Minimum="-15" Maximum="15" Value="0" />
      </StackPanel>

    </Grid>
</UserControl>

Per i dettagli sui controlli e sulle relative proprietà, vi rimando alla terza parte della serie introduttiva di articoli. Notate come, anche a livello di controllo utente, sia possibile speficare gli stili nelle risorse (UserControl.Resources) o lo sfondo (UserControl.BackGround). Ricordate di aggiungere al progetto un riferimento all'assembly System.Windows.Forms, per poter utilizzare il controllo OpenFileDialog. Dovete poi passare al file di code-behind per scrivere il codice "operativo", che è il seguente:

Visual Basic:

Imports System.Windows.Forms

' Interaction logic for UserControl1.xaml
Partial Public Class MyMediaPlayer
    Inherits System.Windows.Controls.UserControl

    Public Sub New()
        InitializeComponent()
    End Sub

    Private sorgente As Uri
    Dim openDialog As New OpenFileDialog

    Private Sub Seleziona(ByVal sender As Object, ByVal e As RoutedEventArgs)

        Try
            With openDialog
                .Title = "Seleziona contenuto multimediale"
                .Filter = "Video|*.asf;*.wmv|Audio|*.mp3;*.wma|Tutti i file|*.*"

                If .ShowDialog = Forms.DialogResult.OK And String.IsNullOrEmpty(.FileName) = False Then
                    sorgente = New Uri(.FileName)
                End If
            End With

        Catch ex As Exception
            MessageBox.Show(ex.ToString)
        End Try
    End Sub

    Private Sub Riproduci(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Try
            myMedia.Source = sorgente
            myMedia.Play()
        Catch ex As Exception

            MessageBox.Show(ex.ToString)
        End Try
    End Sub

    Private Sub volumeChanged(ByVal sender As Object, _
                          ByVal e As RoutedPropertyChangedEventArgs(Of Double))
        myMedia.Volume = volumeSlider.Value
    End Sub

    Private Sub Interrompi(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myMedia.Stop()
    End Sub

    Private Sub Pausa(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myMedia.Pause()
    End Sub
End Class

Visual C#:

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Forms;

namespace DelSole.MyMediaPlayer
{
    /// <summary>
    /// Interaction logic for UserControl1.xaml
    /// </summary>

    public partial class MyMediaPlayer : System.Windows.Controls.UserControl
    {

        public MyMediaPlayer()
        {
            InitializeComponent();
        }

        private Uri sorgente;
        OpenFileDialog openDialog = new OpenFileDialog();
        private void Seleziona(object sender, RoutedEventArgs e)
        {
            try
            {
                openDialog.Title = "Seleziona contenuto multimediale";
                openDialog.Filter = "Video|*.asf;*.wmv|Audio|*.mp3;*.wma|Tutti i file|*.*";

                if (openDialog.ShowDialog() == System.Windows.Forms.DialogResult.OK)
                {
                    if (String.IsNullOrEmpty(openDialog.FileName) == false)
                    {
                        sorgente = new Uri(openDialog.FileName);
                    }
                }
            }
            catch (Exception ex)
            {
                System.Windows.Forms.MessageBox.Show(ex.ToString());
            }
        }

        private void Riproduci(object sender, RoutedEventArgs e)
        {
            try
            {
                myMedia.Source = sorgente;
                myMedia.Play();
            }
            catch (Exception ex)
            {
                System.Windows.MessageBox.Show(ex.ToString());
            }
        }

        private void volumeChanged(object sender, RoutedPropertyChangedEventArgs<System.Double> e)
        {
            myMedia.Volume = volumeSlider.Value;
        }

        private void Interrompi(object sender, RoutedEventArgs e)
        {
            myMedia.Stop();
        }

        private void Pausa(object sender, RoutedEventArgs e)
        {
            myMedia.Pause();
        }
    }
}

Anche per il codice gestito, vi rimando alla lettura degli articoli disponibili su VB T&T. Il progetto è pronto e può essere compilato. Come di sicuro avrete capito, l'output è costituito da una libreria di classi. Pertanto, aggiungiamo alla soluzione una nuova applicazione Windows Application (WPF), aggiungendo un riferimento al progetto relativo al controllo utente appena creato. Una volta fatto questo, vi sarà sufficiente modificare il codice XAML relativo alla finestra con queste poche righe di codice:

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestApp" Height="300" Width="300"
    xmlns:mymp="clr-namespace:DelSole.MyMediaPlayer;assembly=DelSole.MyMediaPlayer"
        >
    <Grid>
      <mymp:MyMediaPlayer Name="MyMp1" />

    </Grid>
</Window>

Per utilizzare il controllo utente, che è contenuto in un assembly separato, si utilizza l'attributo xmlns: (che sta per XML Namespace) seguito da un identificatore a piacere. Ho utilizzato mymp che sta per MyMediaPlayer. Il valore dell'attributo è composto dal namespace di primo livello (clr-namespace:) e dal nome dell'assembly senza estensione (assembly=). Per implementare il controllo si utilizza l'identificatore del namespace XML più il nome della classe, quindi mymp:MyMediaPlayer. Ricordate, infine, di impostare quest'ultimo progetto come progetto di avvio. Premete F5 per avviare l'applicazione di test e otterrete il seguente risultato, già noto se avete letto i miei articoli su WPF, raggiunto, questa volta, mediante un controllo utente custom:

Potete scaricare i sorgenti di questo post facendo clic sul rispettivo linguaggio di programmazione: Visual Basic - Visual C#.

Se mi è sfuggito qualcosa, fatemi sapere :-)

Alessandro

Print | posted on mercoledì 31 ottobre 2007 00:08 | Filed Under [ Windows Presentation Foundation ]

Powered by:
Powered By Subtext Powered By ASP.NET