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

Articolo
08/11/2011

Quando si utilizza l'estensibilità per personalizzare WPF Designer 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. L'oggetto DesignModeValueProvider acquisisce le modifiche della proprietà apportate dall'utente, la logica personalizzata viene inserita nel metodo TranslatePropertyValue e l'oggetto DesignModeValueProvider passa i nuovi valori alla finestra di progettazione.

Importante
Quando si utilizza questa tecnica, il comportamento di una proprietà nella finestra di progettazione non corrisponde al valore della proprietà nella visualizzazione XAML. In quest'ultima, infatti, viene visualizzato il valore immesso dall'utente in fase di progettazione. Il valore in visualizzazione XAML rappresenta il comportamento che la proprietà esibirà in fase di esecuzione.

Questa procedura dettagliata prevede l'esecuzione delle 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

È possibile che le finestre di dialogo e i comandi di menu visualizzati siano diversi da quelli descritti nella Guida a seconda delle impostazioni attive o dell'edizione del programma. Per modificare le impostazioni, scegliere Importa/Esporta impostazioni dal menu Strumenti. Per ulteriori informazioni, vedere Gestione delle impostazioni.

Prerequisiti

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

Visual Studio 2010

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ì.
Dal menu Compila, fare clic su Compila soluzione.

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. Viene inoltre modificata la proprietà Background dell'oggetto Button in modo che venga visualizzata con il colore di sistema predefinito nella finestra di progettazione. Queste modifiche vengono applicate 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
Imports Microsoft.Windows.Design.Metadata


using System;
using System.Windows;                   //SystemColors
using System.Windows.Media;             //SolidColorBrush
using System.Windows.Controls;          //Button
using Microsoft.Windows.Design.Model;
using Microsoft.Windows.Design.Metadata;   //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(GetType(Button), "Content")
    Properties.Add(GetType(Button), "Background")
End Sub


public CustomButtonDesignModeValueProvider()
{
    Properties.Add( typeof(Button), "Content");
    Properties.Add(typeof(Button), "Background");
}

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 item As ModelItem, _
    ByVal identifier As PropertyIdentifier, _
    ByVal value As Object) As Object

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Content" Then

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

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Background" Then

        Return New SolidColorBrush(SystemColors.ControlColor)
    End If

    Return MyBase.TranslatePropertyValue(item, identifier, value)
End Function


public override object TranslatePropertyValue(ModelItem item, PropertyIdentifier identifier, object value)
{
    if (identifier.DeclaringType == typeof( Button ) &&
        identifier.Name == "Content" )
    {
        return ((string)value).ToUpper();
    }

    if (identifier.DeclaringType == typeof(Button) &&
        identifier.Name == "Background")
    {
        return new SolidColorBrush(SystemColors.ControlColor);
    }

    return base.TranslatePropertyValue(item, identifier, value);
}

Scegliere Compila soluzione dal menu Compila.

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 Compila soluzione dal menu Compila.

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 fornendo metadati della fase di progettazione personalizzati. Per ulteriori informazioni, vedere Aggiunta di metadati della fase di progettazione.

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 Compila soluzione dal menu Compila.

Creazione di un'applicazione di test

Per creare un'applicazione di test

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

MainWindow.xaml viene 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 Compila soluzione dal menu Compila.

Verifica del controllo personalizzato

Per verificare il controllo personalizzato

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

<Window x:Class="CustomButtonTestApplication.MainWindow"
    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="MainWindow" 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.