Styles

Article
08/21/2007

Chaque contrôle mobile ASP.NET fournit des propriétés de style que vous pouvez utiliser pour personnaliser le rendu du contrôle. Pour des raisons de commodité, les styles peuvent être regroupés de façon à ce que vous puissiez appliquer une certaine cohérence sur les différents éléments d'une page. Utilisez un contrôle StyleSheet ou un élément Style pour accéder aux propriétés spécifiques au contrôle et aux fonctionnalités du périphérique.

Notes

Il n'est pas garanti que les paramètres de propriété de style soient respectés. Si un périphérique cible ne prend pas un style particulier en charge, ASP.NET ignore ou substitue le style.

Héritage de style

À moins que vous ne spécifiiez de manière explicite des propriétés de style dans votre contrôle, que ce directement ou indirectement grâce à l'utilisation d'une référence de style, un contrôle hérite des propriétés de style de son conteneur. La plupart des propriétés de style ont pour valeur par défaut une référence null ou une valeur énumérée de NotSet. Cela facilite la distinction entre les propriétés de style qui ont été définies de manière explicite et celles qui n'ont pas été définies.

Déclaration de styles de manière explicite

Il existe deux moyens de déclarer un style de manière explicite pour un contrôle. L'un consiste à définir une propriété de style. Par exemple, vous créez un formulaire et vous y ajoutez un contrôle Label. (L'étiquette est alors un contrôle enfant du formulaire.) Donc, lorsque vous affectez la valeur "Arial" à la propriété Font-Name de cette étiquette, l'étiquette utilise la police Arial.

L'autre moyen de définir explicitement un style pour un contrôle enfant est de définir la propriété StyleReference du contrôle.

Définition de styles à l'aide d'un contrôle DeviceSpecific

Vous pouvez également définir les propriétés de style via un contrôle DeviceSpecific. L'exemple suivant présente une étiquette qui apparaît en italique pour la plupart des périphériques et en gras lorsqu'elle apparaît sur un périphérique de bureau.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script language="C#" runat="server">
// A custom method to determine if the page 
// is displayed on a mobile device
public bool IsDesktop(System.Web.Mobile.MobileCapabilities 
    capabilities, String argument)
{
    return !capabilities.IsMobileDevice;
}
</script>
<Mobile:StyleSheet runat="server">
  <Style Name="ListStyle" Font-Italic="true">
    <DeviceSpecific>
      <Choice Filter="IsDesktop" Font-Italic="false" 
        Font-Bold="true" />
    </DeviceSpecific>
  </Style>
</Mobile:StyleSheet>
<Mobile:Form runat=server>
  <Mobile:Label id="list1" runat=server StyleReference="ListStyle">
    Here is some text
  </Mobile:Label>
</Mobile:Form>

Algorithme de recherche pour un style référencé

Lorsqu'un style est référencé via la propriété StyleReference, ASP.NET suit une séquence particulière de contrôles pour déterminer le style à appliquer. Pour un contrôle enfant (contrôle au sein d'un contrôle conteneur parent), les règles de détermination des caractéristiques de l'enfant sont décrites dans la liste suivante, à l'aide de Font-Size comme exemple :

Si l'attribut Font-Size a été explicitement défini pour un contrôle enfant, le contrôle utilise ce paramètre.
Sinon, si la propriété StyleReference du contrôle enfant est définie (par exemple, myChild.StyleReference = someStyle), le contrôle utilise la valeur de l'attribut Font-Size de l'élément Style référencé (par exemple, someStyle). Le contrôle enfant accède à la valeur en effectuant les opérations suivantes :
1. L'enfant recherche le style référencé dans la feuille de style de l'instance MobilePage actuelle.
2. S'il ne le trouve pas sur la feuille de style de la page, il référence la feuille de style par défaut du système.
3. S'il ne le trouve dans aucune des feuilles de style, une erreur d'exécution est générée.
Si le style n'est pas disponible directement ou indirectement, la propriété StyleReference n'a pas été définie et le contrôle enfant obtient la valeur de son attribut Font-Size en appliquant cette procédure de manière récursive au contrôle parent.
Si la récurrence atteint le haut de la hiérarchie des contrôles sans valeur explicite pour l'attribut Font-Size, le contrôle utilise la taille de police par défaut.

Cet algorithme tient compte des styles séparés que vous pouvez référencer à partir de plusieurs contrôles. Il prend l'héritage en charge à partir des contrôles conteneurs et respecte les attentes de codage et logiques standard.

