Les content controls sont des contrôle qui héritent tous de la class ContentControl et ils ne peuvent contenir que un seul élément. Le contenu d’un content control se défini grâce à la propriété content et peut être de n’importe quel type.

Label :

Le label est le plus simple content control en WPF. Il sert juste de conteneur. Sa fonction la plus courante est :

<Label Height="25" Width="Auto" Content="Ceci est un label."/>

Ou

<Label Height="25" Width="Auto">Ceci est un label.</Label>

Nous pouvons utiliser avec le label ce que l’on appelle les Mnemonic keys. C’est un système qui, lorsqu’une certaine combinaison de touches est pressée, déplace le focus sur le contrôle cible. Par exemple si J est une mnemonic key pour un contrôle, le fait de presser Alt+J déplacera le focus directement sur le contrôle. Comment faire cela ? et bien c’est très simple. Il suffit dans le texte du label de précéder la lettre du raccourci par _ . Exemple :

<Label Height="25" Width="Auto">Ceci est un _label.</Label>

Mais comment désigner un contrôle cible ? A ce stade nous allons vous donner la solution sans explication, car celle-ci fait appel à des connaissances qui seront vues plus loin dans le cours.

<Label Height="25" Width="Auto" Target="{Binding ElementName=myTextBox}" >Ceci est un _label.</Label>
<TextBox x:Name="myTextBox" Height="25" Width="100"/>

Lorsque vous presserez Alt + l vous verrez le focus bouger directement dans la Textbox.

Button

Le button est certainement le plus utilisé des content control. Est-ce vraiment la peine de vous le présenter ? :-) Bon allez un petit tour d’horizon. Ce contrôle sert à interagir avec l’utilisateur, en effet lorsque l’on clique dessus celui-ci exécute une action. Voici comment ajouter un bouton dans une application :

<Button x:Name="btOk" Height="25" Width="100" Content="Ok"/>

Présentons maintenant quelques propriétés intéressantes :

• isDefault : Cette propriété détermine si ce bouton est le bouton par défaut. Si cette propriété est à true cela veut dire que ce bouton sera pressé dés que l’utilisateur pressera la touche enter.
• isCancel : propriété détermine si ce bouton est le bouton cancel par défaut. Si la propriété est a true, ce bouton sera pressé automatiquement que l’utilisateur appuiera sur la touche Esc.

Il ne sera pas expliqué dans cette partie comment exécuter une action avec un bouton, car cela fait intervenir la notion d’Event, et même en WPF de RoutedEvent que nous n’avons pas encore vu pour le moment. Comme le Label, le bouton fait intervenir la notion d’access key. Celle-ci permet de joindre une combinaison de touche (Alt+touche) au bouton. Exemple :

<Button x:Name="btOk" Height="25" Width="100" Content="O_k"/>

Lorsque vous presserez Alt+k l’action du bouton sera exécutée.

CheckBox :

Permet à un utilisateur de sélectionner une option ou non. Voici comment l’implémenter :

<CheckBox x:Name="ckbCheck" Height="25" Width="100" Content="Check me!"/>

On connait le statu (sélectionné ou non) d’un checkbox grâce à la propriété isChecked de type Bool. Comme ce contrôle hérite de ButtonBase, vous pouvez traiter les events comme le Click par exemple.

RadioButton :

Le RadioButton est principalement utilisé pour sélectionner une option parmi un groupe. Lorsqu’ un RadioButton est sélectionné parmi un groupe, les autres sont automatiquement désélectionnés. Exemple :

<RadioButton GroupName="bt1" Height="25" Width="100" Content="Radio 1"/>
<RadioButton GroupName="bt1" Height="25" Width="100" Content="Radio 2"/>
<RadioButton GroupName="bt1" Height="25" Width="100" Content="Radio 3"/>

Tous ces RadioButton font partie du groupe bt1, et un seul d’entre eux peut être sélectionné simultanément. La vérification du statut se fait aussi à l’aide de la propriété isChecked.

TextBlock :

Il sert juste à représenter une zone de texte dans la form. Exemple :

<TextBlock>Ceci est un text.</TextBlock>

Image :

Ce contrôle sert à … je vous le donne en mille … afficher une image. Il s’utilise comme ceci :

