ASP.NET-Webserversteuerelemente und CSS-Formatvorlagen
Aktualisiert: November 2007
Sie können die Darstellung der ASP.NET-Serversteuerelemente steuern, indem Sie Darstellungseigenschaften wie ForeColor, BackColor, Height und Width festlegen. Darüber hinaus unterstützen manche Steuerelemente Formatobjekte, die zusätzliche, auf Formatvorlagen bezogene Einstellungen verfügbar machen.
.gif "Hinweis") Hinweis: |
|---|
ASP.NET-Webseiten werden zur Laufzeit als HTML-Seiten behandelt. Daher können Sie die Darstellung aller Elemente auf der Seite bis auf Webserversteuerelemente mit CSS (Cascading Stylesheets) festlegen. Zusätzlich können Sie ASP.NET-Designs definieren, die CSS-Einstellungen enthalten, und dann Designs auf die Seiten bzw. die Site anwenden. Ausführliche Informationen finden Sie unter ASP.NET-Designs (Themes und Skins). |
Die folgenden Abschnitte enthalten Informationen über das direkte Festlegen von Formatvorlagen. Es wird u. a. erläutert, wie zur Entwicklungszeit und programmgesteuert mit Formatvorlagen gearbeitet wird.
Wiedergeben der Darstellungseigenschaften im Browser
Beim Ausführen der Seite werden die Darstellungseigenschaften entsprechend den Möglichkeiten des vom Benutzer verwendeten Browsers bereitgestellt. Wenn der Browser des Benutzers CSS (Cascading Stylesheets) unterstützt, werden die Darstellungseigenschaften als Formatattribute der HTML-Elemente wiedergegeben, aus denen das Steuerelement besteht. Wenn Sie beispielsweise ein HyperLink-Webserversteuerelement definieren und für dieses Steuerelement die ForeColor-Eigenschaft auf Red, die Bold-Eigenschaft auf true und die Size-Eigenschaft auf xx-small festlegen, wird das Steuerelement, sofern der verwendete Browser Stylesheets unterstützt, folgendermaßen angezeigt:
<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>
<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>
Wenn der Browser des Benutzers dagegen keine Formatvorlagen unterstützt, wird das Steuerelement mit anderen Mitteln dargestellt, z. B. mit einem <font>-Element. Der folgende Code bestimmt die Darstellung für das obige Beispiel, jedoch für einen Browser, der keine Formatvorlagen unterstützt.
<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>
<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>
Weitere Beispiele für Eigenschaften, die je nach Browser anders bereitgestellt werden, sind BorderWidth und BorderColor.
Manche Darstellungseigenschaften wie BorderStyle können nicht ohne Formatvorlagen wiedergegeben werden. Diese Eigenschaften werden deshalb in Browsern ignoriert, die Formatvorlagen nicht unterstützen. Weitere Informationen finden Sie unter ASP.NET-Webserversteuerelemente und Browserfunktionen.
Formatobjekte von Steuerelementen
Außer den Darstellungseigenschaften wie ForeColor und BackColor machen Steuerelemente ein oder mehrere Formatobjekte verfügbar, die zusätzliche Darstellungseigenschaften enthalten. Ein Beispiel ist die Font-Formateigenschaft, die ein Objekt des Typs FontInfo verfügbar macht, das einzelne Eigenschaften für die Schriftart enthält, z. B. Size, Name und Bold.
Manche Steuerelemente machen Formatobjekte verfügbar, mit denen Sie das Aussehen bestimmter Teile des Steuerelements festlegen können. Das Calendar-Webserversteuerelement enthält beispielsweise Formatobjekte wie DayStyle (einzelne Tage), SelectedDayStyle (Tag, Woche oder Monat, wie vom Benutzer ausgewählt) und WeekendDayStyle. Mit dem SelectedDayStyle-Formatobjekt können Sie z. B. die BackColor-Eigenschaft und die ForeColor-Eigenschaft des vom Benutzer ausgewählten Tags festlegen.
Die meisten Formatobjekte sind vom Typ Style oder vom Typ TableItemStyle, weil sie die Attribute von Tabellenzellen festlegen. Die Font-Eigenschaft ist vom Typ FontInfo.
Rangfolge und Vererbung bei Formatobjekten
Bei komplexen Steuerelementen erben Formatobjekte häufig Merkmale von anderen Formatobjekten. Zum Beispiel basiert im Calendar-Steuerelement das SelectedDayStyle-Objekt auf dem DayStyle-Objekt. Wenn Sie für SelectedDayStyle nicht explizit Eigenschaften festlegen, erbt es die Merkmale vom DayStyle-Objekt.
Diese Vererbung bedeutet, dass für die von Ihnen festgelegten Formatobjekteigenschaften eine Rangfolge gilt. So zeigt die folgende Liste die Reihenfolge von Formatobjekteigenschaften für das Calendar-Steuerelement, wobei die Einstellungen des letzten Objekts in der Liste die höchste Priorität haben.
Darstellungseigenschaften des Calendar-Basissteuerelements.
DayStyle-Formatobjekt.
WeekendDayStyle-Formatobjekt.
OtherMonthDayStyle-Formatobjekt.
TodayDayStyle-Formatobjekt.
SelectedDayStyle-Formatobjekt.
Formate, die sowohl auf ein Container- als auch auf ein Textelement angewendet werden, sind unter Umständen schwierig zu verwenden. Angenommen, die Textformateigenschaften eines Steuerelement-Stylesheets sollen auf einen Link und die restlichen Formateigenschaften auf einen Container angewendet werden. Dies ist durchführbar, wenn Sie die Formate mit den Formateigenschaften des Steuerelements festlegen, z. B. MenuItemStyle für ein Menüsteuerelement oder TodayDayStyle für ein Kalendersteuerelement. Durch eine CssClass-Eigenschaft definierte Formate sind jedoch schwieriger zu verwenden, da ASP.NET den Inhalt der Klasse auf dem Server nicht ermitteln kann. ASP.NET wendet die in der CssClass-Eigenschaft definierten Formate sowohl auf die Text- als auch auf die Containerelemente an und fügt ein Inlineformat hinzu, um die Auswirkungen dieser doppelten Verwendung zu unterdrücken (doppelte Ränder, proportionale Schriftartenmultiplikation usw.).
Zum Festlegen von Formaten für Steuerelemente verwenden Sie am Besten die im Steuerelement definierten Formateigenschaften sowie Stylesheets und Inlineformate, um bei Bedarf kleinere Anpassungen an einzelnen Elementen vorzunehmen. Um ein durch die Formateigenschaften eines Steuerelements festgelegtes Format zu überschreiben, verwenden Sie in einem Stylesheet die !important-CSS-Regel oder Inlineformate.
Im folgenden Codebeispiel wird die CssClass-Eigenschaft auf das hovernodestyle-Element angewendet. Diese Klasse wird zweimal als myclass und a.myclass:visited definiert, sodass die a:visited-Definition überschrieben wird.
<%@ Page Language="C#" %>
<html>
<head >
<asp:sitemapdatasource id="SiteMapSource" />
<style type="text/css">
a:visited
{
color: #000066
}
myclass, a.myclass:visited {
color: #FF0000
}
</style>
</head>
<body>
<form >
<a href="https://www.Contoso.com">Contoso</a>
<asp:treeview id="treeview1"
initialexpanddepth="1"
datasourceid="SiteMapSource"
forecolor="#444444"
font-names="Verdana"
font-size="0.8em">
<nodestyle font-bold="true" />
<hovernodestyle cssclass=myclass />
</asp:treeview>
</form>
</body>
</html>
Verwenden Sie zum Anpassen der Darstellung eines Steuerelements mit Cascading Stylesheets (CSS) entweder Inlineformate oder eine separate CSS-Datei, jedoch nicht beides gleichzeitig. Wenn sowohl Inlineformate als auch eine separate CSS-Datei verwendet werden, können unerwartete Ergebnisse auftreten.
Direkte Steuerung von CSS-Formatvorlagen und -Klassen
Steuerelemente machen zusätzlich zu den Darstellungseigenschaften und Formatobjekten zwei Eigenschaften verfügbar, mit denen Sie CSS-Formatvorlagen direkter bearbeiten können: CssClass und Style. Mit der CssClass-Eigenschaft können Sie dem Steuerelement eine Stylesheetklasse zuweisen. Mit der Style-Eigenschaft können Sie eine Zeichenfolge mit Formatattributen festlegen, die unverändert in das Steuerelement geschrieben wird. Mit der Style-Eigenschaft können Sie die Formatattribute festlegen, die nicht über andere Eigenschaften verfügbar gemacht werden. Die Style-Eigenschaft macht eine Auflistung verfügbar, deren Methoden (z. B. Add und Remove) Sie aufrufen können, um Formate direkt festzulegen.
In der Style-Eigenschaft vorgenommene Einstellungen werden nicht in der entsprechenden individuellen Darstellungseigenschaft wiedergegeben. Wenn Sie z. B. die Zeichenfolge background-color:red in der Style-Eigenschaft festlegen, wird die BackColor-Eigenschaft nicht ebenfalls auf Rot festgelegt, obwohl das Steuerelement mit rotem Hintergrund dargestellt wird. Wenn Sie beide Darstellungseigenschaften und die Style-Eigenschaft festlegen, haben die einzelnen Darstellungseigenschaften Vorrang vor der Style-Eigenschaft.
Siehe auch
Konzepte
ASP.NET-Webserversteuerelemente und Browserfunktionen