StyleSheet, contrôle

Article
04/11/2008

Le contrôle StyleSheet n'a pas de représentation visuelle ; il sert à organiser les styles à appliquer à d'autres contrôles.

Le contrôle StyleSheet peut contenir n'importe quel nombre d'éléments <Style> ou d'éléments héritant de l'élément Style. Chaque élément Style dans la feuille de style doit posséder une propriété Name unique. Vous pouvez utiliser la propriété Name pour faire référence à chaque élément Style du contrôle StyleSheet, à partir d'autres contrôles du même objet MobilePage.

Remarque Le contrôle StyleSheet ignore ses propres attributs de style. La définition d'un attribut de style sur le contrôle StyleSheet lui-même n'a pas d'effet sur les styles enfants contenus dans le contrôle StyleSheet.

Une page mobile peut également utiliser une feuille de style externe ; par ailleurs, plusieurs pages peuvent partager la même feuille de style externe. Pour créer la feuille de style externe, vous devez créer un contrôle utilisateur dans un fichier .ascx, puis vous y placez un seul contrôle de feuille de style comprenant un ensemble de styles. Dès lors, pour faire référence au fichier, vous placez un contrôle de feuille de style sur la page en affectant à sa propriété ReferencePath l'URL relative du contrôle utilisateur. Pour plus d'informations sur les contrôles utilisateur, consultez Création de contrôles mobiles personnalisés.

Syntaxe des contrôles mobiles

Les propriétés, valeurs par défaut et éléments de code requis sont indiqués en caractères gras.

<mobile:Stylesheetrunat="server"
   id="id"
   ReferencePath="externalReferencePath">
   style declarations
</mobile:Stylesheet>

Feuille de style par défaut

L'infrastructure de page ASP.NET définit une feuille de style par défaut, qui prend en charge un certain nombre de styles. Les styles suivants sont pris en charge dans la feuille de style par défaut.

Style	Valeurs associées au style
titre	Font-Bold = true, FontSize = large
erreur	ForeColor = red
sous-commande	FontSize = small

Vous pouvez faire référence à ces styles avec des contrôles ou d'autres styles. Vous pouvez également créer des styles qui se substituent aux styles par défaut. Pour plus d'informations sur les caractéristiques et l'héritage des styles, consultez Styles.

Règles relatives à la relation contenant-contenu

Les contrôles suivants peuvent contenir un contrôle StyleSheet.

Contrôle	Commentaires
System.Web.UI.MobileControls.MobilePage	Un contrôle MobilePage ne contient qu'un seul contrôle StyleSheet, voire aucun.

Un contrôle StyleSheet peut contenir les contrôles ci-dessous.

Contrôle	Commentaires
System.Web.UI.MobileControls.Style	Un contrôle StyleSheet peut contenir n'importe quel nombre de contrôles StyleSheet, ou toute classe qui hérite de la classe Style.

Modèles de périphériques

Aucun.

Comportement spécifique au périphérique

Il n'y a aucun comportement spécifique au périphérique pour un contrôle StyleSheet.

Une feuille de style détermine uniquement la valeur des caractéristiques reçues par les contrôles, et non la réaction du périphérique par rapport à ces caractéristiques.

Exemple

L'exemple suivant crée un fichier .aspx avec un contrôle Stylesheet dans un formulaire ; il crée également un contrôle utilisateur dans un fichier externe nommé Mobile_style.ascx, qui contient des informations sur la feuille de style et le modèle.

Le contrôle StyleSheet est créé dans un fichier .aspx.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
    Namespace="System.Web.UI.MobileControls"
    Assembly="System.Web.Mobile" %>

<mobile:StyleSheet
   id="Style1"
   ReferencePath="Mobile_style.ascx"
   runat="server">
</mobile:StyleSheet>

<mobile:Form id=WelcomeForm runat="server" StyleReference="Style1"
   title="Welcome" >
   <mobile:Label runat="server" Text=" Welcome " StyleReference="title" />
</mobile:Form>

Les définitions de StyleSheet sont contenues dans un fichier externe Mobile_style.aspx.

//Code in Mobile_style.ascx ( external stylesheet in a user control).
<Mobile:Stylesheet
runat="server">
   <Style name="Style1">
      <DeviceSpecific>
        <Choice Filter="isHTML32">
         <HeaderTemplate>
            // Add other code or controls here, such as a banner
            // or an AdRotator control.
         </HeaderTemplate>
         <FooterTemplate>
            // Add other code or controls here, such as footers,
            // or a copyright.
         </FooterTemplate>
         </Choice>
      </DeviceSpecific>
   </Style>

   <Style name="Style2">
      <DeviceSpecific>
        <Choice Filter="isWML11">
         <HeaderTemplate>
            // Add other code or controls here.
            // This section would point to WML .wbmp files.
         </HeaderTemplate>
         <FooterTemplate>
            // Add other code or controls here.
            // This section would point to WML .wbmp files.
         </FooterTemplate>
         </Choice>
      </DeviceSpecific>
   </Style>
</Mobile:Stylesheet>

Ajoutez les définitions de filtres de périphérique suivantes à votre fichier web.config.

<configuration>
   <system.web>
   <deviceFilters>
      <filter name="isHTML32" compare="PreferredRenderingType" argument="html32" />
      <filter name="isWML11" compare="PreferredRenderingType" argument="wml11" />
   </deviceFilters>
   </system.web>
</configuration>

Voir aussi

StyleSheet, classe | StyleSheet, membres de classe | Guide de référence des contrôles

Partager via