Tài liệu XAML- P3 docx

L’attribut IsChecked reçoit une valeur booléenne qui indique si par défaut la case est cochée ou non. Si vous ne souhaitez pas que la case soit cochée par défaut, vous pouvez bien sûr omettre tout simplement cet attribut. Parfois, vous aurez besoin d’une case à cocher autorisant l’état indéterminé. C’est l’attribut IsThreeState qui va autoriser ce comportement. <CheckBox Name="chkDispo" Margin="5,5,2,2" IsThreeState="True" > Disponible en semaine </CheckBox > Si vous souhaitez utiliser ce contrôle uniquement pour afficher une information mais que vous ne souhaitiez pas que l’utilisateur puisse modifier l’état de la case à cocher, vous devez ici encore utiliser obligatoirement l’attribut IsEna- bled . <CheckBox Name="chkDispo" Margin="5,5,2,2" IsEnabled="False" IsChecked="True" Content="Disponible en semaine" /> b Figure 4-12 : Une case à cocher dans l’état indéterminé Créer une case à cocher 4 Le guide du codeur • 101 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. L’attribut Content Dans ce dernier exemple, le texte est assigné à l’attribut Content au lieu de le placer dans le nœud. Le résultat est identique, c’est une question de goût personnel. 4.4 Utiliser les boutons radio Le contrôle RadioButton est un autre moyen de faire un choix dans une liste. La syntaxe pour ajouter un bouton radio est fort simple. <RadioButton Name="rbUse" IsChecked="True"> J’utilise XAML </RadioButton> Comme pour la case à cocher, nous retrouvons l’attribut IsChecked.Àla différence de la case à cocher, les boutons radio sont associés les uns aux autres. Ce qui fait que, quand vous sélectionnez un bouton radio, les autres sont automatiquement désélectionnés. <RadioButton Name="rbUseVB" IsChecked="True"> J’utilise VB.NET </RadioButton> <RadioButton Name="rbUseCSharp"> b Figure 4-13 : Une case à cocher désactivée 4 Les autres contrôles de base 102 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. J’utilise C# </RadioButton> <RadioButton Name="rbUsedelphi"> J’utilise Delphi.NET </RadioButton> Si vous désirez avoir dans un même écran plusieurs listes de boutons radio indépendantes les unes des autres, vous devez les intégrer dans un ensemble. Dans les versions précédentes, nous aurions dû utiliser une RadioButtonList mais elle n’est actuellement plus disponible en XAML. Pour regrouper des boutons radio dans des ensembles différents, le moyen le plus simple est de leur ajouter un attribut GroupName. Assignez la même valeur à cet attribut pour tous les boutons radio devant être associés. <RadioButton Name="rbUseVB" IsChecked="True" GroupName="grpLanguage"> J’utilise VB.NET </RadioButton> <RadioButton Name="rbUseCSharp" GroupName="grpLanguage"> J’utilise C# </RadioButton> <RadioButton Name="rbUsedelphi" GroupName="grpLanguage"> J’utilise Delphi.NET </RadioButton> <RadioButton Name="rbUse10" GroupName="grpFramework"> J’utilise le Framework 1.0 </RadioButton> <RadioButton Name="rbUse11" IsChecked="True" b Figure 4-14 : Utiliser des boutons radio Utiliser les boutons radio 4 Le guide du codeur • 103 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. GroupName="grpFramework"> J’utilise le Framework 1.1 </RadioButton> <RadioButton Name="rbUse20" GroupName="grpFramework"> J’utilise le Framework 2.0 </RadioButton> Une autre solution consiste à utiliser un contrôle conteneur séparé pour chaque liste de boutons radio. Dans l’exemple ci-dessous, nous utiliserons deux StackPanel supplémentaires. C’est pourquoi, pour cet exemple, le code complet vous est à nouveau présenté. <Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <StackPanel> <StackPanel> <RadioButton Name="rbUseVB" IsChecked="True"> J’utilise VB.NET </RadioButton > <RadioButton Name="rbUseCSharp"> J’utilise C# </RadioButton > <RadioButton Name="rbUsedelphi"> J’utilise Delphi.NET </RadioButton > </StackPanel> <StackPanel> b Figure 4-15 : Utiliser des boutons radio 4 Les autres contrôles de base 104 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <RadioButton Name="rbUse10"> J’utilise le Framework 1.0 </RadioButton > <RadioButton Name="rbUse11" IsChecked="True"> J’utilise le Framework 1.1 </RadioButton > <RadioButton Name="rbUse20"> J’utilise le Framework 2.0 </RadioButton > </StackPanel> </StackPanel> </Page> Le résultat est identique à la méthode précédente. Toutefois, l’utilisation d’une méthode ou d’une autre peut influencer la mise en page. Liste de choix non modifiable Pour rendre une liste de choix non modifiable, vous devez utiliser l’attribut IsEnabled. Celui-ci doit être appliqué sur chaque bouton radio. Toutefois, si elle est incluse dans un conteneur qui lui est spécifique, vous pouvez spécifier l’attribut IsEnabled dans le conteneur. Cette façon de faire est bien plus pratique à bien des égards. Normalement, il devrait être possible d’utiliser un contrôle de type GroupBox au lieu d’un Canvas. Toutefois, dans la version bêta utilisée au moment d’écrire ces lignes, cette possibilité n’était pas supportée. Le contrôle GroupBox existe bel et bien mais ne supporte qu’un enfant et ne permet dès lors pas de regrouper les boutons radio. Son utilisation se limite à l’affichage du traditionnel contour. Son utilité reste malgré tout évidente pour rendre votre interface claire et bien compréhensible pour l’utilisateur. <Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel> <GroupBox BorderThickness="1" BorderBrush="Black" Header="Language" Width="150"> <StackPanel > <RadioButton Name="rbUseVB" IsChecked="True"> J’utilise VB.NET </RadioButton > <RadioButton Name="rbUseCSharp"> J’utilise C# </RadioButton > Utiliser les boutons radio 4 Le guide du codeur • 105 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <RadioButton Name="rbUsedelphi"> J’utilise Delphi.NET </RadioButton > </StackPanel > </GroupBox > <GroupBox BorderThickness="1" BorderBrush="Black" Header="Framework" Width="150"> <StackPanel > <RadioButton Name="rbUse10"> J’utilise le Framework 1.0 </RadioButton > <RadioButton Name="rbUse11" IsChecked="True"> J’utilise le Framework 1.1 </RadioButton > <RadioButton Name="rbUse20"> J’utilise le Framework 2.0 </RadioButton > </StackPanel > </GroupBox > </StackPanel> </Page> Notez au passage l’utilisation de l’attribut Header pour indiquer le titre de votre GroupBox. 4.5 Placer des info-bulles Bien que, contrairement aux contrôles vus précédemment, la bulle d’informa- tion ne puisse exister sans un autre contrôle, une place privilégiée a été réservée à cette fonctionnalité car les bulles d’information sont souvent trop peu utilisées b Figure 4-16 : Utilisation d’un GroupBox 4 Les autres contrôles de base 106 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. en dehors des programmes commerciaux. Pourtant, elles apportent un réel plus à votre développement et, surtout, elles évitent pas mal d’incompréhension et de confusion pour l’utilisateur de votre interface. Pour des questions de place à l’écran, les étiquettes précédant les différents champs de saisie ou de choix sont généralement fortement résumées et très peu explicites. Les bulles d’information sont là pour pallier ce manque et constituent le premier niveau d’aide. Pour réaliser une telle bulle, vous devez utiliser l’attribut ToolTip du contrôle auquel la bulle d’information doit être associée. À titre d’exemple, nous allons associer une bulle d’information à une boîte de saisie de texte. <TextBox Name="txtNom" Margin="3,3,3,3" ToolTip="Dans ce champ vous devez introduire le nom de famille de votre contact." /> Cette façon de faire est toutefois limitée à la présentation sur une seule ligne. Pour améliorer notre info-bulle, nous devons utiliser une syntaxe légèrement plus compliquée en la définissant comme un nœud fils. <TextBox Name="txtNom" Margin="3,3,3,3"> <TextBox.ToolTip> <TextBlock MaxWidth="200" TextWrapping="WrapWithOverflow" > Dans ce champ vous devez introduire le nom de famille de votre contact. </TextBlock > </TextBox.ToolTip> </TextBox> b Figure 4-17 : Une info-bulle Placer des info-bulles 4 Le guide du codeur • 107 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. De cette façon, le texte d’information est alors inclus dans un bloc de texte, ce qui permet d’ajuster les attributs d’affichage pour obtenir le résultat souhaité. Dans l’exemple, la taille de la bulle est limitée à 150 pixels et le texte passe automatiquement à la ligne en étendant la zone autant que nécessaire. Outre le passage à la ligne, cette façon d’aborder le problème offre également la possibilité d’enrichir la présentation du contenu. <TextBox Name="txtNom" Margin="3,3,3,3"> <TextBox.ToolTip> <TextBlock MaxWidth="200" TextWrapping="WrapWithOverflow" > <Image Width="16" Height="16"> <Image.Source > C:\Windows\Microsoft.NET\Windows\ v6.0.5070\Avalon\avalonArp.ico </Image.Source > </Image > Dans ce champ vous devez introduire le <Bold >nom</Bold> de <Underline>famille </Underline > de votre contact. </TextBlock > </TextBox.ToolTip> </TextBox> b Figure 4-18 : Une info-bulle sur plusieurs lignes 4 Les autres contrôles de base 108 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 4.6 Utiliser les panneaux à onglets Une dernière façon de réaliser une mise en page est d’utiliser un panneau à onglets. <Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TabControl MinWidth="300" MinHeight="300"> <TabItem Header="Photo1"> <Image Source="C:\Documents and Settings\ All Users\Documents\Mes images\ Échantillons d’images\Collines.jpg" /> </TabItem > <TabItem Header="Photo2"> <Image Source="C:\Documents and Settings\ All Users\Documents\Mes images\ Échantillons d’images\ Coucher de soleil.jpg" /> </TabItem > <TabItem Header="Photo3"> <Image Source="C:\Documents and Settings\ All Users\Documents\Mes images\ Échantillons d’images\Hiver.jpg" /> </TabItem > <TabItem Header="Photo4"> <Image Source="C:\Documents and Settings\ All Users\Documents\Mes images\ b Figure 4-19 : Gras et italique dans une info-bulle Utiliser les panneaux à onglets 4 Le guide du codeur • 109 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Échantillons d’images\Nénuphars.jpg" /> </TabItem > </TabControl> </Page> Bien qu’il représente une surface, le TabControl est plus proche des contrôles de type TextBox que du Canvas, par exemple. En effet, chaque nœud TabItem ne peut avoir qu’un seul enfant. Renvoi Pour pallier ce problème, la solution est très simple et revient à appliquer les règles qui sont vues dans le chapitre Mélanger les techniques de mise en page (voir page 81). Ajoutez ce TabItem à notre code précédent. <TabItem Header="Miniatures" IsSelected="True"> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> b Figure 4-20 : Utilisation des onglets 4 Les autres contrôles de base 110 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.