Exemplarische Vorgehensweise: Erstellen eines einfachen Steuerelement-Designers für ein Webserver-Steuerelement

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise wird gezeigt, wie ein einfacher Steuerelement-Designer erstellt wird, um eine Entwurfszeit-Benutzeroberfläche für ein Webserver-Steuerelement bereitzustellen.

Beim Erstellen eines benutzerdefinierten ASP.NET-Serversteuerelements können Sie einen zugeordneten Designer erstellen, um das Steuerelement in einem visuellen Entwurfstool wie Microsoft Visual Studio 2005 wiederzugeben. Mit dem Designer kann in der Hostumgebung eine Entwurfszeit-Benutzeroberfläche für das Steuerelement wiedergegeben werden, sodass Entwickler die Eigenschaften und den Inhalt des Steuerelements auf einfache Weise konfigurieren können. Weitere Informationen über Designerfeatures und die verschiedenen Designerklassen, die Sie einem benutzerdefinierten Steuerelement zuordnen können, finden Sie unter Übersicht über ASP.NET-Steuerelement-Designer.

In dieser exemplarischen Vorgehensweise werden die folgenden Themen behandelt:

  • Erstellen eines Designers für zusammengesetzte Standardsteuerelemente und Zuordnen dieses Designers zu einem zusammengesetzten Steuerelement.

  • Erstellen eines Designers für zusammengesetzte in der Größe veränderbare Steuerelemente und Zuordnen dieses Designer zu einem zusammengesetzten Steuerelement.

  • Erstellen eines einfachen Containersteuerelement-Designers mit einem bearbeitbaren Bereich und Zuordnen dieses Designers zu einem WebControl-Steuerelement. Mit diesem Designer können Sie auf der Entwurfsoberfläche dem bearbeitbaren Bereich Text hinzufügen und außerdem zusätzliche Steuerelemente in den Bereich ziehen.

  • Verweisen auf die benutzerdefinierten Steuerelemente (und ihre zugeordneten Designer) auf einer Webseite.

  • Arbeiten mit der Webseite in der Entwurfsansicht in Visual Studio 2005.

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

  • Visual Studio 2005, womit Sie eine Webseite erstellen, die als Host für benutzerdefinierte Steuerelemente und deren zugeordnete Designer fungiert.

  • Eine ASP.NET-Website für die Seite, die die Steuerelemente hostet. Wenn Sie bereits eine Website konfiguriert haben, können Sie diese als Ausgangspunkt für diese exemplarische Vorgehensweise verwenden. Ansonsten finden Sie ausführliche Informationen über das Erstellen eines virtuellen Verzeichnisses oder einer virtuellen Site unter Gewusst wie: Erstellen und Konfigurieren von virtuellen Verzeichnissen in IIS 5.0 und 6.0.

In diesem Abschnitt erstellen Sie drei einfache Webserver-Steuerelemente mit jeweils einem zugeordneten benutzerdefinierten Steuerelement-Designer.

So erstellen Sie eine Datei für den Code

  1. Erstellen Sie in einem Editor die neue Datei SimpleControlDesigners und der Dateiendung für die Sprache, in der Sie arbeiten. Erstellen Sie z. B. in Visual Studio 2005 die neue Klassendatei SimpleControlDesigners.vb oder SimpleControlDesigners.cs.

  2. Fügen Sie die folgenden Namespaceverweise hinzu, die zum Arbeiten mit den Designerklassen erforderlich sind. Fügen Sie auch einen Namespace hinzu, der die Steuerelemente und die zugeordneten Designer enthält.

    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 
    {
    }
    
    
    
  3. Speichern Sie die Datei.

Jetzt können Sie ein zusammengesetztes Webserver-Steuerelement und einen zugeordneten Designer erstellen. Ein Designer kann sich in derselben Assembly wie das Steuerelement befinden, kann aber auch in einer anderen enthalten sein. In dieser exemplarischen Vorgehensweise erstellen Sie ihn aus Gründen der Einfachheit in derselben Codedatei und Assembly.

