Procedura dettagliata: modifica del comportamento di una proprietà in fase di progettazione

Articolo
09/12/2008

Aggiornamento: novembre 2007

Quando si utilizza l'estensibilità per personalizzare Progettazione Windows Presentation Foundation (WPF) per Visual Studio, spesso si creano controlli personalizzati. Talvolta è necessario fare in modo che una proprietà di un controllo si comporti in fase di progettazione diversamente da quando è in fase di esecuzione, pur lasciando all'utente la possibilità di impostare il valore della proprietà secondo la normale procedura. Ad esempio, si desidera dare all'utente la possibilità di impostare la proprietà di visibilità di un controllo su false, ma il controllo deve rimanere visibile in fase di progettazione.

In questa procedura dettagliata viene creato un Button personalizzato e viene modificato il comportamento delle proprietà Background e Content. Per ottenere questo risultato, viene creato un DesignModeValueProvider e allegato al controllo personalizzato. DesignModeValueProvider acquisisce le modifiche di proprietà che l'utente apporta, lo sviluppatore inserisce la logica nel metodo TranslatePropertyValue e il DesignModeValueProvider passa i nuovi valori al progettatore.

Nota importante:
Quando si utilizza questa tecnica, il comportamento di una proprietà nella finestra di progettazione non corrisponde al valore della proprietà in visualizzazione XAML. In visualizzazione XAML viene visualizzato il valore che l'utente ha immesso in fase di progettazione. Il valore in visualizzazione XAML rappresenta il comportamento che la proprietà esibirà in fase di esecuzione.

In questa procedura dettagliata vengono eseguite le attività seguenti:

Creare un progetto di libreria di controlli personalizzati WPF.
Creare un DesignModeValueProvider personalizzato.
Creare un controllo pulsante personalizzato.
Allegare il DesignModeValueProvider al controllo personalizzato.
Creare un'applicazione di test.
Verificare il controllo personalizzato.

Nota:
Le finestre di dialogo e i comandi di menu visualizzati potrebbero non corrispondere a quelli descritti nella Guida in linea in quanto dipendono dall'edizione o dalle impostazioni attive. Per modificare le impostazioni, scegliere Importa/esporta impostazioni dal menu Strumenti. Per ulteriori informazioni, vedere Impostazioni di Visual Studio.

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre dei seguenti componenti:

Visual Studio 2008

Creazione di un progetto di libreria di controlli personalizzati WPF

Per creare il progetto

In Visual Basic o Visual C# creare un nuovo progetto di libreria di controlli personalizzati WPF denominato CustomButton.

Il codice per CustomControl1 verrà aperto nell'editor del codice.
Aggiungere un riferimento all'assembly seguente:
- Microsoft.Windows.Design.Extensibility
In Esplora soluzioni modificare il nome del file di codice in CustomButton.cs o CustomButton.vb.

Se viene visualizzata una finestra di messaggio in cui si richiede se eseguire un'operazione di ridenominazione per tutti i riferimenti del progetto, fare clic su Sì.
In Esplora soluzioni espandere la cartella Themes e aprire file Generic.xaml.

Generic1.xaml verrà aperto in WPF Designer.
In visualizzazione XAML sostituire tutte le occorrenze di "CustomControl1" con "CustomButton" nel file Generic.xaml.
Scegliere Genera soluzione dal menu Genera.

Creazione di un DesignModeValueProvider personalizzato

In questa procedura viene creato un DesignModeValueProvider personalizzato. Nel metodo TranslatePropertyValue, modificare la proprietà Content di Button in modo che venga visualizzato in lettere maiuscole nella finestra di progettazione. Modificare inoltre la proprietà Background di Button in modo che venga visualizzato con il colore di sistema predefinito nella finestra di progettazione. Queste modifiche hanno effetto solo nella finestra di progettazione. In fase di esecuzione, le proprietà Content e Background vengono visualizzate con i valori impostati dall'utente.

Nota:
In questa procedura, viene creato un DesignModeValueProvider che gestisce due differenti proprietà. È anche possibile creare più oggetti DesignModeValueProvider per gestire proprietà differenti.

Per creare un DesignModeValueProvider personalizzato

Aggiungere una nuova classe denominata CustomButtonDesignModeValueProvider.cs o CustomButtonDesignModeValueProvider.vb al progetto CustomButton.

La nuova classe verrà aperta nell'editor del codice.

Aggiungere i seguenti spazi dei nomi all'inizio del file. Sostituire quelli eventualmente esistenti.

Imports System
Imports System.Windows                  'SystemColors
Imports System.Windows.Media            'SolidColorBrush
Imports System.Windows.Controls         'Button
Imports Microsoft.Windows.Design.Model  'DesignModeValueProvider

using System;
using System.Windows;                   //SystemColors
using System.Windows.Media;             //SolidColorBrush
using System.Windows.Controls;          //Button
using Microsoft.Windows.Design.Model;   //DesignModeValueProvider

Modificare la classe CustomButtonDesignModeValueProvider per ereditare da DesignModeValueProvider.

Public Class CustomButtonDesignModeValueProvider
    Inherits DesignModeValueProvider

End Class

class CustomButtonDesignModeValueProvider : DesignModeValueProvider
{
}

Aggiungere un costruttore alla classe. Nel costruttore si identificano le proprietà che si desidera acquisire.

