scrollviewer et RowDefinition = "Auto"

Bonjour,

J'ai une Grille composée de trois lignes.

La première est de hauteur constante 50 Pixels. Elle contient un combo "Secteur".
La deuxième est de hauteur variable. Elle contient un dataGrid "Clients".
La troisième est également de hauteur variable et contient un autre datagrid "Contrats".

Vous aurez déjà compris qu'après avoir sélectionné un secteur dans le combo, il me ramène en deuxième ligne les clients de ce secteur et en troisième ligne les contrats du client actuellement sélectionné.

Je voudrais pouvoir optimiser la place pour utiliser tout l'espace disponible de mon browser.

Malheureusement, en fonction du secteur, j'ai parfois un seul client et parfois 15. De même, en fonction du client sélectionné, j'ai parfois un contrat, parfois 20...

Donc la hauteur de mon deuxième et troisième row doit être variable.

Si je fais:

Code:

---

1 2 3 4 5 6

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

---

J'ai une même hauteur pour ma deuxième et troisième ligne de ma grille. Ce qui est un peu bête puisque j'ai par exemple un seul client, un gros blanc, et puis en troisième ligne, 15 contrats, qui comme ils ne savent pas tous s'afficher, font que j'ai une scrollbarre verticale qui s'affiche.

Pas top.

Si je fais:

Code:

---

1 2 3 4 5

<Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>

---

C'est beaucoup mieux car si je n'ai qu'un client en ligne 2, il me l'affiche, et sans perdre de place, il affiche alors mes 15 contrats dans ma ligne 3 qui est beaucoup plus haute.

Le problème, c'est qu'avec la définition "Auto", mon scrollViewer ne s'affiche jamais. Donc si j'ai plus de 15 contrats, je ne sais pas accéder au 16 ème.

Et avec quelque chose comme :

Code:

---

1 2 3 4 5 6

<Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions>

---

Oui, j'avais essayé,

l'effet est alors que du coté "Auto" (deuxième row de la Grid) il n'y a pas de scrollViewer, coté du "*" c'est OK.

En fait, en y réfléchissant, c'est un peu normal, d'un coté en mettant "Auto", on dit au container "Grandit tant que ton contenu grandit" de l'autre, en mettant un scrollViewer, on dit au contenu "Quand ta taille dépasse celle de ton container, affiche les scrollViewer". Celà n'arrive jamais...

Il faudrait en fait pouvoir Binder le maxHeight du container sur la hauteur du row de la Grid.

Bonjour,
le scrollViewer il est dans une des 3 lignes ?

Car sauf erreur il devrait etre le parent du Grid pour pouvoir scroller quand celui-ci (car c'est bien le grid qui devient plus grand que l'ecran) grandit.
Un stackpanel serait suffisant pour les 3 lignes (1 par ligne), le tout dans un Grid, avec rowDefinition sur auto, et le Grid dans un ScrollViewer

D'accord avec Vinchenzo.939, Il suffit d'imbriquer ton ScrollViewer pour que cela fonctionne. Dans ton ScrollViewer, un ItemsControl te permettra de faire du Binding facilement.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<Grid>   <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>   <ScrollViewer Grid.Row="2"> <ItemsControls ItemsSource="{Binding MesTrucs}" /> </ScrollViewer> </Grid>

---

EDIT : Je me demande si j'ai bien compris le probleme :aie:

Citation:

---

Envoyé par Samuel Blanchard

EDIT : Je me demande si j'ai bien compris le probleme :aie:

---

Ben oui, moi je comprends le problème, par contre, je ne comprend pas la proposition de Vinchenzo.

Mettre un ScrollViewer autour des trois Rows de ma grille n'a pas d'intérêt pour moi, et en plus, je pense qu'il ne s'affichera jamais puisqu'un des Row de ma grille est mis sur Auto et que donc ma grille va s'agrandir sans cesse sans qu'une hauteur max vienne dire au ScrollViewer de se déclencher.

Ce qu'il me faut, et qui fonctionne avec

Code:

---

<RowDefinition Height="*"/>

---

c'est un scrollbar vertical et horizontal qui apparaisse sur mon datagrid quand la taille dépasse la place disponible. Je n'ai même pas besoin de les définir, c'est prévu "de base" avec le datagrid.

Understood

Je vais peut-etre dire une betise donc reprenez-moi cas echeant.
Je crois qu'il y a confusion, les scrolls mentionnes ne sont pas ceux d'un grid "de base" mais ceux de ton contenant (genre controle Page d'une Business Application Silverlight avec scroll + stack).

Si un grid depasses de l'ecran, y'a pas de scroll.
J'ai fait un test pour pas avoir l'air trop bete :)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<Grid x:Name="LayoutRoot" Background="Yellow"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>   <StackPanel Grid.Row="0" Background="red" Height="300"/> <StackPanel Grid.Row="1" Background="Blue" Height="1000"/> <StackPanel Grid.Row="2" Background="Green" Height="1400"/> </Grid>

---

Ca dans un mainPage, aucun scroll, ni avec hauteur Auto, ni avec hauteur pondere (*).
Par contre

Code:

---

1 2 3 4 5 6

<ScrollViewer VerticalScrollBarVisibility="Auto"> <Grid x:Name="LayoutRoot" Background="Yellow"> ... </Grid> </ScrollViewer>

