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

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.

Nota importanteImportante

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

  1. 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.

  2. Aggiungere un riferimento all'assembly seguente:

    • Microsoft.Windows.Design.Extensibility
  3. 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 .

  4. 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

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

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

  2. 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
    
  3. Modificare la classe CustomButtonDesignModeValueProvider per ereditare da DesignModeValueProvider.

    
    Public Class CustomButtonDesignModeValueProvider
        Inherits DesignModeValueProvider
    
    End Class
    
    
    class CustomButtonDesignModeValueProvider : DesignModeValueProvider
    {
    }
    
  4. 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");
    }
    
  5. 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);
    }
    
  6. 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

  1. Aprire la classe CustomButton nell'editor del codice.

  2. 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
    
  3. 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()
        {
        }
    }
    
  4. 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

  1. 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
    
  2. 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
    
  3. Scegliere Compila soluzione dal menu Compila.

Creazione di un'applicazione di test

Per creare un'applicazione di test

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

    MainWindow.xaml viene aperto in WPF Designer.

  2. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul progetto, quindi selezionare Imposta come progetto di avvio.

  3. Scegliere Aggiungi riferimento dal menu Progetto, quindi utilizzare la scheda Progetti per aggiungere un riferimento al progetto CustomButton.

  4. Scegliere Compila soluzione dal menu Compila.

Verifica del controllo personalizzato

Per verificare il controllo personalizzato

  1. 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>
    
  2. In visualizzazione Progettazione selezionare il pulsante. Se necessario, fare clic sulla barra informazioni nella parte superiore della finestra di progettazione per ricaricare la visualizzazione.

  3. Nella finestra Proprietà individuare la proprietà Background.

  4. 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.

  5. Nella finestra Proprietà individuare la proprietà Content.

  6. 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.

  7. 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.

  8. Chiudere la finestra.

Vedere anche

Attività

Procedura: modificare il comportamento di una proprietà in fase di progettazione

Procedura: determinare se un controllo personalizzato è in fase di progettazione o in fase di esecuzione

Altre risorse

Confronto dei comportamenti tra fase di progettazione e fase di esecuzione

Informazioni sull'estensibilità Progettazione WPF

Estensibilità di Progettazione WPF

Aggiunta di metadati della fase di progettazione