Définir un ordre de découpage des lignes d'un contrôle de grille Silverlight

Question

J'utilise un Grid -Le contrôle de ce type d'activité :

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="10"></RowDefinition>
        <RowDefinition Height="10"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="10"></RowDefinition>
    </Grid.RowDefinitions>

    <Rectangle Grid.Row="0" Fill="Red"></Rectangle>
    <Rectangle Grid.Row="1" Fill="Green"></Rectangle>
    <Rectangle Grid.Row="2" Fill="Yellow"></Rectangle>
    <Rectangle Grid.Row="3" Fill="Gray"></Rectangle>
</Grid>

Supposons que la hauteur de la grille soit de 50 pixels. Il est évident que les hauteurs des lignes seront de 10, 10, 20 et 10 pixels.

Supposons maintenant que la hauteur de la grille soit de 29 pixels. Dans ce cas, les hauteurs seront 10, 10, 0 et 9 pixels, ce qui signifie que la dernière ligne est coupée.

Existe-t-il un moyen d'assigner un ordre dans lequel les lignes seront coupées ? Par exemple, je veux que la grille commence à découper la deuxième ligne (celle avec le rectangle vert) au lieu de la dernière ligne, de sorte qu'avec une hauteur de grille de 29 pixels, les hauteurs des lignes seront de 10, 9 0 et 10 pixels.

Answer 1

[Télécharger la boîte à outils aquí ]

C'est ici que DockPanel vient à la rescousse (il est écrit en WPF mais devrait fonctionner de la même manière en SL avec la boîte à outils, il suffit d'ajouter les bons xmlns) :

<DockPanel>
    <Rectangle DockPanel.Dock="Top"
               Height="10"
               Fill="Red" />
    <Rectangle DockPanel.Dock="Bottom"
               Height="10"
               Fill="Gray" />
    <Rectangle DockPanel.Dock="Top"
               Height="10"
               Fill="Green" />
    <Rectangle Fill="Yellow" />
</DockPanel>

Quelques notes :

1. Cela fonctionnera avec une seule ligne/colonne étoilée, si vous en avez besoin de plus d'une - dans certains cas, une autre ligne/colonne intérieure est nécessaire. DockPanel peut aider, mais pas toujours.
2. J'ai conservé l'ordre visuel de ces rectangles, mais leur emplacement dans le code a changé - DockPanel clippera d'abord son dernier enfant, puis l'avant-dernier et ainsi de suite jusqu'au premier enfant. L'ordre des enfants est extrêmement important et n'est pas très intuitif, il faut faire attention à l'ordre de chaque enfant et à ce qu'il représente. DockPanel.Dock de la mise en place.
3. DockPanel est vraiment le héros méconnu du système de mise en page :)

Modification pour répondre au premier commentaire :

Vous ne mentionnez que les rectangles rouge et vert dans votre commentaire, donc je suppose que le jaune prend toujours toute la hauteur disponible (rangée d'étoiles), mais je ne suis pas sûr pour le rectangle gris. Sur cette base, voici deux options que j'ai trouvées.

Pour l'ordre d'écrêtage Jaune -> Rouge -> Vert -> Gris :

<DockPanel>
    <Rectangle DockPanel.Dock="Bottom"
               Height="10"
               Fill="Gray" />
    <DockPanel DockPanel.Dock="Top">
        <Rectangle DockPanel.Dock="Bottom"
                   Height="10"
                   Fill="Green" />
        <Rectangle DockPanel.Dock="Top"
                   Height="10"
                   Fill="Red" />
    </DockPanel>
    <Rectangle Fill="Yellow" />
</DockPanel>

Pour l'ordre d'écrêtage Jaune -> Gris -> Rouge -> Vert :

<DockPanel>
    <DockPanel DockPanel.Dock="Top">
        <Rectangle DockPanel.Dock="Bottom"
                   Height="10"
                   Fill="Green" />
        <Rectangle DockPanel.Dock="Top"
                   Height="10"
                   Fill="Red" />
    </DockPanel>
    <Rectangle DockPanel.Dock="Bottom"
               Height="10"
               Fill="Gray" />
    <Rectangle Fill="Yellow" />
</DockPanel>

L'ordre d'écrêtage jaune -> rouge -> gris -> vert, je n'ai pas de réponse pour l'instant. C'est beaucoup plus difficile, dites-le moi si vous en avez besoin.