So erstellen Sie ein zusammengesetztes Steuerelement und einen zugeordneten Designer

  1. Erstellen Sie innerhalb des in der Datei SimpleControlDesigners deklarierten Namespaces eine öffentliche Deklaration für eine Klasse eines zusammengesetzten Steuerelements, die von CompositeControl erbt. Dies wird im folgenden Codebeispiel dargestellt.

    	public class SimpleCompositeControl : CompositeControl
    	{
    	}
    
    
    
  2. Fügen Sie der Klasse die im folgenden Codebeispiel gezeigten öffentlichen Eigenschaften hinzu. Mit diesen wird auf der Webseite ein Teil der Benutzeroberfläche erstellt.

    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;
        }
    }
    
    
    
    
  3. Erstellen Sie eine Methode zum Hinzufügen von untergeordneten Steuerelementen zum zusammengesetzten Steuerelement. Die folgende Methode fügt zwei Textfelder und einen Zeilenumbruch hinzu, die auf der Webseite angezeigt werden.

    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();
    }
    
    
    
  4. Erstellen Sie eine Entwurfsklasse für ein einfaches zusammengesetztes Steuerelement, die von CompositeControlDesigner abgeleitet und dem gerade erstellten zusammengesetzten Steuerelement zugeordnet wird.

    Obwohl es eine Vielzahl von Wiedergabefeatures für die Benutzeroberfläche gibt, die Sie dem Designer hinzufügen könnten, werden im folgenden Codebeispiel einfach der Designer erstellt und eine Schlüsseleigenschaft in der Basisklasse überschrieben, damit die Größe des Steuerelements in der Entwurfsansicht nicht verändert wird.

    public class SimpleCompositeControlDesigner : CompositeControlDesigner
    {
        // Set this property to prevent the designer from being resized.
        public override bool AllowResize 
        {
            get { return false; }
        }
    }
    
    
    
  5. Fügen Sie direkt oberhalb der Klassendeklaration für das zusammengesetzte Steuerelement ein Designer-Metadatenattribut ein, das das Steuerelement der gerade erstellten Designerklasse zuordnet. Dies wird im folgenden Codebeispiel gezeigt.

    [Designer(typeof(SimpleCompositeControlDesigner))]
    public class SimpleCompositeControl : CompositeControl
    
    
    
  6. Speichern Sie die Datei.

Nachdem Sie ein benutzerdefiniertes zusammengesetztes Websteuerelement und einen zugeordneten Designer erstellt haben, können Sie ein zweites Steuerelement erstellen, das vom ersten abgeleitet wird. Das zweite Steuerelement unterscheidet sich nur darin, dass die Größe seines zugeordneten Designers auf der Entwurfsoberfläche geändert werden kann.

So erstellen Sie ein in der Größe veränderbares zusammengesetztes Steuerelement und einen zugeordneten Designer

  1. Erstellen Sie innerhalb des in der Datei SimpleControlDesigners deklarierten Namespaces eine öffentliche Deklaration für eine neue Klasse eines zusammengesetzten Steuerelements, die vom vorher erstellten SimpleCompositeControl erbt. Im folgenden Codebeispiel wird eine neue Deklaration veranschaulicht.

    	public class SimpleCompositeControl2 : SimpleCompositeControl
    	{
    	}
    
    
    
  2. Ordnen Sie dieses Steuerelement der CompositeControlDesigner-Basisklasse zu.

    Standardmäßig wird in diesem Beispiel wird ein einfacher in der Größe veränderbarer Designer für das zusammengesetzte Steuerelement erstellt.

    [Designer(typeof(CompositeControlDesigner))]
    public class SimpleCompositeControl2 : SimpleCompositeControl
    {
    }
    
    
    
  3. Speichern Sie die Datei.

