Procedura dettagliata: creazione di una finestra Progettazione controlli di base per un controllo server Web

Articolo
10/22/2014

Aggiornamento: novembre 2007

In questa procedura dettagliata viene illustrato come creare una finestra di progettazione dei controlli di base per fornire un'interfaccia utente della fase di progettazione per un controllo server Web.

Quando si crea un controllo server ASP.NET personalizzato, è possibile creare una finestra di progettazione dei controlli associata per eseguire il rendering del controllo in uno strumento di progettazione visiva come Microsoft Visual Studio 2005. La finestra di progettazione consente il rendering di un'interfaccia utente della fase di progettazione per il controllo nell'ambiente host, in modo da facilitare la configurazione delle proprietà e del contenuto del controllo da parte degli sviluppatori. Per ulteriori informazioni sulle funzionalità delle finestre di progettazione e sulle diverse classi di finestre di progettazione che è possibile associare a un controllo personalizzato, vedere Cenni preliminari sulle finestre Progettazione controlli ASP.NET.

In particolare, vengono illustrate le seguenti operazioni:

Creazione di una finestra di progettazione di controlli compositi standard e relativa associazione a un controllo composito.
Creazione di una finestra di progettazione di controlli compositi ridimensionabile e relativa associazione a un controllo composito.
Creazione di una finestra di progettazione di controlli contenitore di base con un'area modificabile e relativa associazione a un controllo WebControl. Questa finestra di progettazione consente di aggiungere testo all'area modificabile nell'area di progettazione, nonché di trascinare controlli aggiuntivi nell'area.
Riferimento ai controlli personalizzati e alle finestre di progettazione associate in una pagina Web.
Utilizzo della pagina Web nella visualizzazione Progettazione di Visual Studio 2005.

Prerequisiti

Per completare questa procedura dettagliata è necessario:

Visual Studio 2005, che verrà utilizzato per creare una pagina Web contenente i controlli personalizzati e le finestre di progettazione associate.
Sito Web ASP.NET, per la pagina contenente i controlli. Se è già stato configurato un sito di questo tipo, è possibile utilizzare tale sito come punto di partenza per questa procedura dettagliata. In caso contrario, per informazioni dettagliate sulla creazione di una directory o un sito virtuale, vedere Procedura: creare e configurare directory virtuali in IIS 5.0 e 6.0.

Creazione di finestre di progettazione e controlli personalizzati

In questa sezione vengono creati tre controlli server Web di base e un'associata finestra di progettazione dei controlli personalizzata per ciascuno di essi.

Per creare un file per il codice

In un editor creare un nuovo file denominato SimpleControlDesigners con l'estensione appropriata per il linguaggio utilizzato. In Visual Studio 2005, creare ad esempio un nuovo file di classe denominato SimpleControlDesigners.vb o SimpleControlDesigners.cs.

Aggiungere i seguenti riferimenti a spazi dei nomi necessari per l'utilizzo delle classi di finestre di progettazione. Aggiungere inoltre uno spazio dei nomi per i controlli e le finestre di progettazione associate.

Imports System
Imports System.ComponentModel
Imports System.ComponentModel.Design
Imports System.Drawing
Imports System.Web.UI
Imports System.Web.UI.Design
Imports System.Web.UI.Design.WebControls
Imports System.Web.UI.WebControls

Namespace Samples.AspNet.VB.Controls
End Namespace

using System;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.Design;
using System.Web.UI.Design.WebControls;
using System.Web.UI.WebControls;

namespace Samples.AspNet.CS.Controls 
{
}

Salvare il file.

È ora possibile creare un controllo server Web composito e una finestra di progettazione associata. Una finestra di progettazione può essere inclusa nello stesso assembly del controllo oppure in uno diverso. In questa procedura dettagliata, per maggiore praticità verranno creati nello stesso file di codice e assembly.

Per creare un controllo composito e una finestra di progettazione associata

All'interno dello spazio dei nomi dichiarato nel file SimpleControlDesigners creare una dichiarazione pubblica per la classe di un controllo composito che eredita da CompositeControl, come illustrato nell'esempio di codice riportato di seguito.
```
    Public Class SimpleCompositeControl
        Inherits CompositeControl
    End Class
```
```
 public class SimpleCompositeControl : CompositeControl
    {
    }
```

Aggiungere le proprietà pubbliche illustrate nel seguente esempio di codice alla classe. Verranno utilizzate per creare parte dell'interfaccia utente per la pagina Web.

