Share via


Der Beispielsteuerelement-Designer für Aktionslisten und Dienste

Aktualisiert: November 2007

Im folgenden Thema ist ein Beispiel beschrieben, in dem ASP.NET-Steuerelement-Designer für Dienste und Aktionslisten verwendet werden, um zur Entwurfszeit eine Benutzeroberfläche für benutzerdefinierte Serversteuerelemente bereitzustellen.

Die folgenden Abschnitte enthalten Beispielcode, in dem das Erstellen und Verwenden von ASP.NET-Steuerelement-Designern für benutzerdefinierte Serversteuerelemente veranschaulicht wird. Insbesondere werden in diesem Thema (zusammen mit dem entsprechenden unten aufgeführten Beispielcodethema) die folgenden Features und Aufgaben für die Arbeit mit Designern behandelt.

  • Erstellen von Designern, die Designerhostdienste und Aktionslisten verwenden

  • Zuordnen eines Designers zu einem benutzerdefinierten Steuerelement

  • Kompilieren von Steuerelementen und ihrer zugeordneten Designer in eine Assembly

  • Verweisen auf Steuerelemente auf einer Webseite

  • Arbeiten mit den Steuerelement-Designern in der Visual Studio 2005-Entwurfsansicht

Der Beispielcode für Designer liegt in zwei verschiedenen Versionen vor. Eine davon ist in Visual Basic geschrieben, die andere in C#. In dem Beispiel werden benutzerdefinierte Steuerelement-Designer veranschaulicht, die Hostdienste und Aktionslisten verwenden. Sie finden den Beispielcode unter dem Thema Gewusst wie: Verwenden von Diensten und Aktionslisten mit Steuerelement-Designern. Das Codebeispiel enthält vier benutzerdefinierte Steuerelemente einfacher Art, deren einziger Zweck darin besteht, die Verwendung von Designern zu veranschaulichen. Drei der benutzerdefinierten Steuerelemente sind von der Panel-Klasse abgeleitet. Das vierte ist ein benutzerdefiniertes Button-Steuerelement. Jedes der Bereichssteuerelemente im Quellcode verfügt außerdem über ein ihm zugeordnetes benutzerdefiniertes Designersteuerelement. Mithilfe von Diensten ermöglichen diese Designer eine Interaktion zwischen dem Steuerelement und einer Hostumgebung wie Visual Studio 2005. In einer visuellen Entwurfsumgebung (Entwurfsansicht in Visual Studio 2005) stellen diese Designer Code bereit, mit dessen Hilfe Sie zur Entwurfszeit Menüs mit verschiedenen Aufgaben erstellen können, die zum Konfigurieren der Steuerelemente dienen.

Kompilieren eines Beispiels

Das Visual Basic-Beispiel und das C#-Beispiel enthalten dieselben Funktionen. Daher können Sie das Beispiel in der von Ihnen bevorzugten Programmiersprache auswählen.

Damit Sie das Beispiel verwenden können, kompilieren Sie es als Bibliothek, und verschieben Sie die sich ergebende Assembly in das Verzeichnis Bin Ihrer Webanwendung.

Im folgenden Codebeispiel wird das Kompilieren des Beispiels über die Eingabeaufforderung veranschaulicht.

vbc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:DesignerServicesAndListsVB.dll DesignerServicesAndLists.vb
csc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out: DesignerServicesAndListsCS.dll DesignerServicesAndLists.cs

Kopieren Sie nach dem Kompilieren des Beispiels die sich ergebende Datei DesignerServicesAndListsVB.dll bzw. DesignerServicesAndListsCS.dll in den Ordner Bin Ihrer Website.

Erforderliche XML-Dateien

Neben der Assembly mit den Steuerelementen und Designern basiert das Beispiel auf drei verschiedenen XML-Dateien. Diese XML-Dateien enthalten grundlegende Formatinformationen, die zeigen, wie Designer Dienste verwenden können, die von der Hostumgebung bereitgestellt werden. In diesem Fall laden die Designer Formatdaten zur Entwurfszeit dynamisch aus den XML-Dateien und ändern mithilfe dieser Daten das Erscheinungsbild von Steuerelementen auf der Entwurfsoberfläche. In diesem Beispiel wird die Verwendung von Designerhostdiensten veranschaulicht. Es ist nicht als Empfehlung für das Implementieren von Formatdefinitionen gedacht.

Die XML-Dateien für dieses Beispiel befinden sich in demselben Ordner wie die ASP.NET-Webseite, auf der die Steuerelemente gehostet werden. Der Inhalt für die Dateien RedStyle.xml, BlueStyle.xml und GreenStyle.xml wird unten bereitgestellt.

RedStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="red"></style>
    <style name="ForeColor" value="white"></style>
</styles>

BlueStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="blue"></style>
    <style name="ForeColor" value="white"></style>
</styles>

GreenStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="green"></style>
    <style name="ForeColor" value="white"></style>
</styles>

Verwenden der Beispielsteuerelemente und Designer auf einer ASP.NET-Seite

Zur Verwendung der Beispielsteuerelemente und -Designer müssen Sie die Steuerelemente auf einer ASP.NET-Webseite platzieren, die Sie in einem Designer wie Visual Studio 2005 verwenden können. Für dieses Beispiel müssen Sie Ihrer Website in Visual Studio 2005 eine ASP.NET-Webseite hinzufügen. Erstellen Sie zuerst eine neue Webseite. Löschen Sie dann in der Quellansicht den Standardseiteninhalt, und fügen Sie die im folgenden Codebeispiel gezeigte Page-Direktive und die Register-Direktive hinzu.

