Chapitre 3 : Contrôles et XAML
Introduction
Chapitre 1 : Le modèle d’application « Longhorn »
Chapitre 2 : Création d’une application « Longhorn »
Chapitre 3 : Contrôles et XAML
Brent Recteur
Wise Owl Consulting
Décembre 2003
Contenu
Éléments XAML
Panneaux XAML
Contrôles
Ressources et styles
Graphiques et animations
Document Services
Résumé
Comme vous l’avez vu dans le chapitre 2, les applications de plateforme Longhorn se composent généralement d’un objet Application et d’un ensemble de pages d’interface utilisateur que vous écrivez dans un langage de balisage déclaratif appelé XAML.
L’objet Application est un singleton et persiste tout au long de la durée de vie de l’application. Il permet à votre logique d’application de gérer les événements de niveau supérieur et de partager le code et l’état entre les pages. L’objet Application détermine également si l’application est une application à fenêtre unique ou une application de navigation.
Vous écrivez généralement chaque page d’interface utilisateur à l’aide d’un dialecte XML nommé XAML (Extensible Application Markup Language). Chaque page se compose d’éléments XAML, de nœuds de texte et d’autres composants organisés dans une arborescence hiérarchique. La relation hiérarchique de ces composants détermine le rendu et le comportement de la page.
Vous pouvez également considérer une page XAML comme une description d’un modèle objet. Lorsque le runtime crée la page, il instancie chacun des éléments et nœuds décrits dans le document XAML et crée un modèle objet équivalent en mémoire. Vous pouvez manipuler ce modèle objet par programmation. Par exemple, vous pouvez ajouter et supprimer des éléments et des nœuds pour que la page s’affiche et se comporte différemment.
Fondamentalement, une page XAML décrit les classes que le runtime doit créer, les valeurs de propriété et les gestionnaires d’événements pour les instances des classes, et une hiérarchie de modèle objet, c’est-à-dire, qui instance est le parent d’un autre instance.
Tous les documents XAML sont des documents XML bien formés qui utilisent un ensemble défini de noms d’éléments. Par conséquent, toutes les règles relatives à la formation de documents XML bien formés s’appliquent également aux documents XAML. Par exemple, le document doit contenir un seul élément racine ; tous les noms d’éléments respectent la casse ; Une définition d’élément ne peut pas chevaucher une autre définition d’élément, mais doit la contenir entièrement, et ainsi de suite. Si vous n’êtes pas familiarisé avec la syntaxe XML, c’est le moment idéal pour l’apprendre.
Éléments XAML
Chaque page XAML contient un ou plusieurs éléments qui contrôlent la mise en page et le comportement de la page. Vous organisez ces éléments hiérarchiquement dans une arborescence. Chaque élément n’a qu’un seul parent. Les éléments peuvent généralement avoir un nombre quelconque d’éléments enfants. Toutefois, certains types d’éléments, par exemple, Scrollbar, n’ont pas d’enfants ; et d’autres types d’éléments, par exemple , Border, peuvent avoir un seul élément enfant.
Chaque nom d’élément correspond au nom d’une classe managée. L’ajout d’un élément à un document XAML entraîne la création par le runtime d’un instance de la classe correspondante. Par exemple, le balisage suivant représente un élément DockPanel racine qui a un seul élément Table enfant. L’élément Table contient trois éléments Row enfants. Chaque élément Row contient trois enfants, et certains d’entre eux ont des nœuds de texte enfants.
<Border xmlns="https://schemas.microsoft.com/2003/xaml"
Background="BlanchedAlmond">
<DockPanel>
<Table>
<Body>
<Row>
<Cell><Button/></Cell>
<Cell><Text>Item</Text></Cell>
<Cell><Text>Price</Text></Cell>
</Row>
<Row>
<Cell><CheckBox Checked="true"/></Cell>
<Cell><TextBox Height="50">Nissan 350Z</TextBox></Cell>
<Cell><TextBox Height="50">29.95</TextBox></Cell>
</Row>
<Row>
<Cell><CheckBox/></Cell>
<Cell><TextBox Height="50">Porsche Boxster</TextBox></Cell>
<Cell><TextBox Height="50">9.95</TextBox></Cell>
</Row>
</Body>
</Table>
</DockPanel>
</Border>
Ce document XAML crée une hiérarchie d’objets comme illustré dans la figure 3-1 et l’affichage illustré dans la figure 3-2.
.gif)
Figure 3-1. Exemple de modèle objet de page XAML
(en-us,msdn.10).gif)
Figure 3-2. Affichage à partir du code XAML précédent (cliquer pour agrandir l’image)
Vous pouvez accéder à la plupart des fonctionnalités de ces objets en utilisant uniquement le balisage. En utilisant uniquement le balisage, vous pouvez effectuer l’une des opérations suivantes :
- Décrire un ensemble hiérarchique d’objets que le runtime instanciera
- Définir les propriétés de l’objet sur des valeurs connues statiquement
- Définir les propriétés de l’objet sur les valeurs récupérées à partir d’une source de données
- Provoquer le stockage des valeurs de propriété modifiées dans la source de données
- Modifier à plusieurs reprises la valeur d’une propriété au fil du temps
- Lier un gestionnaire d’événements à l’événement d’un objet
Toutefois, bien que vous puissiez créer des interfaces utilisateur étonnantes à l’aide uniquement du balisage, vous pouvez également accéder aux fonctionnalités d’un élément par programmation à l’aide du modèle objet XAML. Le modèle objet vous permet de manipuler chaque aspect des éléments d’une page. Il fournit en fait des fonctionnalités supplémentaires qui ne sont pas accessibles via XAML.
Chaque élément XAML dérive de System.Windows.UIElement ou System.Windows.ContentElement. Par conséquent, tous les éléments possèdent un certain nombre de fonctionnalités communes. Les éléments peuvent être regroupés dans les quatre catégories de base suivantes :
- Les contrôles dérivent de System.Windows.Control et gèrent l’interaction utilisateur.
- Les panneaux sont des contrôles spécialisés qui dérivent de System.Windows.Panel et gèrent la mise en page et servent de conteneurs pour les éléments.
- Les éléments de mise en forme de texte dérivent de System.Windows.TextElement et gèrent la mise en forme du texte et la structure du document.
- Les formes gèrent les formes graphiques vectorielles.
Panneaux XAML
Une page XAML commence généralement par un élément de panneau. Le panneau est un conteneur pour le contenu d’une page et contrôle le positionnement et le rendu de ce contenu. En fait, lorsque vous affichez quelque chose à l’aide de XAML, un panneau est toujours impliqué, bien qu’il soit parfois implicite plutôt que celui que vous décrivez explicitement. Un panneau peut contenir d’autres panneaux, ce qui vous permet de partitionner la surface d’affichage en régions, chacune contrôlée par son panneau.
Il existe six classes panel intégrées dans la plateforme Longhorn :
- Un canevas positionne explicitement chaque élément enfant à l’aide de coordonnées relatives à la zone Canevas .
- Un DockPanel place ses enfants en haut, en bas, à gauche, à droite ou au centre du panneau. Lorsque vous affectez plusieurs enfants à la même zone, un DockPanel les organise horizontalement ou verticalement dans cette zone.
- Un FlowPanel organise ses éléments enfants en fonction de ses propriétés de saut de ligne et d’alignement. Lorsque le contenu dépasse la longueur d’une seule ligne, le panneau interrompt les lignes, encapsule les lignes et aligne le contenu de manière appropriée.
- Un TextPanel affiche plusieurs lignes de texte dans plusieurs formats de texte. En règle générale, vous ne l’utiliserez que lorsque vous avez besoin d’une disposition de texte complexe. Dans la plupart des cas, vous utiliserez l’élément Text léger pour la prise en charge du texte de base.
- Un GridPanel est un élément léger qui organise ses éléments enfants en lignes et colonnes formant une grille. Il est utile pour créer des tables simples, mais a des fonctionnalités limitées. Vous utiliseriez le contrôle Table pour la disposition de table complexe.
- Un FixedPanel positionne ses éléments enfants sur une page de mise en page fixe. Les éléments des pages de mise en page fixes ont toujours le même positionnement et la même pagination, quelle que soit la résolution de l’appareil ou la taille de la fenêtre.
En règle générale, ces panneaux fournissent des fonctionnalités suffisantes pour la plupart des développeurs. Toutefois, vous pouvez également créer vos propres classes de panneau qui positionnent et affichent le contenu de manière spécialisée.
Canevas
Le panneau Canvas offre une flexibilité considérable en ce qui concerne le positionnement et l’organisation des éléments à l’écran. Il vous permet de spécifier l’emplacement de chaque élément enfant et, lorsque des éléments se chevauchent, vous pouvez spécifier l’ordre dans lequel le canevas dessine les éléments qui se chevauchent en modifiant l’ordre dans lequel les éléments apparaissent dans le balisage.
Le balisage suivant produit trois graphiques qui se chevauchent, comme vous le voyez dans la figure 3-1 : un rectangle vert avec une bordure orange, une ellipse jaune translucide avec une bordure bleue et du texte centré dans le rectangle. (L’idée de ne plus jamais écrire un gestionnaire de WM_PAINT pour dessiner des choses comme celle-ci me donne les larmes aux yeux. larmes de joie je m’empresse d’ajouter!) L’infrastructure dessine les formes dans l’ordre présenté, de sorte que le texte s’affiche sur le rectangle.
<Canvas xmlns="https://schemas.microsoft.com/2003/xaml" >
<Rectangle
Fill="#33CC66"
Width="2in" Height="1in"
Canvas.Top="25" Canvas.Left="50"
StrokeThickness="6px" Stroke="Orange" />
<Ellipse
Fill="yellow"
CenterX="1.5in" CenterY="1.1in"
RadiusX=".5in" RadiusY="1in"
StrokeThickness="4px" Stroke="Blue" />
<Text
Canvas.Top="50" Canvas.Left="60" Foreground="#000000"
FontWeight="Bold" FontFamily="Arial"
FontStyle="Normal" FontSize="25">Hello Shapes!</Text>
</Canvas>
.gif)
Figure 3-3. Exemple d’utilisation du panneau Canevas
DockPanel
Le panneau DockPanel organise les éléments enfants horizontalement ou verticalement, les uns par rapport aux autres. La classe DockPanel examine la propriété Dock de chaque élément enfant pour déterminer comment aligner l’élément le long des bords du panneau. Vous pouvez définir la propriété Dock sur l’une des cinq valeurs suivantes : Top, Bottom, Left, Right ou Fill.
Par exemple, un panneau aligne le premier élément enfant avec sa propriété Dock égale à Top sur le bord supérieur du panneau. Le panneau aligne ensuite l’élément enfant suivant avec sa propriété Dock égale à Top juste en dessous de l’élément précédent. De même, le panneau aligne les éléments enfants avec leur propriété Dock définie sur Bottom, Left ou Right. Si vous affectez la valeur Fill à la propriété Dock du dernier élément enfant, il occupe tout l’espace restant dans DockPanel. Ne suivez jamais un élément Dock="Fill » avec d’autres éléments, car les éléments suivants ne seront pas visibles. La valeur par défaut de la propriété Dock est Left. Par conséquent, lorsque vous ne définissez pas la propriété Dock d’un élément, elle s’empile horizontalement à gauche.
La propriété Dock est une propriété jointe: elle est définie par la classe DockPanel , mais vous la définissez sur un élément enfant comme suit :
<child DockPanel.Dock="Top"/>
Ou dans le code :
DockPanel.SetDock(child, Dock.Top)
Le balisage suivant utilise un DockPanel et cinq panneaux Canvas pour créer une interface utilisateur courante. DockPanel aligne les deux premiers canevas sur le haut du DockPanel. Il aligne le troisième canevas sur le bord inférieur du DockPanel, le quatrième sur le bord gauche, et le cinquième canevas remplit l’espace restant. Vous pouvez placer un menu dans le panneau supérieur et une barre d’outils dans le panneau juste en dessous du menu. Cette décision laisse le volet gauche pour une arborescence, le volet inférieur pour une barre de status et le panneau restant pour l’affichage détaillé de l’élément sélectionné, comme vous pouvez le voir dans la figure 3-4.
<Border xmlns="https://schemas.microsoft.com/2003/xaml"
Background="White">
<DockPanel>
<Border Width="500" DockPanel.Dock="Top"
BorderThickness="2,2,2,2" BorderBrush="Black" Background="#87ceeb" >
<Text>Dock = "Top"</Text>
</Border>
<Border Width="500" DockPanel.Dock="Top"
BorderThickness="2,2,2,2" BorderBrush="Black" Background="#87ceeb" >
<Text>Dock = "Top"</Text>
</Border>
<Border Width="500" DockPanel.Dock="Bottom"
BorderThickness="2,2,2,2"
BorderBrush="Black" Background="#ffff99" >
<Text>Dock = "Bottom"</Text>
</Border>
<Border Width="200" DockPanel.Dock="Left"
BorderThickness="2,2,2,2" BorderBrush="Black" Background="#98fb98" >
<Text>Dock = "Left"</Text>
</Border>
<Border Width="300" DockPanel.Dock="Fill"
BorderThickness="2,2,2,2" BorderBrush="Black" Background="White" >
<Text>Dock = "Fill"</Text>
</Border>
</DockPanel>
</Border>
.gif)
Figure 3-4. Exemple d’utilisation du panneau DockPanel
FlowPanel
Le panneau FlowPanel fournit un certain nombre de fonctionnalités de disposition automatiques et permet des présentations complexes de texte et de graphiques. Vous définissez la taille du panneau à l’aide de ses propriétés Width et Height . Le panneau affiche ensuite ses éléments enfants de manière à utiliser au mieux l’espace du panneau, en encapsulant et alignant les éléments si nécessaire. La direction du flux par défaut pour un FlowPanel est de gauche à droite et de haut en bas.
L’exemple de balisage suivant montre comment flowPanel interrompt et encapsule le contenu. Le FlowPanel contient quatre canevas carrés d’un pouce. FlowPanel tente d’afficher ses éléments enfants de gauche à droite et de haut en bas.
<Border xmlns="https://schemas.microsoft.com/2003/xaml" Background="White">
<FlowPanel>
<Border Background="Red" Width="1in" Height="1in"/>
<Border Background="Green" Width="1in" Height="1in"/>
<Border Background="Blue" Width="1in" Height="1in"/>
<Border Background="Yellow" Width="1in" Height="1in"/>
</FlowPanel>
</Border>
La figure 3-3 montre la sortie lorsque le FlowPanel peut ajuster tous les éléments sur une seule ligne. La figure 3-4 illustre le FlowPanel qui encapsule le dernier élément sur une nouvelle ligne. La figure 3-5 montre le pire des cas où le FlowPanel doit placer chaque élément sur sa propre ligne. La figure 3-6 montre l’habillage du dernier élément vers une nouvelle ligne, et la figure 3-7 montre chaque élément qui est renvoyé à une nouvelle ligne.
.gif)
Figure 3-5. Le FlowPanel interrompt les lignes uniquement lorsque cela est nécessaire.
.gif)
Figure 3-6. Panneau FlowPanel encapsulant le dernier élément sur une nouvelle ligne
.gif)
Figure 3-7. Panneau FlowPanel encapsulant chaque élément sur une nouvelle ligne
TextPanel
Le panneau TextPanel met en forme, dimensionne et dessine le texte. Cette classe de panneau prend en charge plusieurs lignes de texte ainsi que plusieurs formats de texte. Vous utilisez généralement la classe TextPanel lorsque vous avez besoin d’une prise en charge de disposition complexe. Toutefois, lorsque vous n’avez besoin que d’un affichage de texte simple, il est préférable d’utiliser l’élément Text à la place.
L’exemple de balisage suivant montre comment le TextPanel interrompt et encapsule le contenu. TextPanel ajuste le nombre de colonnes et la hauteur de chaque colonne à mesure que vous redimensionnez la fenêtre.
<Border xmlns="https://schemas.microsoft.com/2003/xaml" Background="White">
<TextPanel
ColumnCount="3"
ColumnWidth="200px"
ColumnGap="25px"
ColumnRuleWidth="5px"
ColumnRuleBrush="blue">
<Block Background="LightGray">
<Inline FontFamily="Arial" FontWeight="Bold"
FontSize="16pt">Transcript of the
<Italic>Nicolay Draft</Italic>
of the Gettysburg Address.
</Inline>
</Block>
§
</TextPanel>
</Border>
La figure 3-8 montre la sortie résultante.
.gif)
Figure 3-8. TextPanel avec plusieurs caractéristiques de police, colonnes et mise en forme
GridPanel
Le panneau GridPanel affiche des données tabulaires. GridPanel prend en charge de nombreuses propriétés que vous pouvez utiliser pour personnaliser la disposition des données tabulaires. Par exemple, vous pouvez définir les propriétés Colonnes et Lignes pour contrôler le nombre de colonnes et de lignes dans la grille. De même, les propriétés ColumnStyles et RowStyles vous permettent de définir une collection de propriétés que gridPanel applique aux lignes et aux colonnes, respectivement.
GridPanel organise ses enfants dans l’ordre, en commençant par la cellule supérieure gauche et en se déplaçant vers la droite jusqu’à la fin de la ligne. Un enfant peut prendre plusieurs colonnes si vous définissez la propriété GridPanel.ColumnSpan sur l’enfant. De même, GridPanel.RowSpan permet à un enfant de s’étendre sur plusieurs lignes.
Le balisage suivant affiche une interface utilisateur calculatrice qui ressemble assez à l’utilitaire Calculatrice Windows.
<Border xmlns="https://schemas.microsoft.com/2003/xaml" Background="#DEE7F7">
<DockPanel Dock="Left">
<Border BorderThickness="0,0,0,0">
<!-- Padding="10, 10, 10, 10" -->
<GridPanel Columns="7">
<GridPanel.ColumnStyles>
<Column Width="16%"/>
<Column Width="4%"/>
<Column Width="16%"/>
<Column Width="16%"/>
<Column Width="16%"/>
<Column Width="16%"/>
<Column Width="16%"/>
</GridPanel.ColumnStyles>
<GridPanel.RowStyles>
<Row Height="25"/>
<Row Height="10"/>
<Row Height="35"/>
<Row Height="7"/>
<Row Height="35"/>
<Row Height="35"/>
<Row Height="35"/>
<Row Height="35"/>
</GridPanel.RowStyles>
<Border GridPanel.ColumnSpan="7" BorderBrush="#DEE7F7"
BorderThickness="2,2,2,2" Background="White">
<Text HorizontalAlignment="right"
ID="CalcText">0.</Text>
</Border>
<Text GridPanel.ColumnSpan="7"/>
<Border BorderThickness="0,0,0,0">
<GridPanel>
<Border BorderBrush="#DEE7F7" BorderThickness="2,2,2,2">
<Text Width="16%"
HorizontalAlignment="center"></Text>
</Border>
</GridPanel>
</Border>
<Text Width="4%"/>
<DockPanel GridPanel.ColumnSpan="5" Dock="Left">
<Button Width="33.33%" Foreground="Red">Backspace</Button>
<Button Width="33.33%" Foreground="Red">CE</Button>
<Button Width="33.33%" Foreground="Red">C</Button>
</DockPanel>
<Text GridPanel.ColumnSpan="7"/>
<Button Foreground="Red">MC</Button>
<Text/>
<Button Foreground="Blue">7</Button>
<Button Foreground="Blue">8</Button>
<Button Foreground="Blue">9</Button>
<Button Foreground="Red">/</Button>
<Button Foreground="Blue">sqrt</Button>
<Button Foreground="Red">MR</Button>
<Text/>
<Button Foreground="Blue">4</Button>
<Button Foreground="Blue">5</Button>
<Button Foreground="Blue">6</Button>
<Button Foreground="Red">*</Button>
<Button Foreground="Blue">%</Button>
<Button Foreground="Red">MS</Button>
<Text/>
<Button Foreground="Blue">1</Button>
<Button Foreground="Blue">2</Button>
<Button Foreground="Blue">3</Button>
<Button Foreground="Red">-</Button>
<Button Foreground="Blue">1/x</Button>
<Button Foreground="Red">M+</Button>
<Text/>
<Button Foreground="Blue">0</Button>
<Button Foreground="Blue">+/-</Button>
<Button Foreground="Blue">.</Button>
<Button Foreground="Red">+</Button>
<Button Foreground="Red">=</Button>
</GridPanel>
</Border>
</DockPanel>
</Border>
La figure 3-9 montre la sortie résultante.
.gif)
Figure 3-9. GridPanel en tant que calculatrice
FixedPanel
Le panneau FixedPanel vous permet de spécifier les emplacements et tailles exacts de chaque élément. Les éléments d’un FixedPanel s’affichent toujours au même emplacement et à la même taille sur tous les appareils. J’aborderai le panneau FixedPanel plus loin dans ce chapitre de la section « Services de mise en page de document ».
Contrôles
XAML contient tous les contrôles que vous attendez de Windows : boutons, case activée zones, cases d’option, zones de liste, zones de liste déroulante, menus, barres de défilement, curseurs, etc. Cet exemple illustre certains des contrôles courants fournis dans Longhorn. Vous pouvez voir les résultats de la figure 3-10.
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="File">
<MenuItem Header="New" />
<MenuItem Header="Open" />
</MenuItem>
<MenuItem Header="Edit">
<MenuItem Header="Cut"/>
<MenuItem Header="Copy"/>
<MenuItem Header="Paste"/>
</MenuItem>
</Menu>
<FlowPanel>
<Button> Button </Button>
<Border Width="15"/>
<CheckBox Checked="true"> CheckBox </CheckBox>
<Border Width="15"/>
<RadioButtonList>
<RadioButton> RadioButton 1 </RadioButton>
<RadioButton Checked="true"> RadioButton 2 </RadioButton>
<RadioButton> RadioButton 3 </RadioButton>
</RadioButtonList>
<Border Width="15"/>
<ListBox>
<ListItem> ListItem 1 </ListItem>
<ListItem> ListItem 2 </ListItem>
<ListItem> ListItem 3 </ListItem>
</ListBox>
<Border Width="15"/>
<ComboBox>
<ListItem> ListItem 1 </ListItem>
<ListItem> ListItem 2 </ListItem>
<ListItem> ListItem 3 </ListItem>
</ComboBox>
<Border Width="15"/>
<DockPanel>
<VerticalSlider DockPanel.Dock="Top" Height="200"
Minimum="0" Maximum="255" Value="75"
SmallChange="1" LargeChange="16"/>
<Text DockPanel.Dock="Bottom">Slider</Text>
</DockPanel>
<Border Width="15"/>
<DockPanel>
<VerticalScrollBar DockPanel.Dock="Top"
Minimum="0" Maximum="255" Value="125" Height="200"
SmallChange="1" LargeChange="16"/>
<Text DockPanel.Dock="bottom">ScrollBar</Text>
</DockPanel>
<Border Width="15"/>
<TextBox> TextBox </TextBox>
</FlowPanel>
</DockPanel>
</Border>
.gif)
Figure 3-10. Exemple de contrôles XAML
XAML vous permet également de combiner des éléments et des contrôles pour créer des effets enrichis. Nous appelons cela la combinaison d’éléments contrôle la composition, et c’est l’un des aspects les plus puissants de Longhorn. Pour instance, pour créer un bouton avec une image, vous placez un élément Image dans Button :
<Button>
<Image Source="tulip.jpg"/>
</Button>
Pour avoir une image et du texte dans le bouton, comme vous pouvez le voir dans la figure 3-11, nous utilisons notre ancien ami DockPanel :
<Button>
<DockPanel>
<Image Source="tulip.jpg"/>
<Text DockPanel.Dock="fill" VerticalAlignment="center"> Button
<Italic>with Image!</Italic>
</Text>
</DockPanel>
</Button>
.gif)
Figure 3-11. Un bouton avec une image et du texte
Vous pouvez mettre à peu près n’importe quoi à l’intérieur de n’importe quoi, y compris cet exemple étrange de CheckBox à l’intérieur d’un bouton :
<Button>
<CheckBox Checked="true"> CheckBox </CheckBox>
</Button>
La composition est suffisamment puissante pour que de nombreux contrôles Longhorn soient réellement définis à l’aide de la composition. Par instance, un ScrollBar est en fait deux boutons et un curseur, ainsi qu’une logique de gestionnaire d’événements pour les relier.
XAML inclut également certaines « primitives » de contrôle, qui sont principalement utilisées avec la composition de contrôle pour générer des effets plus volumineux. Par instance, ScrollViewer prend un enfant (généralement un panneau) et y ajoute des barres de défilement. Cet exemple place une très grande liste d’éléments CheckBox à l’intérieur d’un ScrollViewer, ce qui, avant Longhorn, nécessitait un contrôle distinct tel que CheckedListBox de Windows Forms :
<Border BorderThickness="1" BorderBrush="black">
<ScrollViewer Height="100" Width="200">
<GridPanel Columns="1">
<CheckBox Checked="true"> CheckBox 1</CheckBox>
<CheckBox Checked="true"> CheckBox 2</CheckBox>
<CheckBox Checked="true"> CheckBox 3</CheckBox>
<CheckBox Checked="true"> CheckBox </CheckBox>
<CheckBox Checked="true"> CheckBox </CheckBox>
<CheckBox Checked="true"> CheckBox </CheckBox>
<CheckBox Checked="true"> CheckBox </CheckBox>
<CheckBox Checked="true"> CheckBox </CheckBox>
</GridPanel>
</ScrollViewer>
</Border>
Ressources et styles
XAML fournit des fonctionnalités très riches pour personnaliser l’apparence de votre application, par le biais d’entités appelées styles. Toutefois, avant d’entrer dans cette rubrique, nous devons en savoir plus sur les ressources. Le terme ressources utilisée dans ce contexte fait simplement référence à un moyen de réutiliser des objets et des valeurs couramment définis. Prenons un exemple :
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<FlowPanel>
<FlowPanel.Resources>
<SolidColorBrush def:Name="MyColor" Color="Gold"/>
</FlowPanel.Resources>
<Button Background="{MyColor}"/>
<Ellipse Fill="{MyColor}"/>
</FlowPanel>
</Border>
Ce code définit une nouvelle ressource nommée MyColor, dont le type est SolidColorBrush et la valeur est Gold. Cette ressource fait partie de la collection Resources de FlowPanel. Chaque élément a une collection Resources . Vous pouvez définir des ressources sur n’importe quel élément de votre choix, mais le plus souvent, vous les placez uniquement sur l’élément racine, dans ce cas, le FlowPanel.
Une fois que vous avez défini une ressource, vous pouvez référencer la ressource dans une valeur de propriété en plaçant le nom de la ressource entre accolades, comme vous le voyez ici :
<Button Background="{MyColor}"/>
Lorsque le processeur XAML voit {MyColor} dans cet exemple, il case activée d’abord la collection Resources du bouton. Étant donné que Button n’a pas de définition de MyColor (sa collection Resources est vide), il case activée le parent du Bouton, le FlowPanel.
Un type de ressource particulièrement utile est un style. Style est à la fois le nom de la classe et le nom d’une propriété que tous les éléments ont. Un style définit les propriétés à définir sur un élément, qui utilise ensuite ce style désigné. Cet exemple définit un style appelé MyStyle et applique ce style à un bouton :
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<FlowPanel>
<FlowPanel.Resources>
<Style def:Name="MyStyle">
<Button Background="Red" FontSize="24"/>
</Style>
</FlowPanel.Resources>
<Button>Normal</Button>
<Button Style="{MyStyle}">Styled</Button>
</FlowPanel>
</Border>
Vous pouvez également définir une ressource Style sans nom, qui devient le style par défaut de l’élément pour les éléments où vous ne spécifiez pas de propriété Style explicite. Cet exemple ajoute un style par défaut à l’exemple précédent :
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<FlowPanel>
<FlowPanel.Resources>
<Style>
<Button Background="Green" FontSize="15"/>
</Style>
<Style def:Name="MyStyle">
<Button Background="Red" FontSize="24"/>
</Style>
</FlowPanel.Resources>
<Button>Normal</Button>
<Button Style="{MyStyle}">Styled</Button>
</FlowPanel>
</Border>
Vous pouvez effectuer un type d’héritage de style en définissant la propriété BasedOn de la classe Style . Le référencement de la nouvelle classe Style définit toutes les propriétés de l’ancien Style , ainsi que les propriétés supplémentaires que vous spécifiez. L’exemple suivant définit deux styles : le premier définit la propriété Background et le second, basé sur le premier, définit la propriété FontSize .
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<FlowPanel>
<FlowPanel.Resources>
<Style def:Name="Style1">
<Button Background="Red"/>
</Style>
<Style def:Name="Style2" BasedOn="{Style1}">
<Button FontSize="24"/>
</Style>
</FlowPanel.Resources>
<Button Style="{Style1}">Style 1</Button>
<Button Style="{Style2}">Style 2</Button>
</FlowPanel>
</Border>
Il est même possible pour un style de définir des propriétés de manière conditionnelle, à l’aide d’une fonctionnalité appelée déclencheurs de propriété. Style a une propriété nommée VisualTriggers, qui est une collection de PropertyTriggers. Chaque PropertyTrigger spécifie une condition à l’aide des propriétés Property et Value , et contient une collection d’instructions Set . Lorsque la propriété de l’élément style correspond à cette valeur, les instructions Set sont appliquées et, lorsque la condition n’est plus vraie, les valeurs ne sont pas appliquées, comme si elles n’avaient jamais été définies en premier lieu. Cet exemple utilise des déclencheurs de propriété pour rendre le bouton vert lorsque la souris est sur le bouton, et rouge dans le cas contraire :
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<FlowPanel>
<FlowPanel.Resources>
<Style def:Name="Style1">
<Button Background="Red"/>
<Style.VisualTriggers>
<PropertyTrigger Property="IsMouseOver" Value="true">
<Set PropertyPath="Background" Value="Green"/>
</PropertyTrigger>
</Style.VisualTriggers>
</Style>
</FlowPanel.Resources>
<Button Style="{Style1}">Style 1</Button>
</FlowPanel>
</Border>
De nombreux contrôles XAML utilisent la composition de contrôle. Ils combinent un certain nombre de contrôles plus petits pour créer un contrôle plus grand et plus complexe. Les styles vous permettent même de changer cela ! En spécifiant une composition différente, vous pouvez redéfinir complètement l’apparence d’un contrôle tout en conservant son comportement.
Après avoir déclaré l’élément de style et ses propriétés, la <balise Style.VisualTree> spécifie à l’intérieur du Style les éléments à composer pour créer le contrôle plus grand. Vous pouvez définir les propriétés des éléments enfants comme d’habitude et donner à ces enfants leurs propres enfants. Vous pouvez également utiliser l’alias de propriété pour définir des valeurs de propriété. Par exemple, Name1="*Alias(Target=Name2) » définit la propriété Name1 de l’enfant sur la propriété Name2 du contrôle plus grand. L’exemple suivant crée un style pour Button qui modifie la composition pour obtenir un aspect rond, comme vous pouvez le voir dans la figure 3-12. Les propriétés d’arrière-plan et de contenu du bouton sont alias à des points appropriés dans l’arborescence visuelle.
<Border Background="white"
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition">
<FlowPanel>
<FlowPanel.Resources>
<Style def:Name="RoundButton">
<Button FontSize="20"/>
<Style.VisualTree>
<Canvas>
<Rectangle ID="MainRect"
RadiusX="10" RadiusY="10"
Fill="*Alias(Target=Background)"
Width="100%" Height="100%" />
<FlowPanel Width="100%" Height="100%" >
<ContentPresenter
ContentControl.Content="*Alias(Target = Content)"
Margin="15,3,15,5"/>
</FlowPanel>
</Canvas>
</Style.VisualTree>
</Style>
</FlowPanel.Resources>
<Button Style="{RoundButton}">
standard RoundButton
</Button>
<Button Background="red" Style="{RoundButton}">
red RoundButton
</Button>
<Button>
standard button
</Button>
<Button Background="red">
red standard button
</Button>
</FlowPanel>
</Border>
.gif)
Figure 3-12. Deux boutons RoundButton et standard sur un FlowPanel
Graphiques et animations
XAML fournit une prise en charge étendue du dessin de formes, de la transformation de l’état d’un objet et de l’animation de presque toutes les propriétés d’un objet. Vous utilisez des éléments Shape pour dessiner, transformer des éléments pour modifier une propriété ou un objet et des éléments Animation pour modifier une propriété d’un objet au fil du temps.
Formes
XAML fournit un ensemble d’éléments Shape pour le dessin, notamment Ellipse, Line, Rectangle, Path, Polygon et Polyline. Une forme a un remplissage, qui est la couleur d’arrière-plan, et un trait, qui est la couleur du contour. La valeur par défaut du remplissage et du trait est transparente. Veillez donc à définir au moins l’une d’entre elles ! La propriété StrokeWidth contrôle l’épaisseur du contour.
Les formes ne peuvent pas avoir d’éléments enfants. Vous placez généralement des formes à l’intérieur d’un canevas, de sorte que la première forme du balisage sera la première dessinée. Cet exemple illustre certaines des formes de base, que vous pouvez également voir dans la figure 3-13 :
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<Canvas Height="400" Width="400">
<Ellipse CenterX="70" CenterY="75"
RadiusX="30" RadiusY="50"
Fill="yellow" Stroke="red" StrokeThickness="15"/>
<Rectangle RectangleLeft="150" RectangleTop="20"
RectangleHeight="100" RectangleWidth="40"
Fill="lightBlue" Stroke="green"/>
<Line X1="20" Y1="220" X2="150" Y2="240"
Stroke="black" StrokeThickness="5"/>
<Polygon Points="220,140 270,240 170,240"
StrokeLineJoin="Round"
Stroke="black" StrokeThickness="20"/>
</Canvas>
</Border>
.gif)
Figure 3-13. Différentes formes sur un canevas
Jusqu’à présent, nous avons utilisé uniquement des couleurs unie avec les propriétés Trait et Remplissage . Mais en XAML, presque partout où vous pouvez utiliser une couleur, vous pouvez spécifier un pinceau. SolidColorBrush est le type de pinceau que nous utilisons jusqu’à présent, mais XAML prend également en charge ImageBrush, LinearGradientBrush et RadialGradientBrush. ImageBrush a une propriété ImageSource qui spécifie le nom du fichier image. SolidColorBrush a une propriété Color . LinearGradientBrush et RadialGradientBrush contiennent un GradientStopCollection, qui permet des dégradés très complexes. Cet exemple définit quatre pinceaux en tant que ressources et les utilise comme trait et remplissage des points de suspension. Vous pouvez voir à quoi ils ressemblent dans la figure 3-14.
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<Border.Resources>
<LinearGradientBrush def:Name="lineargradient" StartPoint="0,0"
EndPoint="1,1" >
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="white" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<RadialGradientBrush def:Name="radialgradient" Focus="0.3,0.3">
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="red" Offset="0"/>
<GradientStop Color="yellow" Offset="1"/>
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
<ImageBrush def:Name="image" ImageSource="Tulip.jpg" TileMode="Tile"/>
<SolidColorBrush def:Name="solid" Color="gray"/>
</Border.Resources>
<Canvas Height="400" Width="400">
<Ellipse CenterX="100" CenterY="75"
RadiusX="90" RadiusY="50"
Fill="{lineargradient}" Stroke="{image}" StrokeThickness="15"/>
<Ellipse CenterX="300" CenterY="170"
RadiusX="50" RadiusY="150"
Fill="{radialgradient}" Stroke="{solid}" StrokeThickness="15"/>
</Canvas>
</Border>
.gif)
Figure 3-14. Dégradés au travail
Transformations
XAML prend en charge plusieurs types de transformations. RotateTransform pivote selon la quantité de la propriété Angle . TranslateTransform déplace les éléments en fonction des propriétés X et Y . ScaleTransform se réduit ou s’étend en fonction des propriétés ScaleX et ScaleY . SkewTransform est incliné à l’aide des propriétés AngleX, AngleY et Center . MatrixTransform prend en charge les transformations affines arbitraires. Enfin, TransformCollection est lui-même une transformation qui vous permet de combiner plusieurs transformations.
Certaines classes, telles que Brush, ont une propriété Transform . Pour d’autres cas, vous pouvez utiliser l’élément TransformDecorator , qui a une propriété Transform . TransformDecorator transforme son élément enfant. (Comme Border, il ne peut avoir qu’un seul enfant.) TransformDecorator peut contenir n’importe quel type d’enfant, y compris des formes, des panneaux et des contrôles. Cet exemple utilise pour TransformDecorators. La première contient une Ellipse et la fait pivoter de 45 degrés. Le deuxième TransformDecorator contient un Contrôle ListBox et fait pivoter et mettre à l’échelle le Contrôle ListBox. Vous pouvez voir à quoi ressemblent les formes dans la figure 3-15.
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<Canvas Height="400" Width="400">
<TransformDecorator Transform="rotate 45">
<Ellipse CenterX="100" CenterY="75"
RadiusX="90" RadiusY="50"
Fill="white" Stroke="black" StrokeThickness="15"/>
</TransformDecorator>
<TransformDecorator Canvas.Top="200" Canvas.Left="100">
<TransformDecorator.Transform>
<TransformCollection>
<RotateTransform Angle="135"/>
<ScaleTransform ScaleX="2" ScaleY="4"/>
</TransformCollection>
</TransformDecorator.Transform>
<ListBox >
<ListItem> ListItem 1 </ListItem>
<ListItem> ListItem 2 </ListItem>
<ListItem> ListItem 3 </ListItem>
</ListBox>
</TransformDecorator>
</Canvas>
</Border>
.gif)
Figure 3-15. ListBox et Ellipse asymétriques
Animations
XAML prend également en charge les animations. Vous pouvez animer presque toutes les propriétés. Certaines propriétés ont une propriété « Animations » correspondante, par exemple RotateTransform.Angle et RotateTransform.AngleAnimations. Dans d’autres cas, vous pouvez affecter une collection d’animations à une propriété à l’aide de la syntaxe de propriété composée. Par exemple, consultez le code suivant :
<Button>
<Button.Width>
… put animation collection here …
</Button.Width>
</Button>
Chaque type de propriété a une collection d’animations distincte. Le type de Button.Width est Length, donc on utilise lengthAnimationCollection. De même, les objets d’animation eux-mêmes sont spécifiques au type de la propriété que vous animez : lengthAnimationCollection contient un ensemble d’objets LengthAnimation .
Les objets d’animation ont une propriété From et To , dont les types correspondent au type de la propriété animée. L’objet animation a également des propriétés Begin, Duration et End , qui sont mesurées en secondes et contrôlent le minutage de l’animation. Begin prend également en charge la valeur Immédiate, et Duration prend en charge Indéfini. Vous pouvez utiliser les propriétés RepeatCount et RepeatDuration pour répéter l’animation automatiquement. La propriété Fill spécifie ce qui se passe à la propriété une fois l’animation terminée. Fill="Hold » est l’une des valeurs les plus importantes ; il conserve la propriété à la valeur Fin de l’animation.
Les classes d’animation ne font pas partie de l’espace de noms XAML par défaut. Vous devez donc utiliser ?< Constructions de mappage> et xmlns pour charger l’espace de noms MSAvalon.Windows.Media.Animation. Étant donné que cet espace de noms contient des classes de plusieurs DLL, vous aurez besoin d’un ?< Mappage> et xmlns pour chaque DLL.
L’exemple suivant anime deux propriétés, la propriété RotateTransform.Angle et la propriété Button.Width , qui utilisent des classes des deux espaces de noms d’animation. La figure 3-16 montre le bouton à différents moments.
<?Mapping XmlNamespace="animC" ClrNamespace="MSAvalon.Windows.Media.Animation"
Assembly="PresentationCore" ?>
<?Mapping XmlNamespace="animF" ClrNamespace="MSAvalon.Windows.Media.Animation"
Assembly="PresentationFramework" ?>
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:animC="animC"
xmlns:animF="animF"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<Canvas Height="400" Width="400">
<TransformDecorator Canvas.Top="200" Canvas.Left="100">
<TransformDecorator.Transform>
<TransformCollection>
<RotateTransform Angle="135">
<RotateTransform.AngleAnimations>
<animC:DoubleAnimationCollection>
<animC:DoubleAnimation From="0" To="360" Duration="4"
AutoReverse="True"
RepeatDuration="Indefinite"/>
</animC:DoubleAnimationCollection>
</RotateTransform.AngleAnimations>
</RotateTransform>
</TransformCollection>
</TransformDecorator.Transform>
<ListBox >
<ListItem> ListItem 1 </ListItem>
<ListItem> ListItem 2 </ListItem>
<ListItem> ListItem 3 </ListItem>
</ListBox>
</TransformDecorator>
<Button Width="40" Canvas.Top="10" Canvas.Left="10">
<Button.Width>
<animF:LengthAnimationCollection>
<animF:LengthAnimation From="40" To="300"
AutoReverse="true" Begin="1" Duration="1.2"
RepeatDuration="Indefinite"/>
</animF:LengthAnimationCollection>
</Button.Width>
Button
</Button>
</Canvas>
</Border>
.gif)
Figure 3-16. Affichages du bouton animé à différents moments
Document Services
La plateforme Longhorn fournit des services complets qui prennent en charge une meilleure expérience d’affichage de documents en ligne. Il existe deux services main : un contrôle conçu pour l’affichage, la pagination et la navigation dans le contenu d’un document, et les services de mise en page conçus pour améliorer l’expérience de lecture.
Contrôle PageViewer
Vous utilisez le contrôle PageViewer lorsque vous souhaitez afficher un document à l’utilisateur à des fins d’affichage en ligne. Le contrôle PageViewer fournit des fonctionnalités de pagination et de navigation dans les pages. Le contrôle met automatiquement en forme le contenu du document dans des pages distinctes. L’utilisateur peut accéder directement à différentes pages à l’aide des contrôles fournis par la visionneuse de pages.
Pagination et navigation
Traditionnellement, le contenu en ligne, comme les pages Web, était continu. Une interface utilisateur a fourni des barres de défilement pour vous permettre d’afficher du contenu qui ne pouvait pas tenir dans la zone visible. En fait, vous devez « faire défiler » la fenêtre d’affichage jusqu’à la position dans le document que vous souhaitez voir.
Avec la pagination, vous fractionnez le contenu du document en une ou plusieurs pages individuelles, comme dans un livre. La plateforme Longhorn prend en charge le contenu paginé en incluant plusieurs contrôles qui vous permettent d’afficher et de parcourir le contenu affiché sous forme de pages discrètes. En outre, Longhorn fournit une interface de programmation d’application (API) de pagination pour étendre ces fonctionnalités et fournir une prise en charge enrichie de la pagination pour les applications de pagination personnalisées.
Le contrôle PageViewer est en fait un contrôle complexe créé à partir de contrôles plus petits utilisant les techniques de composition de contrôle que j’ai décrites précédemment. Le contrôle PageViewer utilise les contrôles PageSource et PageElement pour fournir sa fonctionnalité de pagination. Le contrôle PageSource interrompt et met en forme le contenu sur plusieurs pages. Le contrôle PageElement affiche une seule page. Le contrôle PageViewer utilise également le contrôle PageBar pour vous permettre de naviguer dans les pages.
L’utilisation du contrôle PageViewer est très simple. Pour afficher un document connu, vous pouvez l’utiliser comme indiqué dans le code suivant. Bien sûr, vous pouvez raccorder des gestionnaires d’événements et modifier le document source pour que la visionneuse de pages affiche différents documents.
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<PageViewer Source="AuthorsandPublishers.xaml" />
</Border>
La figure 3-17 montre la visionneuse de pages hébergée dans une fenêtre de navigateur affichant son document. Notez les contrôles de navigation de page en haut du document.
.gif)
Figure 3-17. Contrôle PageViewer
Services de disposition de document
Longhorn fournit également des services de mise en page de documents conçus pour améliorer l’expérience de lecture. Longhorn prend en charge deux nouveaux types de documents :
- Documents de flux adaptatif
- Documents de disposition fixe
Ces nouveaux formats de documents permettent aux développeurs d’offrir aux utilisateurs de leurs applications une meilleure expérience de lecture de documents.
Les documents de flux adaptatif utilisent des éléments de balisage spécialisés qui déclarent qu’un document doit être adaptatif. Longhorn optimise automatiquement un document adaptatif pour utiliser au mieux l’espace d’écran disponible et offrir la meilleure expérience de lecture à l’utilisateur en fonction des fonctionnalités ou des limitations de son système.
Par exemple, l’utilisateur peut avoir l’un des écrans grand écran 16 par 9 récemment introduits. Il est très difficile de lire une ligne de texte qui s’étend sur une longue ligne horizontale. Selon la largeur de la fenêtre, un document adaptatif peut diviser le texte en deux, trois colonnes ou plus, ce qui réduit les efforts d’un utilisateur pour analyser une ligne de texte.
Dans un autre exemple, un document peut contenir une image et du texte qui circulent autour de l’image. Lorsque vous réduisez la taille de la fenêtre du document dans un document non adapté, l’image reste de taille fixe et vous voyez de moins en moins le texte. Un document adaptatif peut réduire l’image lorsqu’il détermine qu’un texte insuffisant est visible dans la fenêtre. Cela permet au lecteur d’avoir une idée générale de ce que l’image représente, mais de continuer à lire le texte dans le contexte de l’image. Dans une fenêtre plus petite, voir chaque pixel d’une image est susceptible d’être moins important et utile pour le lecteur que de pouvoir lire plus de texte. Une alternative, telle que le fait de séparer l’image et d’entourer le texte sur des pages distinctes, va à l’encontre de l’intention de l’auteur du document, qui était de présenter le texte et l’image ensemble dans leur contexte.
Les documents à disposition fixe s’affichent à chaque fois de la même façon, quelle que soit la taille d’écran, la taille de la fenêtre ou le périphérique de sortie de la visionneuse. Vous créez un document de mise en page fixe à l’aide d’éléments de balisage spécialisés ou en imprimant un document à l’aide d’un pilote d’imprimante Microsoft Windows Vector Graphics (WVG).
Documents de disposition adaptative
Dans un document de disposition adaptative, vous fournissez des préférences clés dans le balisage de niveau racine. Longhorn peut ensuite afficher le document d’une manière qui utilise au mieux la zone de fenêtre et améliore sa lisibilité. Longhorn détermine automatiquement la largeur et le nombre optimaux de colonnes pour une page, les tailles idéales pour tous les éléments de texte, les tailles et les positions optimales pour toutes les figures, ainsi que les largeurs de marges et de gouttières pour donner la meilleure présentation globale du contenu.
Production d’un document de disposition adaptative
Pour créer un document de disposition adaptative, utilisez un balisage déclaratif similaire à ce qui suit :
<Border
xmlns="https://schemas.microsoft.com/2003/xaml"
xmlns:def="Definition"
Background="BlanchedAlmond"
>
<AdaptiveMetricsContext ColumnPreference="Medium"
FontFamily="Arial">
<TextPanel Background="white">
<Section>
<Heading OutlineLevel="1">Adaptive Layout Example</Heading>
<Paragraph>
This example shows the advanced capabilities of Adaptive Flow
Layout. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tin cidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veni am, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure.</Paragraph>
<Paragraph>
<Image TextPanel.FlowBehavior="Figure" Source="picture1.jpg"
TextPanel.Emphasis="Medium" />
Notice how images and text are flowed intelligently to enhance the
reading experi ence. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi e nim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis ni sl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure.
</Paragraph>
<Paragraph>Adaptive layout is an exciting new feature of Longhorn.
<Image TextPanel.FlowBehavior="Figure" Source="picture2.jpg"
TextPanel.Emphasis="Low" />
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi e nim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis ni sl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure.
</Paragraph>
</Section>
</TextPanel>
</AdaptiveMetricsContext>
</Border>
documents Fixed-Layout
Vous utilisez un document à disposition fixe pour présenter le contenu du document dans la même disposition et le même format, indépendamment du logiciel d’application, du matériel et du système d’exploitation utilisé. En outre, un document à disposition fixe s’affiche de façon identique sur tous les périphériques de sortie. Un document à disposition fixe est un ensemble d’objets qui décrivent collectivement l’apparence d’une ou plusieurs pages.
Production d’un document Fixed-Layout
Vous pouvez utiliser deux techniques différentes pour produire un document à disposition fixe :
- Imprimer un document sans balisage dans un fichier à l’aide du pilote d’imprimante Longhorn
- Écrire un document à disposition fixe à l’aide du code XAML
Lorsque vous imprimez un document à l’aide de la plupart des applications Microsoft Win32 (par exemple, Microsoft Office) à l’aide du pilote d’imprimante Longhorn, le pilote d’imprimante crée un fichier XAML qui contient le balisage pour paginer et positionner chaque caractère, image ou graphique vectoriel dans le document imprimé.
Vous pouvez choisir de générer le document en tant que fichier de balisage directement ou d’inclure le fichier de balisage dans un conteneur. Lorsque vous sélectionnez sortie du conteneur, vous pouvez également appliquer des droits numériques et la protection des documents au document.
Vous pouvez également créer du code XAML à l’aide d’un éditeur. Voici un exemple squelettique de document à disposition fixe :
<FixedPanel xmlns="https://schemas.microsoft.com/2003/xaml/" >
<FixedPage Width="8.50in" Height="11.00in"> <!-- PAGE 1 -->
<Text FontFamily="Arial" FontSize="8.4" FixedPage.Left="1.250in"
FixedPage.Top="0.530in" FontWeight="Bold">1.</Text>
<Text FontFamily="Arial" FixedPage.Left="1.350in" FixedPage.Top="0.500in"
FontWeight="Bold" FontSize="12">Fixed Document</Text>
</FixedPage>
<FixedPage>
<Text>This is page 2</Text>
</FixedPage>
<FixedPage>
<Text>This is page 3</Text>
</FixedPage>
</FixedPanel>
Résumé
Les panneaux vous permettent de diviser la surface d’affichage en zones avec des caractéristiques de disposition différentes. Vous disposez d’une grande variété de contrôles que vous pouvez utiliser pour remplir les panneaux d’un écran. Les formes, les transformations et les animations vous permettent de produire une sortie graphique dynamique. À l’aide de la composition de contrôle, vous pouvez combiner ces fonctionnalités pour produire pratiquement n’importe quelle interface utilisateur de votre choix. Vous pouvez produire des documents adaptatifs qui disposent intelligemment votre contenu et facilitent la lecture par le lecteur. Vous pouvez également positionner précisément chaque élément d’une page et contrôler explicitement la pagination pour produire un document qui apparaît exactement comme vous le souhaitez, quel que soit le périphérique de sortie. De plus, vous pouvez tout faire de manière déclarative à l’aide de XAML. C’est sûr que heck bat l’écriture d’un gestionnaire de messages WM_PAINT!