---

No pb, le scroll est bien la.

Ici le controle ScrollViewer se comporte comme un controle Border, un seul Child, et ne sert a pas grand chose (le premier met des scroll, le deuxieme une bordure)

Sans trop m'avancer, un RowDefinition Height="*" MaxHeight=30 ne declenches pas de scroll, il limitera (je dirais meme plus, il coupera) l'affichage des infos.

En esperant avoir pus aider

Merci pour tes réponses et tes efforts.

as-tu essayé dans ton code

Code:

---

1 2 3 4 5

<StackPanel Grid.Row="0" Background="red" Height="300"/> <StackPanel Grid.Row="1" Background="Blue" Height="1000"/> <StackPanel Grid.Row="2" Background="Green" Height="1400"/>

---

de retirer les hauteurs, car c'est ça mon objectif, d'avoir la hauteur d'un row défini automatiquement par le nombre de lignes contenues dans le datagrid de ce row, toi tu fixes les hauteurs de manière arbitraire.

En plus, je voudrais avoir un scrollBar sur le Grid.Row 1 et un autre sur le Grid.Row 2, pas un scrollBar qui enveloppe les trois row.

Enfin, s'il y a bien un contrôle qui ne déclenche jamais les scrollViewer, c'est le stackPanel (il y a plein d'articles là-dessus). Il vaut donc mieux faire les tests avec des Grids.

Et bien meme principe, pour avoir 2 scrolls il suffit d'avoir qqch comme :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<ScrollViewer> <ScrollViewer.Resources> <Style TargetType="ScrollViewer"> <Setter Property="VerticalScrollBarVisibility" Value="Auto"/> </Style> </ScrollViewer.Resources> <Grid x:Name="LayoutRoot"> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>   <!-- Row 0 --> <ComboBox Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" SelectionChanged="ComboBox_SelectionChanged"> <ComboBoxItem Content="PremierElement(10,20)"/> <ComboBoxItem Content="DeuxiemeElement(5,40)"/> </ComboBox>   <!-- Row 1 --> <ScrollViewer Grid.Row="1"> <ListBox Name="listeLigne1"/> </ScrollViewer>   <!-- Row 2 --> <ScrollViewer Grid.Row="2"> <ListBox Name="listeLigne2" MaxHeight="500"/> </ScrollViewer> </Grid> </ScrollViewer>

---

Alors oui j'ai vus le scroll englobant, c'est pour les tests :ccool:

Dans ce cas de figure (la combo peuple les listbox avec des elements on ne respecte pas le choix par etage mais c'est pas grave) le scroll de la ligne 1 ne declenche pas et celui de la ligne 2 fonctionnes, car en effet la limite de hauteur est declenche.
Le pb c'est que tu veux que ca marche sur toute resolution d'ecran (coquin) donc pas le choix, sortir le metre !

Mesurer la fenetre n'est pas aussi simple que ca. La premiere fois j'ai meme bien galerer.
Il te faut t'abonner au loaded de ta fenetre, pour acceder aux height/ActualHeight sachant que la hauteur peut-etre auto c'est galere, surtout que juste quand la fenetre est load, elle ajoute les childrens (donc tres souvent au load y'a rien).
Pour ma part j'utiliserai l'event selectionChanged de ta comboBox (celle de la ligne 0). Tes elements graphiques seront en place, tu pourra mesurer la hauteur de ta fenetre (-50 pour la premiere ligne) et ainsi definir ton premier MaxHeight pour listeLigne1.
Idem pour le premier listbox, sur le selectionChanged rebelotte.

Petit bonus, comme ca tu peux ajuster la hauteur plus finement (c'est dommage d'avoir la ligne 1 qui prends toute la place et qui ne laisses rien pour la ligne 2)

Bon maintenant a toi de bosser 8-)

OK, merci pour ton aide.

En fait, s'il faut mesurer, j'ai plus besoin de mettre mes rows en auto.

Il faudrait que je mesure la taille du DataGrid row1 et celle du DataGrid row2, et celle de ma fenêtre complète.

Ensuite si hauteur nécessaire pour le Row1 et pour le Row 2 est plus petite que hauteur globale disponible - 50, alors je fixe directement la Height (pas la maxHeight) du Row1 et du Row2.

Si par contre, j'ai pas la place d'afficher tout, je fixe également la hauteur de 1 et de 2 proportionnellement à la hauteur nécessaire, et comme ça mes deux scrollviewer s'affichent.

Mais, je pense que dans un premier temps, je vais utiliser :

Code:

---

1 2 3 4

<RowDefinition Height="50" /> <RowDefinition Height="*"/> <RowDefinition Height="*"/>

---

Ne dit-on pas que le mieux est l'ennemi du bien ?:P;)

Moi personnellement je laisserai les rows en Auto et non en pondere,
comme ca c'est le grid qui gere l'espace tant que l'affichage ne deborde pas.

Ainsi on peut considerer l'affichage des scrolls comme un cas particulier et le traitement de celui peut se faire sur un simple if

Code:

---

1 2 3 4 5

if (HauteurLigne1Et2() > _HauteurDisponible) { ReglerHauteurLigne1(); //Afficher un seul element, celui selectionne ? ReglerHauteurMaxLigne2(); }

---