Dim _prompt As String = "Please enter your date of birth: "
Overridable Property Prompt() As String
    Get
        Dim o As Object
        o = ViewState("Prompt")
        If o Is Nothing Then
            Return _prompt
        Else
            Return CType(o, String)
        End If
    End Get
    Set(ByVal value As String)
        ViewState("Prompt") = value
    End Set
End Property

Overridable Property DOB() As DateTime
    Get
        Dim o As Object
        o = ViewState("DOB")
        If o Is Nothing Then
            Return DateTime.Now
        Else
            Return CType(o, DateTime)
        End If
    End Get
    Set(ByVal value As DateTime)
        ViewState("DOB") = value
    End Set
End Property

private String _prompt = "Please enter your date of birth: ";
public virtual String Prompt
{
    get
    {
        object o = ViewState["Prompt"];
        return (o == null) ? _prompt : (string)o;
    }
    set
    {
        ViewState["Prompt"] = value;
    }
}

public virtual DateTime DOB
{
    get
    {
        object o = ViewState["DOB"];
        return (o == null) ? DateTime.Now : (DateTime)o;
    }
    set
    {
        ViewState["DOB"] = value;
    }
}

Creare un metodo per aggiungere controlli figlio al controllo composito. Con il metodo riportato di seguito vengono aggiunte due caselle di testo e un'interruzione di riga che risulteranno visibili nella pagina Web.

Protected Overrides Sub CreateChildControls()
    Dim lab As New Label

    lab.Text = Prompt
    lab.ForeColor = System.Drawing.Color.Red
    Me.Controls.Add(lab)

    Dim lit As New Literal()
    lit.Text = "<br />"
    Me.Controls.Add(lit)

    Dim tb As New TextBox()
    tb.ID = "tb1"
    tb.Text = DOB.ToString()
    Me.Controls.Add(tb)

    MyBase.CreateChildControls()
End Sub

protected override void CreateChildControls() 
{
    Label lab = new Label();

    lab.Text = Prompt;
    lab.ForeColor = System.Drawing.Color.Red;
    this.Controls.Add(lab);

    Literal lit = new Literal();
    lit.Text = "<br />";
    this.Controls.Add(lit);

    TextBox tb = new TextBox();
    tb.ID = "tb1";
    tb.Text = DOB.ToString();
    this.Controls.Add(tb);

    base.CreateChildControls();
}

Creare una semplice classe di finestre di progettazione di controlli compositi derivata da CompositeControlDesigner, da associare al controllo composito appena creato.

Nonostante sia disponibile una vasta gamma di funzionalità di rendering dell'interfaccia utente che è possibile aggiungere alla finestra di progettazione, nell'esempio di codice riportato di seguito viene semplicemente creata la finestra di progettazione e viene eseguito l'override di una proprietà chiave della classe base allo scopo di impedire il ridimensionamento del controllo in visualizzazione Progettazione.
```
Public Class SimpleCompositeControlDesigner
    Inherits CompositeControlDesigner
    ' Set this property to prevent the designer from being resized.
    Public Overrides ReadOnly Property AllowResize() As Boolean
        Get
            Return False
        End Get
    End Property
End Class
```
```
public class SimpleCompositeControlDesigner : CompositeControlDesigner
{
    // Set this property to prevent the designer from being resized.
    public override bool AllowResize 
    {
        get { return false; }
    }
}
```
Immediatamente sopra la dichiarazione di classe per il controllo composito aggiungere un attributo dei metadati Designer che associa il controllo alla classe di finestre di progettazione appena creata, come illustrato nell'esempio di codice riportato di seguito.
```
<Designer(GetType(SimpleCompositeControlDesigner))> _
Public Class SimpleCompositeControl
    Inherits CompositeControl
```
```
[Designer(typeof(SimpleCompositeControlDesigner))]
public class SimpleCompositeControl : CompositeControl
```
Salvare il file.

Una volta creato un controllo server Web composito personalizzato e una finestra di progettazione associata, è possibile creare un secondo controllo derivato dal primo. Il secondo controllo differisce soltanto per la possibilità di ridimensionare la finestra di progettazione associata nell'area di progettazione.

Per creare un controllo composito ridimensionabile e una finestra di progettazione associata

All'interno dello spazio dei nomi dichiarato nel file SimpleControlDesigners creare una dichiarazione pubblica per la classe di un nuovo controllo composito che eredita dal controllo SimpleCompositeControl precedentemente creato. Nell'esempio di codice riportato di seguito viene illustrata una nuova dichiarazione.
```
    Public Class SimpleCompositeControl2
        Inherits SimpleCompositeControl
    End Class
```
```
 public class SimpleCompositeControl2 : SimpleCompositeControl
    {
    }
```

