Partager via

List, contrôle

  • Article

Affiche une liste d'éléments sur un périphérique mobile. Ce contrôle prend en charge le rendu basé sur un modèle via les jeux de modèles de périphérique. Il prend également en charge la pagination interne. Pour plus d'informations, consultez Jeux de modèles et contrôles basés sur un modèle ou Pagination.

Mode statique et mode interactif

Vous pouvez définir le contrôle de telle sorte qu'il fonctionne dans les modes suivants :

  • Mode statique - Le contrôle se comporte comme une liste statique. Les éléments de liste statiques peuvent être déclarés en tant qu'éléments enfants.
  • Mode interactif - Le contrôle affiche les éléments sous forme d'éléments interactifs.

Le comportement de ces modes est basé sur la présence d'un gestionnaire d'événements. En l'absence de gestionnaire d'événements, le mode statique est affecté au contrôle. Lorsqu'un gestionnaire d'événements est présent, le mode interactif est affecté au contrôle ; dans ce mode, chaque élément est un élément interactif qui génère un événement à la suite d'un clic.

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:Listrunat="server"
   id="id"
   Font-Name="fontName"
   Font-Size="{NotSet|Normal|Small|Large}"
   Font-Bold="{NotSet|False|True}"
   Font-Italic="{NotSet|False|True}"
   ForeColor="foregroundColor"
   BackColor="backgroundColor"
   Alignment="{NotSet|Left|Center|Right}"
   StyleReference="styleReference"
   Wrapping="{NotSet|Wrap|NoWrap}"

   DataMember="dataMember"
   DataTextField="dataTextField"
   DataValueField="dataValueField"
   Decoration="{None|Bulleted|Numbered}"
   ItemsAsLinks="{False|True}"
   ItemCount="itemCount"
   OnItemDataBind="onItemDataBindHandler"
   OnItemCommand="onItemCommandHandler"
   OnLoadItems="loadItemsHandler">

Place DeviceSpecific/Choice construct here. (optional)
   <DeviceSpecific>
      <Choice Add choice here>
      </Choice>
   </DeviceSpecific>

Place statically declared list items here. (optional)
   <Item Text="Text" Value="Value" />

</mobile:List>

Règles relatives à la relation contenant-contenu

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

Contrôle Commentaires
System.Web.UI.MobileControls.Form Peut contenir n'importe quel nombre de contrôles List.
System.Web.UI.MobileControls.Panel Peut contenir n'importe quel nombre de contrôles List.

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

Contrôle Commentaires
System.Web.UI.MobileControls.DeviceSpecific Un contrôle List ne contient qu'un seul contrôle DeviceSpecific, voire aucun.
System.Web.UI.MobileControls.Item Un contrôle List peut contenir n'importe quel nombre de contrôles Item.

Modèles de périphériques

Modèle Description
HeaderTemplate Le modèle d'en-tête est rendu au début de la liste. En mode paginé, l'en-tête est rendu sur chaque page.
FooterTemplate Le modèle de pied de page est rendu à la fin de la liste. En mode paginé, le pied de page est rendu sur chaque page.
ItemTemplate Le modèle d'élément est rendu pour chaque élément de liste.
AlternatingItemTemplate S'il est défini, un modèle d'élément de remplacement est rendu à la place du modèle d'élément pour les éléments pairs. Par exemple, le second élément est un modèle de remplacement, de même que le quatrième élément, ou tous les autres éléments dont le rang est pair.
SeparatorTemplate Le modèle de séparateur est rendu entre deux éléments.

Comportement spécifique au périphérique

Langage du périphérique Description du comportement
HTML Le rendu d'une liste en langage HTML dépend du style défini dans la propriété Decoration :
  • Si la valeur de la propriété Decoration est None, chaque élément est rendu tel quel (sans style).
  • Si la valeur de la propriété Decoration est Bulleted, les éléments sont rendus sous la forme d'éléments <li> (élément de liste) dans une liste <ul> (liste à puces).
  • Si la valeur de la propriété Decoration est Numbered, les éléments sont rendus sous la forme d'éléments <li> dans une liste <ol> (liste numérotée).

Si un événement ItemCommand est défini, le texte de l'élément est délimité par un lien hypertexte.

Si un contrôle est basé sur un modèle, il affiche la liste uniquement selon le style défini par les modèles.
WML En langage WML, une liste statique est rendue sous la forme d'une série de lignes statiques.

En langage WML, sur les périphériques utilisant la technologie Openwave, une liste interactive est rendue sous la forme d'une construction <select>, ce qui permet à l'utilisateur de se servir des touches du pavé numérique pour cliquer ou sélectionner les éléments. D'autres éléments de l'interface utilisateur d'une carte peuvent être fusionnés dans le bloc select.

Sur d'autres périphériques prenant en charge le langage WML, une liste interactive est rendue sous la forme d'une série d'ancres.

Si un contrôle est basé sur un modèle, il affiche la liste uniquement selon le style défini par les modèles.

Exemple

L'exemple suivant affiche une liste de fruits. Lorsque vous sélectionnez un fruit, le contrôle affiche son prix.

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

<script language="vb" runat="server">
protected Sub List_Click(source As Object, e As ListCommandEventArgs)
   Dim selectedFruit as String
   selectedFruit = "You selected " + e.ListItem.Text + _
      " at " + e.ListItem.Value + " per pound."
   PriceLabel.Text = selectedFruit
   ActiveForm = Price
End Sub
</script>

<mobile:Form id="ShowProduce" runat="server" BackColor="Green">
   <mobile:Label runat="server" id="label1">Pick a Fruit!</mobile:Label>
   <mobile:List runat="server" id="ListProduce" 
     OnItemCommand="List_Click" >
      <item Text="Apples" Value="20 cents" />
      <item Text="Apricots" Value="80 cents" />
      <item Text="Bananas" Value="79 cents" />
      <item Text="Grapes" Value="50 cents" />
      <item Text="Oranges" Value="30 cents" />
      <item Text="Peaches" Value="10 cents" /> 
      <item Text="Pears" Value="70 cents" />
      <item Text="Plums" Value="99 cents" />
   </mobile:List>
</mobile:Form>
<mobile:Form id="Price" runat = "server">
   <mobile:Label runat="server" id="PriceLabel"/>
</mobile:Form>
[C#]
<%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"
    Language="C#" %>
<%@ Register TagPrefix="mobile"
    Namespace="System.Web.UI.MobileControls"
    Assembly="System.Web.Mobile" %>

<script language="c#" runat="server">
protected void List_Click(Object source, ListCommandEventArgs e)
{
   String selectedFruit = "You selected " + e.ListItem.Text +
      " at " + e.ListItem.Value + " per pound.";
   PriceLabel.Text = selectedFruit;
   ActiveForm = Price;
}
</script>

<mobile:Form id="ShowProduce" runat="server" BackColor="Green">
   <mobile:Label runat="server" id="label1">Pick a Fruit!</mobile:Label>
   <mobile:List runat="server" id="ListProduce" 
     OnItemCommand="List_Click" >
      <item Text="Apples" Value="20 cents" />
      <item Text="Apricots" Value="80 cents" />
      <item Text="Bananas" Value="79 cents" />
      <item Text="Grapes" Value="50 cents" />
      <item Text="Oranges" Value="30 cents" />
      <item Text="Peaches" Value="10 cents" /> 
      <item Text="Pears" Value="70 cents" />
      <item Text="Plums" Value="99 cents" />
   </mobile:List>
</mobile:Form>
<mobile:Form id="Price" runat = "server">
   <mobile:Label runat="server" id="PriceLabel"/>
</mobile:Form>

Voir aussi

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