Die ersten zwei erstellten Steuerelemente waren zusammengesetzte Steuerelemente, die Sie zusammengesetzten Steuerelement-Designern zugeordnet haben. Jetzt erstellen Sie ein einfaches Steuerelement, das von WebControl abgeleitet ist, und ordnen es der ContainerControlDesigner-Klasse zu. Dieser Typ von Designer ist hilfreich, wenn Sie einem einzigen benutzerdefinierten Webserver-Steuerelement einen Designer zuordnen und einen einzelnen bearbeitbaren Bereich auf der Entwurfsoberfläche bereitstellen möchten. Das hier erstellte benutzerdefinierte Steuerelement implementiert keine tatsächlichen Funktionen. Es soll lediglich die Features der ContainerControlDesigner-Klasse darstellen.

12yydcke.alert_note(de-de,VS.100).gifHinweis:

Die gleichen Funktionen können Sie mit einem zusammengesetzten Steuerelement und Designer bereitstellen, die denen ähneln, die Sie zuvor erstellt haben. Mit diesem Beispiel soll nur gezeigt werden, wie Sie die ContainerControlDesigner-Klasse verwenden und einem WebControl-Steuerelement zuordnen können.

So erstellen Sie ein Webserver-Steuerelement und einen Container-Designer mit einem bearbeitbaren Bereich

  1. Erstellen Sie innerhalb des in der Datei SimpleControlDesigners deklarierten Namespaces eine öffentliche Deklaration für eine neue Webserver-Steuerelementklasse. Dies wird im folgenden Codebeispiel dargestellt.

    	public class SimpleContainerControl : WebControl, INamingContainer
    	{
    	}
    
    
    
  2. Erstellen Sie eine Containersteuerelement-Designerklasse, die dem benutzerdefinierten Steuerelement zugeordnet wird. Implementieren Sie zwei Eigenschaften: eine FrameStyle-Eigenschaft, die das Format des Rahmens des Designers enthält, und eine FrameCaption-Eigenschaft, die den Headertext des Rahmens enthält. Diese Eigenschaften stellen einen Rahmen für das Steuerelement bereit, der auf der Entwurfsoberfläche angezeigt und ausgewählt werden kann. Der Code für den Designer und die Eigenschaften wird im folgenden Codebeispiel dargestellt.

    12yydcke.alert_note(de-de,VS.100).gifHinweis:

    Die ContainerControlDesigner-Klasse behandelt automatisch alle weiteren Aspekte der Wiedergabe des benutzerdefinierten Steuerelements zur Entwurfszeit und des Bereitstellens eines einzelnen bearbeitbaren Bereichs.

    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;
            }
        }
    }
    
    
    
  3. Ordnen Sie dem Steuerelement den Designer zu. Fügen Sie direkt über der Klassendeklaration für das Webserver-Steuerelement das Designer-Metadatenattribut hinzu. Beachten Sie, dass Sie in diesem Fall, wie im folgenden Codebeispiel gezeigt, auch das ParseChildren-Attribut mit einem false-Parameter hinzufügen müssen. Dies weist den Entwurfszeitparser an, den inneren Inhalt von Steuerelementen anstatt als Eigenschaften als untergeordnete Steuerelemente zu behandeln. In diesem Fall soll der innere Inhalt dieses Steuerelements als untergeordnete Steuerelemente behandelt werden, damit Sie zur Entwurfszeit andere Serversteuerelemente in den bearbeitbaren Bereich ziehen und ihre Eigenschaften bearbeiten können.

    [Designer (typeof(SimpleContainerControlDesigner))]
    [ParseChildren (false)]
    public class SimpleContainerControl : WebControl, INamingContainer
    {
    }
    
    
    
  4. Speichern Sie die Datei.