Associare questo controllo alla classe base CompositeControlDesigner.

Per impostazione predefinita, nell'esempio viene creata una finestra di progettazione ridimensionabile di base per il controllo composito.

<Designer(GetType(CompositeControlDesigner))> _
Public Class SimpleCompositeControl2
    Inherits SimpleCompositeControl
End Class

[Designer(typeof(CompositeControlDesigner))]
public class SimpleCompositeControl2 : SimpleCompositeControl
{
}

Salvare il file.

I primi due controlli creati sono controlli compositi associati a finestre di progettazione di controlli compositi. Verrà ora creato un controllo semplice derivato da WebControl, che verrà associato a una classe ContainerControlDesigner. Questo tipo di finestra di progettazione si rivela utile quando si desidera associare una finestra di progettazione a un singolo controllo server Web personalizzato e fornire una singola area modificabile nell'area di progettazione. Il controllo personalizzato creato in questa fase non implementa funzionalità effettive e ha esclusivamente lo scopo di illustrare le funzionalità della classe ContainerControlDesigner.

Nota:
Le stesse funzionalità potrebbero inoltre essere fornite mediate un controllo composito e una finestra di progettazione come quelli precedentemente creati. L'esempio è finalizzato soltanto a illustrare l'utilizzo della classe ContainerControlDesigner e la relativa associazione a un controllo WebControl.

Per creare un controllo server Web e una finestra di progettazione contenitore con un'area modificabile

All'interno dello spazio dei nomi dichiarato nel file SimpleControlDesigners creare una dichiarazione pubblica per la classe di un nuovo controllo server Web, come illustrato nell'esempio di codice riportato di seguito.
```
    Public Class SimpleContainerControl
        Inherits WebControl
        Implements INamingContainer
    End Class
```
```
 public class SimpleContainerControl : WebControl, INamingContainer
    {
    }
```

Creare una classe di finestre di progettazione di controlli contenitore da associare al controllo personalizzato. Implementare due proprietà: una proprietà FrameStyle per lo stile della cornice della finestra di progettazione e una proprietà FrameCaption per il testo dell'intestazione della cornice. Queste proprietà forniscono una cornice per rendere visibili il rendering e la selezione del controllo nell'area di progettazione. Nell'esempio di codice riportato di seguito viene illustrato il codice per la finestra di progettazione e le proprietà.

Nota:
La classe ContainerControlDesigner gestisce automaticamente tutti gli altri aspetti del rendering del controllo personalizzato in fase di progettazione e la creazione di una singola area modificabile.

Public Class SimpleContainerControlDesigner
    Inherits ContainerControlDesigner

    Dim _style As Style

    ' Add the caption by default.
    Public Overrides ReadOnly Property FrameCaption() As String
        Get
            Return "A Simple ContainerControlDesigner"
        End Get
    End Property

    Public Overrides ReadOnly Property Framestyle() As Style
        Get
            If _style Is Nothing Then
                _style = New Style()
                _style.Font.Name = "Verdana"
                _style.Font.Size = New FontUnit("XSmall")
                _style.BackColor = Color.LightBlue
                _style.ForeColor = Color.Black
            End If

            Return _style
        End Get
    End Property

End Class

public class SimpleContainerControlDesigner : ContainerControlDesigner
{
    private Style _style = null;

    // Add the caption by default. Note that the caption 
    // will only appear if the Web server control 
    // allows child controls rather than properties. 
    public override string FrameCaption
    {
        get
        {
            return "A Simple ContainerControlDesigner";
        }
    }

    public override Style FrameStyle
    {
        get
        {
            if (_style == null)
            {
                _style = new Style ();
                _style.Font.Name = "Verdana";
                _style.Font.Size = new FontUnit ("XSmall");
                _style.BackColor = Color.LightBlue;
                _style.ForeColor = Color.Black;
            }

            return _style;
        }
    }
}

