Discussion :

[Ldoppea]

Bonjour,

J'essaie de mettre en place une grille, mais je n'arrive pas à obtenir ce que je veux.

Ce que je veux :

Une grille avec X colonnes.
Chaque colonnes à la même taille (donc width="*").
La grille doit s'adapter à la taille de la fenêtre.
Mais la grille à une taille minimum (si la fenêtre est trop petite, alors la grille dépassera).

J'ai donc fait un essais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="ScrollTest.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	UseLayoutRounding="True"
	Width="640" Height="480">
 
		<Grid x:Name="LayoutRoot" MinHeight="400">
			<Grid.RowDefinitions>
				<RowDefinition />
				<RowDefinition />
				<RowDefinition />
			</Grid.RowDefinitions>
			<TextBlock Grid.Row="1" Grid.Column="0" TextWrapping="WrapWithOverflow">
				Ipsam vero urbem Byzantiorum fuisse refertissimam atque ornatissimam signis quis ignorat? Quae illi, exhausti sumptibus bellisque maximis, cum omnis Mithridaticos impetus totumque Pontum armatum affervescentem in Asiam atque erumpentem, ore repulsum et cervicibus interclusum suis sustinerent, tum, inquam, Byzantii et postea signa illa et reliqua urbis ornanemta sanctissime custodita tenuerunt.
			</TextBlock>
			<Button Grid.Row="0" Grid.Column="0" Margin="10" />
			<Button Grid.Row="2" Grid.Column="0" Margin="10" />
		</Grid>
</Window>

Donc là pas de problème, ça fait ce que je veux. La grille s'adapte à la fenêtre, sauf si cette dernière est plus petite que 400px. Et dans le cas où elle ne s'adapte plus à la fenêtre, alors elle fera toujours 400px de haut.

Le problème est que du coup on ne vois pas tout, car une partie de la grille dépasse si la fenêtre est trop petite.

J'ai donc décidé de mettre un scrollviewer autour de la grille. Donc meme code que précédement avec <ScrollViewer></ScrollViewer> autour de <Grid x:Name="LayoutRoot" MinHeight="400">

Et là c'est le drame, plus rien ne va comme je veux. La grille s'adapte bien à la taille de la fenêtre, a bien une taille minimum. Mais si le contenu d'une case est trop grand, alors il va agrandir la case pour tout afficher, au dépends des autres cases (donc plus d'égalité de taille des cases), et en plus elle agrandi la grille si nécessaire.

Hors je veux que ce soit uniquement la fenêtre qui définisse la taille de la grille (et non son contenu) et si la fenêtre est trop petite, alors la grille fera 400px et pas plus

Pour illustrer ceci, voici dans l'ordre, ce que j'ai au départ, ensuite ce que je veux, puis ce que j'obtiens :


En fait j'ai l'impression que dès que je mets un scrollviewer, la grille et ses cases passent dans une sorte de SizeToContent.

Quelqu'un a une idée de comment obtenir ce que je veux?

Merci d'avance

[MetalGeek]

Salut,

j'ai reproduit les étapes que tu décris (en partant d'un copié-collé de ton code), et chez moi ça fonctionne ; tu peux poster le code avec le scrollviewer stp ?

[Ldoppea]

Voilà pour le code, j'ai aussi mis les sources de l'exemple sur mon ftp : http://divers.ldoppea.com/ScrollTest.zip

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="ScrollTest.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	UseLayoutRounding="True"
	Width="221" Height="397">
        <ScrollViewer>
            <Grid x:Name="LayoutRoot" MinHeight="400">
			    <Grid.RowDefinitions>
				    <RowDefinition />
				    <RowDefinition />
				    <RowDefinition />
			    </Grid.RowDefinitions>
			    <TextBlock Grid.Row="1" Grid.Column="0" TextWrapping="WrapWithOverflow">
				    Ipsam vero urbem Byzantiorum fuisse refertissimam atque ornatissimam signis quis ignorat? Quae illi, exhausti sumptibus bellisque maximis, cum omnis Mithridaticos impetus totumque Pontum armatum affervescentem in Asiam atque erumpentem, ore repulsum et cervicibus interclusum suis sustinerent, tum, inquam, Byzantii et postea signa illa et reliqua urbis ornanemta sanctissime custodita tenuerunt.
			    </TextBlock>
			    <Button Grid.Row="0" Grid.Column="0" Margin="10" />
			    <Button Grid.Row="2" Grid.Column="0" Margin="10" />
		    </Grid>
        </ScrollViewer>
</Window>

Je précise que je dois obtenir le résultat de l'image du milieu (sur mon premier post), et non le résultat de l'image de droite.

[MetalGeek]

Bon, j'ai trouvé seulement un "workaround" comme on dit, mais c'est vraiment moche. Il doit y avoir un meilleur moyen, si quelqu'un a la réponse...

Je suis finalement arrivé à ce que tu veux, pour ça tu ajoutes un nom à par ex. la première 'Row' de la grille (dans mon exemple, je l'ai appelée 'row'), et tu gères l'évènement SizeChanged de la TextBlock. Dans le code behind :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
private void TextBlock_SizeChanged(object sender, SizeChangedEventArgs e)
  {
        if (e.HeightChanged)
            {
                ((FrameworkElement)sender).Height = this.row.ActualHeight;
            }
  }

Sachant que ton problème, à la base, vient du "TextWrapping" de ta TextBlock.

[StormimOn]

Je vais peut être sortir une ânerie, mais comme la hauteur minimale est connue (400), si tu indiques que la hauteur minimale de chaque ligne est de 133 ça ne fonctionnerait pas ?

[MetalGeek]

C'est la hauteur maximale qui pose problème : comme la TextBlock a un TextWrapping, elle impose sa taille pour permettre au texte de rentrer (sans wrapping, le texte s'écrirait sur une seule ligne et serait tronqué sans utiliser l'espace vertical). Du coup, la ligne de la grille ignore l'indication GridLength '*', et s'adapte à la textblock.

Par contre, un truc qui marcherait peut-être serait de spécifier une MaxHeight à la TextBlock (voire à la ligne correspondante de la grille).

[Ldoppea]

@MetalGeek : Effectivement ça à l'air de fonctionner. Mais c'est plutôt contraignant quand y a plusieurs 10aines d'objets dans la grid

D'ailleurs il faut penser à mettre un MinHeight à cette row, car si la fenêtre se charge avec les rows déjà déformées, le code ne fonctionnera pas.

Je vais utiliser ça dans un premier temps pour mes tests, en espérant que quelqu'un ai une solution plus propre

Je vais peut être sortir une ânerie, mais comme la hauteur minimale est connue (400), si tu indiques que la hauteur minimale de chaque ligne est de 133 ça ne fonctionnerait pas ?

En fait ça règlerait à moitié le problème car si ça règlerait l'impact de cette row sur les autres, cela ne règle pas celui de cette même row qui s'agrandit.

Le problème est surtout du au fait qu'en mettant un scrollviewer, la grid perd la contrainte de taille maximale liée aux bords de la fenêtre, du coup les rangées peuvent s'agrandir comme elles veulent pour afficher tout leur contenu.