Public Sub New()

    Properties.Add(Button.ContentProperty)
    Properties.Add(Button.BackgroundProperty)
End Sub

public CustomButtonDesignModeValueProvider()
{
    Properties.Add(Button.ContentProperty);
    Properties.Add(Button.BackgroundProperty);
}

Eseguire l'override del metodo TranslatePropertyValue nella classe. In questo punto si specifica il nuovo comportamento delle proprietà in fase di progettazione.

Public Overrides Function TranslatePropertyValue(ByVal identifier As PropertyIdentifier, ByVal value As Object) As Object

    If identifier.DependencyProperty Is Button.ContentProperty Then

        Return value.ToString().ToUpper()
    End If

    If identifier.DependencyProperty Is Button.BackgroundProperty Then

        Return New SolidColorBrush(SystemColors.ControlColor)
    End If

    Return MyBase.TranslatePropertyValue(identifier, value)
End Function

public override object TranslatePropertyValue(PropertyIdentifier identifier, object value)
{
    if (identifier.DependencyProperty == Button.ContentProperty)
    {
        return ((string)value).ToUpper();
    }

    if (identifier.DependencyProperty == Button.BackgroundProperty)
    {
        return new SolidColorBrush(SystemColors.ControlColor);
    }

    return base.TranslatePropertyValue(identifier, value);
}

Scegliere Genera soluzione dal menu Genera.

Creazione di un controllo pulsante personalizzato

In questa procedura viene creato il controllo personalizzato. Viene creato un semplice controllo personalizzato che eredita da Button, ma che non contiene funzionalità aggiuntive personalizzate.

Per creare un controllo pulsante personalizzato

Aprire la classe CustomButton nell'editor del codice.

Aggiungere i seguenti spazi dei nomi all'inizio del file. Sostituire quelli eventualmente esistenti.

Imports System.Windows.Controls             'Button
Imports Microsoft.Windows.Design.Features   'Feature

using System.Windows.Controls;              //Button
using Microsoft.Windows.Design.Features;    //Feature

Sostituire la classe esistente con la seguente.

Public Class CustomButton
    Inherits Button

    Shared Sub New()

    End Sub
End Class

public class CustomButton : Button
{
    static CustomButton()
    {
    }
}

Scegliere Genera soluzione dal menu Genera.

Aggiunta di DesignModeValueProvider al controllo personalizzato

In questa procedura, viene allegato il DesignModeValueProvider al controllo personalizzato utilizzando l'attributo FeatureAttribute.

Nota:
È anche possibile allegare un DesignModeValueProvider a un controllo personalizzato utilizzando l'archivio di metadati. Per ulteriori informazioni, vedere Archivio di metadati e Procedura: utilizzare l'archivio di metadati.

Per allegare DesignModeValueProvider al controllo personalizzato

Nell'editor di codice individuare la dichiarazione per la classe CustomButton. Il risultato dovrebbe essere analogo al seguente:
```
Public Class CustomButton
    Inherits Button
```
```
public class CustomButton : Button
```

Aggiungere un attributo Feature alla dichiarazione della classe e specificare DesignModeValueProvider.

<Feature(GetType(CustomButtonDesignModeValueProvider))> _
Public Class CustomButton
    Inherits Button

[Feature(typeof(CustomButtonDesignModeValueProvider))]
public class CustomButton : Button

Scegliere Genera soluzione dal menu Genera.

Creazione di un'applicazione di test

Per creare un'applicazione di test

Aggiungere alla soluzione un nuovo progetto di applicazione WPF denominato CustomButtonTestApplication.

Window1.xaml verrà aperto in WPF Designer.
In Esplora soluzioni, fare clic con il pulsante destro del mouse sul progetto, quindi selezionare Imposta come progetto di avvio.
Scegliere Aggiungi riferimento dal menu Progetto, quindi utilizzare la scheda Progetti per aggiungere un riferimento al progetto CustomButton.
Scegliere Genera soluzione dal menu Genera.

Verifica del controllo personalizzato

Per verificare il controllo personalizzato

In visualizzazione XAML di Window1.xaml, sostituire il codice XAML esistente con quello riportato di seguito.

<Window x:Class="CustomButtonTestApplication.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cb="clr-namespace:CustomButton;assembly=CustomButton"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <cb:CustomButton Height="75" Width="100">Button1</cb:CustomButton>
    </Grid>
</Window>

In visualizzazione Progettazione selezionare il pulsante. Se necessario, fare clic sulla barra informazioni nella parte superiore della finestra di progettazione per ricaricare la visualizzazione.
Nella finestra Proprietà individuare la proprietà Background.
Digitare Red e premere Invio.

Il codice XAML verrà aggiornato con il codice Background="Red", ma il colore del pulsante non cambierà in visualizzazione Progettazione.
Nella finestra Proprietà individuare la proprietà Content.
Digitare Hello World e premere Invio.

Il codice XAML verrà aggiornato con il contenuto Hello World, ma sul pulsante verrà visualizzato il testo HELLO WORLD in visualizzazione Progettazione.
Scegliere Avvia debug dal menu Debug.

Verrà avviata l'applicazione e verrà visualizzata la finestra. Il pulsante sarà rosso e conterrà il testo Hello World in fase di esecuzione.
Chiudere la finestra.