Publié mardi 15 juillet 2008 23:00 par Audrey

[Silverlight] Le control Grid (Silverlight 2 beta 2)

En codant mes premières lignes de Silverlight 2 beta 2, je me suis penchée sur les controls existant pour réaliser l'interface. Celui que j'apprécie le plus est le control Grid.

Voici un petit exemple qui permet d'illustrer le fonctionnement du control Grid. Pour ceux qui sont familiers des balises HTML <table>, son fonctionnement est basé sur la même logique, des lignes et des colonnes qui forment des cellules.

On cherche à réaliser cette interface :

Démo Control Grid Silverlight

Tout d'abord, lorsque l'on débute un projet Silverlight voici le XAML qui est généré :

1
2
3
4
5
6
7
8
<UserControl x:Class="GridDemoBlog.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">

</Grid>
</UserControl>

On peut voir qu'un control Grid est déjà ajouté. Il représente toute l'interface disponible. En lui apportant des modifications, nous allons pouvoir poser la structure de base. Tout d'abord en ajoutant des lignes et des colonnes pour structurer les différentes cellules (pour mieux les visualiser nous allons mettre à la valeur True l'option ShowGridLines qui permet de mettre en évidence les séparations entre les lignes et les colones d'un control Grid).

Pour définir des lignes, il faut utiliser <Grid.RowDefinitions> et il y aura autant de lignes que de <RowDefinition> déclarés. Pour donner une taille relative, on utilise le caractère *, et le control utilisera toute la place possible.

Pour définir les colonnes, le principe est le même, il faut utiliser <Grid.ColumnDefinitions> et <ColumnDefinition> pour chaque colonne souhaitée. Dans notre exemple, nous avons une colonne de 40 pixels, et la deuxième qui prend le reste de la place de l'interface. Voici le code XAML correspondant :

1
2
3
4
5
6
7
8
9
10
11
12
13
    <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

</Grid>

Et voici ce que cela donne au niveau du designer :

Démo Control Grid Silverlight - Etape 1


Maintenant pour pouvoir travailler dans chaque cellule définie précédemment, il faut ajouter de nouveaux controls Grid, donc travailler avec des controls Grid imbriqués. Pour chaque control il faut lui renseigner dans quelle cellule il doit se positionner, c'est pour cela que l'on utilise les propriétés Grid.Column et Grid.Row.

Pour ce premier control Grid imbriqué, il est positionné à la ligne 0 et à la colonne 1 du Grid principal. Pour la première zone se composant d'une image et d'un bouton, il faut définir 2 colonnes, une première de taille 100 pour le control Image et une autre prenant le reste de la place disponible pour le control Button et y ajouter les controls correspondant.
Pour l'image, il faut la positionner dans la colonne 0 du control Grid "TopGrid". Pour le bouton, il faut le positionner dans la colonne 1 de ce même control Grid.

1
2
3
4
5
6
7
8
9
10
11
        <Grid x:Name="TopGrid" Background="LightBlue" Grid.Row="0" Grid.Column="1">

<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Image x:Name="ImageSilverlight" Grid.Column="0" Source="Silverlight_logo.jpg" Stretch="Fill"/>
<Button x:Name="ButtonDroit" Grid.Column="1" Content="Click me !" FontSize="20" Margin="5,5,5,5" />

</Grid>


Et voici ce que cela donne au niveau du designer :

Démo Control Grid Silverlight - Etape 2


Pour le deuxième control Grid, il faut diviser en 2 lignes de hauteur identique, dans lesquelles un control <TextBlock> est ajouté pour afficher un texte. Chacun est associé à une ligne du control Grid "MiddleGrid" grâce à la propriété Grid.Row :

1
2
3
4
5
6
7
8
        <Grid x:Name="MiddleGrid" Background="LightCyan" ShowGridLines="True" Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" HorizontalAlignment="Left">Ligne du haut</TextBlock>
<TextBlock Grid.Row="1" HorizontalAlignment="Right">Ligne du bas</TextBlock>
</Grid>


Et voici ce que cela donne au niveau du designer :

Démo Control Grid Silverlight - Etape 3

Pour le troisième control Grid, un control TextBlock suffit pour remplir toute la cellule donc il n'est pas utile de repréciser son emplacement dans le control Grid "BottomGrid" :

1
2
3
        <Grid x:Name="BottomGrid" Background="LightSkyBlue" ShowGridLines="True" Grid.Row="2" Grid.Column="1">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="42">Hello World !</TextBlock>
</Grid>


Et voici ce que cela donne au niveau du designer :

Démo Control Grid Silverlight - Etape 3

Et enfin pour le quatrième control Grid, on souhait fusionner les cellules se trouvant sur 3 lignes, pour cela on se positionne sur la première cellule en ligne 0 et colonne 0 du control Grid principal, on se sert de la propriété Grid.RowSpan pour la fusion. Puis on ajoute un control Border avec des coins arrondis et un control TextBlock qui l'on fait pivoter pour écrire verticalement. Voici le code XAML correspondant :

1
2
3
4
5
6
7
8
        <Grid x:Name="LeftGrid" ShowGridLines="True" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3">
<Border CornerRadius="14" Background="LightSteelBlue" Margin="3,0,3,0" />
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="Démo control Grid" Margin="-150,0,-150,0" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90"/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>



Et voici ce que cela donne au niveau du designer :

Démo Control Grid Silverlight - Etape 3

Il ne reste plus qu'à mettre à False la propriété ShowGridLines et on obtient l'interface que l'on souhaitait au départ ! Smile

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Classé sous , ,

# re: [Silverlight] Le control Grid (Silverlight 2 beta 2) @ mardi 15 juillet 2008 23:39

Salut Audrey,

Un petit lien pour tout savoir sur le DataGrid de Silverlight (ca peut toujours servir): http://blogs.msdn.com/scmorris/

A+ :)

Thomas LEBRUN

# re: [Silverlight] Le control Grid (Silverlight 2 beta 2) @ mercredi 16 juillet 2008 00:54

@Thomas : Le post parle du Grid utilisé pour le positionnement, pas du DataGrid.

Ceci dit c'est vrai que le lien est utile quand même, mais est HS :)

Skyrunner

# re: [Silverlight] Le control Grid (Silverlight 2 beta 2) @ mercredi 16 juillet 2008 07:36

@Thomas : Merci pour le lien, je l'ajoute vite à mes flux RSS :) mais effectivement comme le dit Skyrunner je parle du Grid de positionnement.

Audrey

# re: [Silverlight] Le control Grid (Silverlight 2 beta 2) @ mercredi 16 juillet 2008 08:52

Pffou, ok au temps pour moi: ca m'apprendra à lire trop vite :)

Mais bon, vous aurez au moins gagner un lien intéressant :)

Thomas LEBRUN


Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01