Sie haben drei benutzerdefinierte Steuerelemente mit zugeordneten Steuerelement-Designern erstellt. Nun müssen Sie nur noch die Steuerelemente in eine Assembly kompilieren und sie dann in einem visuellen Entwurfstool verwenden.

So kompilieren Sie die benutzerdefinierten Steuerelemente und die Designer

  1. Öffnen Sie eine Eingabeaufforderung für den Ordner, in dem Sie die Datei SimpleControlDesigners erstellt haben. Über diese Eingabeaufforderung können Sie den Quellcode in eine Assembly kompilieren.

    12yydcke.alert_note(de-de,VS.100).gifHinweis:

    Um die .NET Framework-Compiler von diesem Ort aus ausführen zu können, müssen Sie der PATH-Variablen des Computers bereits den Pfad der .NET Framework-Installation hinzugefügt haben. Normalerweise befindet sich dieser Pfad im Windows-Installationsverzeichnis unter \Microsoft.NET\Framework\<Versionsnummer>. Wenn Sie die PATH-Variable nicht aktualisiert haben, klicken Sie mit der rechten Maustaste auf Arbeitsplatz, wählen Sie Eigenschaften aus, klicken Sie auf die Registerkarte Erweitert, und klicken Sie auf die Schaltfläche Umgebungsvariablen. Doppelklicken Sie in der Liste Systemvariablen auf die PATH-Variable. Fügen Sie im Textfeld Variablenwert ein Semikolon (;) hinter den im Textfeld vorhandenen Werte ein, und geben Sie dann den Pfad der .NET Framework-Installation ein. Klicken Sie jeweils auf OK, um die Dialogfelder zu schließen.

  2. Kompilieren Sie die Steuerelemente in der Datei SimpleControlDesigners mithilfe des folgenden Kompilierbefehls in eine Assembly.

    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
    
  3. Verschieben Sie die resultierende Assemblydatei in den Ordner \Bin für die Website, die die Steuerelemente hostet.

    12yydcke.alert_note(de-de,VS.100).gifHinweis:

    Visual Studio-Benutzer, die die Steuerelemente und Designer kompilieren möchten, müssen einen Verweis auf System.Design.dll hinzufügen. Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen eines Verweises auf .NET- oder COM-Komponenten in einer Website.

Nach dem Erstellen einer Assembly mit benutzerdefinierten Steuerelementen und deren zugeordneten Steuerelement-Designern erstellen Sie in Visual Studio 2005 eine Webseite. Dort verweisen Sie auf die Steuerelemente, zeigen die Darstellung in der Entwurfsansicht an und laden die Seite in einem Browser.

So erstellen Sie eine Webseite als Host für die Steuerelemente

  1. Öffnen Sie Ihre Website in Visual Studio 2005, und erstellen Sie die neue Seite ControlDesigners.aspx. Fügen Sie am oberen Rand der Seite direkt unter der Seitendeklaration eine Register-Direktive hinzu, um auf die Assembly und bereits erstellte Steuerelemente zu verweisen. Dies wird im folgenden Codebeispiel dargestellt.

    <%@ Page Language="C#" %>
    <%@ register tagprefix="aspSample" 
      assembly="SimpleControlDesignersCS" 
      namespace="Samples.AspNet.CS.Controls" %>
    
    
    
  2. Stellen Sie den Rest der Seite fertig, wie im folgenden Codebeispiel gezeigt, um auf jedes der drei bereits erstellten Steuerelemente zu verweisen: SimpleCompositeControl, SimpleCompositeControl2 und SimpleContainerControl. Beachten Sie, dass Sie zum Verweisen auf die Steuerelemente jeweils das in der Register-Direktive angegebene aspSample-Präfix verwenden müssen.

    <!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 runat="server">
        <title>Designers Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <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" runat="server" />
            <br /><br />
            <div style="font-family:tahoma;font-size:x-small;">
                <span style="font-size: 14pt">
                Composite, resize</span>
            </div>
            <aspSample:SimpleCompositeControl2 id="SimpleControl2" runat="server"  
                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" runat="server" 
                height="57px">
                Type some content here.
            </aspSample:SimpleContainerControl>
            <br /><br />
        </div>
        </form>
    </body>
    </html>
    
    
    
  3. Speichern Sie die Seite.