Associare la finestra di progettazione al controllo. Immediatamente sopra la dichiarazione di classe per il controllo server Web aggiungere l'attributo dei metadati Designer. In questo caso, come illustrato nell'esempio di codice riportato di seguito, viene inoltre aggiunto l'attributo ParseChildren con un parametro false. In questo modo, il contenuto interno dei controlli verrà trattato dal parser della fase di progettazione come controlli figlio, anziché come proprietà. In questo caso, si desidera che il contenuto interno del controllo venga trattato come controlli figlio per poter trascinare altri controlli server nell'area modificabile in fase di progettazione e modificarne le relative proprietà.
```
<Designer(GetType(SimpleContainerControlDesigner))> _
<ParseChildren(False)> _
Public Class SimpleContainerControl
    Inherits WebControl
    Implements INamingContainer
End Class
```
```
[Designer (typeof(SimpleContainerControlDesigner))]
[ParseChildren (false)]
public class SimpleContainerControl : WebControl, INamingContainer
{
}
```
Salvare il file.

Sono stati creati tre controlli personalizzati e le finestre di progettazione dei controlli associate. È ora sufficiente compilare i controlli in un assembly e quindi utilizzarli in uno strumento di progettazione visiva.

Per compilare le finestre di progettazione e i controlli personalizzati

Aprire un prompt dei comandi per la cartella in cui è stato creato il file SimpleControlDesigners. Da tale prompt è possibile compilare il codice sorgente in un assembly.

Nota:
Per eseguire i compilatori .NET Framework da tale posizione, è necessario che il percorso di installazione di .NET Framework sia già stato aggiunto alla variabile PATH del computer. Questo percorso si trova in genere nella directory di installazione di Windows in \Microsoft.NET\Framework\<numero versione>. Se la variabile PATH non è stata aggiornata, fare clic con il pulsante destro del mouse su Risorse del computer, scegliere Proprietà, quindi la scheda Avanzate e infine Variabili d'ambiente. Nell'elenco Variabili di sistema fare doppio clic sulla variabile PATH. Nella casella di testo Valore variabile aggiungere un punto e virgola alla fine dei valori esistenti e quindi digitare il percorso di installazione di .NET Framework. Scegliere OK in ciascuna finestra di dialogo per chiuderla.

Per eseguire i compilatori .NET Framework da tale posizione, è necessario che il percorso di installazione di .NET Framework sia già stato aggiunto alla variabile PATH del computer. Questo percorso si trova in genere nella directory di installazione di Windows in \Microsoft.NET\Framework\<numero versione>. Se la variabile PATH non è stata aggiornata, fare clic con il pulsante destro del mouse su Risorse del computer, scegliere Proprietà, quindi la scheda Avanzate e infine Variabili d'ambiente. Nell'elenco Variabili di sistema fare doppio clic sulla variabile PATH. Nella casella di testo Valore variabile aggiungere un punto e virgola alla fine dei valori esistenti e quindi digitare il percorso di installazione di .NET Framework. Scegliere OK in ciascuna finestra di dialogo per chiuderla.

Compilare i controlli del file SimpleControlDesigners in un assembly utilizzando il comando di compilazione riportato di seguito.

csc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersCS.dll simplecontroldesigners.cs

vbc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersVB.dll SimpleControlDesigners.vb

Spostare il file di assembly risultante nella cartella \Bin del sito Web per la pagina che conterrà i controlli.

Nota:
Gli utenti di Visual Studio che desiderano compilare i controlli e le finestre di progettazione devono aggiungere un riferimento a System.Design.dll. Per ulteriori informazioni, vedere Procedura: aggiungere riferimenti a un componente .NET o COM in un sito Web.

Creazione di una pagina Web contenente i controlli

Una volta creato un assembly con i controlli personalizzati e le finestre di progettazione dei controlli associate, verrà creata una pagina Web in Visual Studio 2005 per fare riferimento ai controlli, verificare come vengono visualizzati in visualizzazione Progettazione e caricare la pagina in un browser.

Per creare una pagina Web contenente i controlli

Una volta aperto il sito Web in Visual Studio 2005, creare una nuova pagina denominata ControlDesigners.aspx. All'inizio della pagina, immediatamente sotto la dichiarazione di pagina, aggiungere una direttiva Register in modo da fare riferimento all'assembly e ai controlli precedentemente creati, come illustrato nell'esempio di codice riportato di seguito.
```
<%@ Page Language="VB" %>
<%@ register tagprefix="aspSample" 
  assembly="SimpleControlDesignersVB" 
  namespace="Samples.AspNet.VB.Controls" %>
```
```
<%@ Page Language="C#" %>
<%@ register tagprefix="aspSample" 
  assembly="SimpleControlDesignersCS" 
  namespace="Samples.AspNet.CS.Controls" %>
```