<%@ page language="VB" %>
<%@ register tagprefix="aspSample" 
    assembly="DesignerServicesAndListsVB" 
    namespace="Samples.AspNet.VB.Controls" %>
<%@ page language="C#" %>
<%@ register tagprefix="aspSample" 
    assembly="DesignerServicesAndListsCS" 
    namespace="Samples.AspNet.CS.Controls" %>
Hinweis:

Die einzigen Unterschiede zwischen den Direktiven für Visual Basic und C# bilden das Sprachattribut in der Page-Direktive und die Erweiterung des Assemblynamens in der Register-Direktive.

Sie müssen außerdem den folgenden Markupcode unter die Register-Direktive kopieren. (Dieser Code ist für Visual Basic und C# identisch.)

<!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 id="Head1" >
    <title>Designer Samples</title>
</head>
<body>
  <form id="form1" >
      <p style="font-family:tahoma;font-size:larger;
      font-weight:bold">
        Using Action Lists and Designer Host Services</p>
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #1 (ControlWithStyleTasksDesigner):
        PanelContainerDesigner using a DesignerActionList, which
        obtains a list of XML files in the project and sets 
        the style using the XML element
        definitions.</span><p />
      </div>
      <aspSample:ControlWithStyleTasks id="ctl1" 
         
        backcolor="Red" forecolor="White">
          Hello there.</aspSample:ControlWithStyleTasks>
      <br />
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #2 (ControlWithConfigurationSettingDesigner):
        PanelContainerDesigner using configuration settings
        to obtain 
        the FrameCaption value.</span><p />
      </div>
      <aspSample:ControlWithConfigurationSetting 
        id="ctl2" >
        Hello There
      </aspSample:ControlWithConfigurationSetting>
      <br />
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #3 (ControlWithButtonTasksDesigner):
        PanelContainerDesigner using a smart-task action 
        item to insert a new button on the Web Forms page.</span><p />
      </div>
      <aspSample:ControlWithButtonTasks 
        id="ctl3" >
        Hello There
      </aspSample:ControlWithButtonTasks>
      &nbsp; &nbsp;
  </form>
</body>
</html>

Konfigurationseinstellungen für das Beispiel

Bei einem der Designer in diesem Beispiel wird ein Konfigurationsdateieintrag verwendet, um für eines der benutzerdefinierten Steuerelemente dynamisch einen Titel für die Entwurfsansicht anzuzeigen. Sie müssen die Datei Web.config Ihrer Website öffnen oder ggf. eine solche Datei erstellen und dem <appSettings>-Element einen Schlüssel hinzufügen, wie im folgenden Codebeispiel gezeigt.

<appSettings>
  <add key="ContainerControlTitle" value="Title from Config File"/>
</appSettings>

Testen der Steuerelement-Designer in Visual Studio 2005

Nachdem Sie dem Ordner Bin Ihrer Website die kompilierte Datei assembly.dll hinzugefügt haben, eine Hostseite hinzugefügt haben, auf der auf die benutzerdefinierten Steuerelemente verwiesen wird, und den Eintrag in der Datei Web.config erstellt haben, können Sie mit den Steuerelementen im Designer arbeiten. Stellen Sie sicher, dass die Seite in der Entwurfsansicht in Visual Studio 2005 geöffnet ist. Beachten Sie, dass die Seite drei Bereichssteuerelemente enthält. Wenn Sie auf das Steuerelement klicken, wird ein Bereich vorgegeben, den Sie bearbeiten können.

Testen von Designerdiensten und Aktionslisten

Sie können den Designer des ersten Steuerelements testen, indem Sie den Mauszeiger in der oberen rechten Ecke des Steuerelements platzieren und dann auf die Aktionslisten-Schaltfläche klicken. Im folgenden Bildschirmdruck ist das Steuerelement mit der angezeigten Aktionsliste dargestellt.

Steuerelement mit angezeigter Aktionsliste

Im Textfeld XML konfigurieren der Aktionsliste können Sie eine der zuvor erstellten XML-Dateien auswählen. Bei Auswahl einer der vorhandenen XML-Dateien wird das Entwurfszeitformat des Steuerelements mit den Formatinformationen aus dieser XML-Datei aktualisiert. Dieselbe Vorgehensweise können Sie bei den Namen der anderen XML-Dateien verwenden.

Durch Klicken auf die Aktionslisten-Schaltfläche für das dritte Steuerelement wird eine Aktionsliste angezeigt, die der im folgenden Bildschirmdruck ähnelt.

Aktionsliste des dritten Steuerelements

Mit dem Befehl Schaltfläche hinzufügen wird der Entwurfszeitansicht ein Button-Steuerelement hinzugefügt. Mit dem Befehl Benutzerdefinierte Schaltfläche hinzufügen wird der Seite eine Instanz eines benutzerdefinierten Schaltflächen-Steuerelements hinzugefügt.

Testen von Designerdiensten und bearbeitbaren Bereichen

Auf dem zweiten Steuerelement wird die Beschriftung Title Added From Config angezeigt. Der Designer verwendet Designerdienste, um diese Einstellung aus der Datei Web.config zu extrahieren und der Entwurfszeitansicht hinzuzufügen.

Das Steuerelement enthält auch einen bearbeitbarer Bereich. Sie können auf den bearbeitbaren Bereich klicken, um neuen Inhalt einzugeben. Der Inhalt wird für den Quellcode der Seite beibehalten.

Siehe auch

Aufgaben

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

Gewusst wie: Verwenden von Diensten und Aktionslisten mit Steuerelement-Designern

Konzepte

Übersicht über ASP.NET-Steuerelement-Designer