Exceptions à l'algorithme de recherche

Il existe deux exceptions à l'algorithme de recherche :

Une couleur d'arrière-plan ne reçoit pas sa valeur de l'objet parent. (Cette manière de procéder est cohérente par rapport au comportement des feuilles de style en cascade.)
Les contrôles DeviceSpecific n'héritent pas des valeurs du contrôle parent. Un contrôle DeviceSpecific est généralement créé de manière explicite pour un contrôle ou un type de contrôle spécifique.

Feuilles de style

Les contrôles mobiles ASP.NET vous fournissent une feuille de style par défaut qui définit un nombre de styles limité. Pour plus d'informations, consultez StyleSheet. Vous pouvez aisément substituer les valeurs dans ces styles par défaut pour appliquer les vôtres. Un nombre illimité de déclarations d'élément <Style> peut résider dans une feuille de style unique. Chaque élément <Style> est identifié par une propriété Name unique. Vous pouvez remplacer la propriété StyleReference d'un autre contrôle par la propriété Name, en référençant ainsi son style. Vous pouvez aussi utiliser cette technique pour référencer un style à partir d'un autre style.

Feuilles de style externes

Il est possible de définir une feuille de style externe que vous pouvez utiliser pour plusieurs contrôles. Cela est avantageux si vous souhaitez utiliser les mêmes styles sur plusieurs pages. Pour créer une feuille de style externe, créez un contrôle utilisateur dans un fichier .ascx, puis placez-y un seul contrôle StyleSheet comprenant un ensemble de styles. Dès lors, pour faire référence à ce fichier, placez un contrôle StyleSheet sur une page mobile en affectant l'URL relative du contrôle utilisateur à sa propriété ReferencePath.

Implémentation des feuilles de style externes

L'implémentation d'une feuille de style externe requiert trois étapes :

Écrivez un contrôle utilisateur mobile Microsoft ASP.NET dans un fichier .ascx.
Placez une seule feuille de style dans le fichier .ascx, en ajoutant les éléments <Style> requis.
Déclarez une feuille de style et affectez le nom du fichier .ascx du contrôle utilisateur à sa propriété ReferencePath pour chaque page mobile où vous souhaitez utiliser la feuille de style externe.

Au moment de l'exécution, tous les styles que vous avez déclarés dans la feuille de style externe sont mis à disposition de l'infrastructure de page ASP.NET pour la feuille de style sur la page mobile. Pour plus d'informations sur les contrôles utilisateur, consultez Contrôles utilisateur.

Caractéristiques des objets Style et de la classe Style

Un objet Style n'est pas un véritable contrôle et n'hérite pas de la classe de base MobileControl. Sur une page, il peut être déclaré uniquement dans un contrôle StyleSheet via l'utilisation de l'élément <Style>.

La classe de base Style contient les caractéristiques de style communes à tous les contrôles mobiles. Les classes qui héritent de la classe Style contiennent des caractéristiques de style supplémentaires spécifiques à leur contrôle associé.

Chaque MobileControl contient un objet Style en interne. Cependant, cet objet Style n'est pas exposé par l'intermédiaire des membres publics. En revanche, pour chaque propriété de style, le MobileControl possède une propriété accessible publiquement qui référence en interne le style contenu en privé. Par conséquent, un MobileControl expose directement les propriétés de style telles que Font, ForeColor et Wrapping.

Organisation des styles

Vous pouvez organiser les styles dans un contrôle StyleSheet. Dans une feuille de style, vous pouvez déclarer un nombre quelconque d'objets de style. Les styles sont déclarés de la même façon qu'un contrôle quelconque, à l'exception qu'un attribut runat=server n'est pas obligatoire. Pour plus d'informations, consultez <Style>, élément.

Un style peut hériter de ses propriétés d'un autre style dans la feuille de style en affectant le nom du style parent à sa propriété StyleReference. La portée de cela est la page mobile. C'est-à-dire que seuls les styles sur la feuille de style de la même page mobile peuvent être référencés. Pour qu'un contrôle acquière ses styles d'un objet de style dans la feuille de style, affectez le nom du style à la propriété StyleReference de son objet de style, en déclarant l'attribut StyleReference dans une page Web mobile ASP.NET ou en définissant par programme la propriété StyleReference.

Voir aussi

Partager via