<Image x:Name="image"
       Source="C:Usersj.flawinneDocumentsmypicttachments.gif"
       Height="47"
       Width="170"
       Stretch="Fill"
       />

L'URI (Source=”…”) peut être un chemin d’accès sur le disque, une ressource ou une Web ressource. La propriété Stretch sert à définir le comportement de remplissage de l’image. Voici ses différentes valeurs :

• None : L’image à ça taille initial, elle peut être « croppée » si elle dépasse de la taille du contrôle.
• Fill : La taille de l’image est modifiée pour tenir entièrement dans l’espace du contrôle Image.
• Uniform : La taille de l’image est modifiée pour tenir entièrement dans l’espace du contrôle Image tout en conservant sont ratio initial.
• UniformToFill : La taille de l’image est modifiée pour tenir entièrement dans l’espace du contrôle Image tout en conservant sont ratio initial. Mais si sont ratio et celui du contrôle image diffère, l’image est modifiée.

TextBox :

Le TextBox control est une zone ou l’on peut saisir du texte. Mais aussi juste afficher du texte sans pouvoir le modifier grâce à la propriété isReadOnly. Exemple avec isReadOnly à false :

<TextBox x:Name="txt1" Height="25" Width="100" IsReadOnly="False"/>

Et maintenant avec isReadOnly à True :

<TextBox x:Name="txt1" Height="25" Width="100" IsReadOnly="True" Text="Read only"/>

Le TextBox control peut aussi être multi lignes, pour ce faire mettre la propriété TextWrapping à Wrap. Et mettre une taille plus grande :-) Exemple :

<TextBox x:Name="txt1" Height="100" Width="100" IsReadOnly="False" TextWrapping="Wrap"/>

Vous vous apercevrez rapidement que si la taille du texte dépasse la hauteur de la textbox , il n’y a point d’apparition de la barre de défilement. Et pour cause, il faut mettre la propriété VerticalScrollBarVisibility à Visible. Comme ceci :

<TextBox x:Name="txt1" Height="100" Width="100" IsReadOnly="False" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible"/>

ProgressBar :

Ce contrôle sert à donner un aspect visuel à l’avancement d’un job (fonction, …). Exemple :

<ProgressBar x:Name="pb1" Minimum="0" Maximum="100" Value="50" Height="25" Width="200"/>

Voici quelques propriétés intéressentes :

• Minimum : La valeur la plus petit que peut prendre la propriété Value.
• Maximum : La valeur la plus grande que peut prendre la propriété Value.
• Value : La valeur de la progression.
• isIndeterminate : Indique si on connait l’avancement ou non.

  <ProgressBar x:Name="pb1" Minimum="0" Maximum="100" Height="25" Width="200" IsIndeterminate="True" />

  
• isEnabled : Détermine si la barre est active ou non.
• Orientation : Détermine si la barre est affichée à la verticale ou à l’horizontale.

Slider :

Le slider control permet de choisir une valeur parmi un range. Exemple :

<Slider x:Name="sl1" Maximum="100" Minimum="0" />

Un peu léger ne trouvez vous pas ? Il est évidement possible de graduer ce slider. Dans notre exemple on a pris un minimum de 0 et un maximum de 100. Admettons que nous voulons des graduations à 0,10,20,30,40,…,100 . Nous allons donc prendre un emplacement de graduation toutes les 10 unités.

<Slider x:Name="sl1" Maximum="100" Minimum="0" TickPlacement="BottomRight" TickFrequency="10"/>

La propriété TickFrequency détermine l’espace entre chaque graduation. Et la propriété TickPlacement comme son nom l’indique sert à déterminer où placer les graduations. Les différentes valeurs possibles pour TickPlacement sont :

• BottomRight : voir la capture ci-dessus ;-)
• Topleftt :
  
• Both :
  
• None : Sans rien.

Bien sûr la récupération de la valeur se fait via la propriété Value du slider. Voici d’autres propriétés utiles pour ce contrôle :

• isEnable : Détermine si le slider est actif ou non.
• isDirectionReversed : Si à True affiche le minimum à droite et le maximum à gauche.
• Ticks : Permet de définir soit même directement les endroits où placer les graduations.

Voila nous en avons fini avec les content control, place maintenant au item control dans le cours suivant.