Silverlight/Question de design XAML - Alignement horizontal (Docking?)

Question

J'ai une question concernant le XAML à utiliser pour réaliser mon design. J'ai actuellement une zone d'image sur l'écran, la largeur peut varier. Au-dessus de l'image, j'ai deux barres d'outils, chacune avec de nombreux boutons. L'un d'eux que je veux flotter/ancrer sur le bord gauche de l'image, et l'autre que je veux flotter/ancrer sur le bord droit. Bien sûr, à mesure que l'image grossit, la boîte à outils sur la droite doit rester ancrée sur le bord droit. Comment cela peut il etre accompli?

+--------------------------+        +---------------+ 
| TOOLBAR 1    |        | TOOLBAR 2 | 
+--------------------------+        +---------------+ 

+---------------------------------------------------------------------------+ 
|                   | 
|                   | 
|                   | 
|     <----- VARIABLE-WIDTH IMAGE ----->      | 
|                   | 
|                   | 
|                   | 
+---------------------------------------------------------------------------+ 

Tout échantillon de code XAML et une brève explication seraient grandement appréciés. Je suis un noob.

Answer 1

Utilisez une grille avec deux lignes et deux colonnes (avec les largeurs de colonnes définies sur Auto). L'image couvrira les deux colonnes de la deuxième rangée. La grille avec la taille à son contenu, et que la grille se développe (parce que l'image a grandi), la barre d'outils aligné à droite se déplacera pour rester aligné avec l'image en conséquence. Voici un exemple en XAML, en utilisant des rectangles en place des barres d'outils et des images:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 

    <Rectangle Name="Toolbar1" Fill="#FF894220" Width="200" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" /> 
    <Rectangle Name="Toolbar2" Fill="#FF894220" Width="200" Height="50" VerticalAlignment="Top" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1" /> 
    <Rectangle Name="Image" Fill="#FFB94222" Width="500" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" /> 
</Grid> 

Modifier la largeur du rectangle appelé « Image » pour voir l'effet.

Hope this helps ...

Chris