Completare il resto della pagina come illustrato nell'esempio di codice riportato di seguito, in modo da fare riferimento a ciascuno dei tre controlli precedentemente creati, ovvero SimpleCompositeControl, SimpleCompositeControl2 e SimpleContainerControl. Per fare riferimento a ciascun controllo viene utilizzato il prefisso aspSample specificato nella direttiva Register.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Designers Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <p style="font-family:tahoma;font-size:large;
            font-weight:bold">
            Simple Control Designers
        </p>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, no-resize</span>
        </div>
        <aspSample:SimpleCompositeControl id="SimpleControl1"  />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, resize</span>
        </div>
        <aspSample:SimpleCompositeControl2 id="SimpleControl2"   
            height="87px" width="238px" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
                Container</span>
        </div>
        <aspSample:SimpleContainerControl id="SimpleControl3"  
            height="57px">
            Type some content here.
        </aspSample:SimpleContainerControl>
        <br /><br />
    </div>
    </form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Designers Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <p style="font-family:tahoma;font-size:large;
            font-weight:bold">
            Simple Control Designers
        </p>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, no-resize</span>
        </div>
        <aspSample:SimpleCompositeControl id="SimpleControl1"  />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, resize</span>
        </div>
        <aspSample:SimpleCompositeControl2 id="SimpleControl2"   
            height="87px" width="238px" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
                Container</span>
        </div>
        <aspSample:SimpleContainerControl id="SimpleControl3"  
            height="57px">
            Type some content here.
        </aspSample:SimpleContainerControl>
        <br /><br />
    </div>
    </form>
</body>
</html>

Salvare la pagina.

È ora possibile testare la pagina in visualizzazione Progettazione in modo da verificare il funzionamento delle finestre di progettazione dei controlli.

Per illustrare il rendering in fase di progettazione dei controlli

Passare alla visualizzazione Progettazione della pagina.

I controlli verranno visualizzati come nella schermata riportata di seguito. Si noti che il secondo controllo composito è ridimensionabile e il primo non lo è.

Pagina ControlDesigners.aspx in visualizzazione Progettazione
Fare clic nell'area di contenuto del controllo contenitore e digitare un contenuto di testo per il controllo.
Passare alla visualizzazione Origine e individuare il codice sorgente per il controllo contenitore. Verificare che il testo digitato nell'area viene ora riportato nel codice sorgente.
Passare nuovamente alla visualizzazione Progettazione.
Fare clic sulla cornice del controllo, posizionare il puntatore del mouse su un'icona di ridimensionamento e ridimensionare il controllo contenitore.
Fare clic nell'area modificabile del controllo alla fine del contenuto di testo e premere INVIO per aggiungere un'interruzione di riga.
Trascinare un controllo Button dalla Casella degli strumenti all'area modificabile sotto il testo immesso. Trascinare un controllo Label dalla Casella degli strumenti e rilasciarlo accanto al pulsante. Ciò dimostra che è possibile trascinare controlli figlio nell'area modificabile. Se lo si desidera, è possibile impostare proprietà per i controlli figlio in fase di progettazione e aggiungere codice per il controllo Button in modo da aggiornare la proprietà Text del controllo Label in fase di esecuzione.

La pagina con i controlli appena aggiunti risulterà simile alla schermata riportata di seguito.

Controllo contenitore con controlli figlio
Salvare la pagina.

Per visualizzare la pagina in fase di esecuzione

Caricare la pagina in un browser.

I controlli dovranno essere visualizzati come personalizzati in visualizzazione Progettazione. La pagina risulterà simile alla schermata riportata di seguito.

Pagina Web completata con le finestre di progettazione dei controlli

Passaggi successivi

In questa procedura dettagliata sono state illustrate le attività di base correlate alla creazione di un controllo personalizzato associato a una finestra di progettazione di controlli compositi o contenitore. Sono stati creati controlli personalizzati con finestre di progettazione che hanno consentito di ridimensionare i controlli e aggiungere testo in un'area modificabile nella visualizzazione Progettazione di Visual Studio 2005. Di seguito vengono forniti suggerimenti per un'ulteriore analisi:

Analizzare le altre nuove potenti funzionalità offerte dalle finestre di progettazione dei controlli. Per ulteriori informazioni, vedere Cenni preliminari sulle finestre Progettazione controlli ASP.NET.
Provare a creare scenari più avanzati relativi alle finestre di progettazione, con creazione di rendering specializzato in fase di progettazione e utilizzo di funzionalità come gli elenchi di operazioni. Per informazioni dettagliate, vedere Esempio di Progettazione controlli con servizi ed elenchi di operazioni.

Vedere anche

Concetti

Cenni preliminari sulle finestre Progettazione controlli ASP.NET