Jetzt können Sie die Seite in der Entwurfsansicht testen. Es wird gezeigt, wie die Steuerelement-Designer funktionieren.

So veranschaulichen Sie die Wiedergabe der Steuerelemente zur Entwurfszeit

  1. Wechseln Sie zur Entwurfsansicht für die Seite.

    Die Steuerelemente sollten so wie in der folgenden Bildschirmabbildung angezeigt werden. Beachten Sie, dass das zweite zusammengesetzte Steuerelement in der Größe veränderbar ist, das erste jedoch nicht.

    Die Seite ControlDesigners.aspx in der Entwurfsansicht
    Grafik zu VS ControlDesigners.aspx in der Entwurfsansicht
  2. Klicken Sie auf den Inhaltsbereich des Containersteuerelements, und geben Sie Textinhalt für das Steuerelement ein.

  3. Wechseln Sie zur Quellenansicht, und suchen Sie den Quellcode für das Containersteuerelement. Vergewissern Sie sich, dass der im Bereich eingegebene Text jetzt im Quellcode angezeigt wird.

  4. Wechseln Sie zurück zur Entwurfsansicht.

  5. Klicken Sie auf den Rahmen des Steuerelements, positionieren Sie den Mauszeiger über einem der Symbole zum Ändern der Größe, und ändern Sie die Größe des Containersteuerelements.

  6. Klicken Sie auf den bearbeitbaren Bereich des Steuerelements am Ende des Textinhalts, und drücken Sie die EINGABETASTE, um einen Zeilenvorschub hinzuzufügen.

  7. Ziehen Sie ein Button-Steuerelement aus der Toolbox, und platzieren Sie es im bearbeitbaren Bereich unter dem eingegebenen Text. Ziehen Sie ein Label-Steuerelement aus der Toolbox, und platzieren Sie es neben der Schaltfläche. Dadurch wird veranschaulicht, dass Sie untergeordnete Steuerelemente in den bearbeitbaren Bereich ziehen können. Bei Bedarf können Sie zur Entwurfszeit Eigenschaften für die untergeordneten Steuerelemente festlegen, und Sie können Code für das Button-Steuerelement hinzufügen, um die Text-Eigenschaft des Label-Steuerelements zur Laufzeit zu aktualisieren.

    Die Seite mit den gerade hinzugefügten Steuerelementen sollte so ähnlich wie in der folgenden Bildschirmabbildung angezeigt werden.

    Containersteuerelement mit untergeordneten Steuerelementen
    VS-Container-Steuerelement mit untergeordneten Steuerelementen
  8. Speichern Sie die Seite.

So zeigen Sie die Seite zur Laufzeit an

  • Laden Sie die Seite in einem Browser.

    Die Steuerelemente sollten so angezeigt werden, wie Sie sie in der Entwurfsansicht angepasst haben. Die Seite sollte der folgenden Bildschirmabbildung ähneln.

    Vollständige Steuerelement-Designer-Webseite
    VS-Webseite "Simple Control Designers"

In dieser exemplarische Vorgehensweise wurden die grundlegenden Aufgaben für das Erstellen eines benutzerdefinierten Steuerelements dargestellt, das einem zusammengesetzten Steuerelement oder einem Containersteuerelement zugeordnet ist. Sie haben benutzerdefinierte Steuerelemente mit Designern erstellt, mit denen Sie die Größe der Steuerelemente ändern und Text in der Entwurfsansicht von Visual Studio 2005 hinzufügen können. Hier einige Vorschläge für die weitere Vorgehensweise:

Community-Beiträge

HINZUFÜGEN
Anzeigen: