mise en page et stackpanel (taille des éléments en fonction de la taille de la page)

Version imprimable

bonjour, je dispose de trois stackpanel
je souhaiterai que les 2 premiers soient alignés horizontalement et que le troisieme soit en dessous des deux premiers.

actuellement le premier stackpanel adapte sa largeur en fonction de la largeur de ses composant (ce qui est bien) cependantle deuxieme a coté si je ne met pas de taille fixe prend la meme largeur , or j'aimerai que celui ci prene toute la largeur restante. ensuite j'aimeria que le stackpanel en dessous prene la largeur des 2 du haut.

Or dans ce stackpanel j'ia un datagrid. les colonnes ont automatiquement une largeur en adéquation avec les données qu'il y a dedans... donc il ne prend pas toutes la largeur...

en esperant avoir etait clair
merci d'avance pr vos réponses
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <StackPanel Orientation="Horizontal" Margin="0,5,0,0"> <StackPanel> <dataFormToolkit:DataForm x:Name="formulaire" > </StackPanel> <StackPanel Width="850"> <chartingToolkit:Chart x:Name="graphique" /> </StackPanel> </StackPanel> <StackPanel x:Name="Panel2" Margin="5,5,5,0" > <data:DataGrid x:Name="tableau" MaxColumnWidth="150" HorizontalAlignment="Center" AutoGenerateColumns="True" /> <data:DataPager/> </StackPanel>

17/08/2010, 13h01
Pragmateek

Ton layout serait sans doute mieux rendu avec une Grid à deux colonnes et deux lignes :
la première colonne de largeur "Auto", la seconde de largeur "*".
Et la DataGrid de la deuxième ligne utiliserait un ColumnSpan de 2.

Effectivement ce serait beaucoup plus simple avec une Grid... Le StackPanel prend toujours la largeur de son contenu, on ne peut pas facilement lui faire occuper l'espace restant.

Tu peux faire quelque chose comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
 
    <dataFormToolkit:DataForm  x:Name="formulaire" Grid.Row="0" Grid.Column="0">
    <chartingToolkit:Chart x:Name="graphique"  Grid.Row="0" Grid.Column="1" />
    <StackPanel x:Name="Panel2" Margin="5,5,5,0"
                Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
        <data:DataGrid x:Name="tableau" MaxColumnWidth="150" HorizontalAlignment="Center" AutoGenerateColumns="True" />
        <data:DataPager/>
    </StackPanel>
 
</Grid>

Soit dit en passant, ça sert à rien d'utiliser un StackPanel si c'est pour y mettre un seul élément ;)

Si tu veux pas t'embêter avec les RowDefinitions/ColumnDefinitions, tu peux utiliser cette Grid simplifiée. C'est pour WPF, mais y a pas de raison que ça marche pas en SL il me semble... Ca s'utilise comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
<my:SimpleGrid Rows="Auto,Auto" Columns="Auto,*">
    <dataFormToolkit:DataForm  x:Name="formulaire" Grid.Row="0" Grid.Column="0">
    <chartingToolkit:Chart x:Name="graphique"  Grid.Row="0" Grid.Column="1" />
    <StackPanel x:Name="Panel2" Margin="5,5,5,0"
                Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
        <data:DataGrid x:Name="tableau" MaxColumnWidth="150" HorizontalAlignment="Center" AutoGenerateColumns="True" />
        <data:DataPager/>
    </StackPanel>
 
</my:SimpleGrid>

merci de vos réponse

en effet j'ia tester avec un grid et un premier test simple a montrer le resultat souhaité.
code :
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 <Grid x:Name="LayoutRoot" Background="Blue"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" MinWidth="30" MaxWidth="150"></ColumnDefinition> <ColumnDefinition Width="*" ></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> </Grid.RowDefinitions>  <StackPanel Grid.Column="0" Grid.Row="0"> <TextBlock Text="Selectionnez: " FontWeight="bold" ></TextBlock> <ListBox x:Name="listebox" SelectionMode="Single" MaxHeight="100"/> <Button x:Name="btnTest" Width="200" Height="30" Content="Text" ></Button> </StackPanel> <StackPanel Grid.Column="1" Grid.Row="0"> <Button x:Name="btnTest2" Height="30" Content="Text"></Button> </StackPanel> <Button x:Name="btnTest3" Height="30" Content="Text" Grid.ColumnSpan="2" Grid.Row="1"></Button>  </Grid> </navigation:Page>
en effet ce n'est pas très util d'utiliser des stackpanel pr un seul élément (je met juste dans mon exmple, le premier stack panel a 3 elemetn, donc ok , le 2eme en a qu'un seul mais le stack panel permet automatiquement d'aligner en au a gauche de la case donc c tout ^^

En revanche je suis sur un projet silverlight de type navigation, or j'avai déjà remarqué qu'il était + difficile d'utiliser les grid avec ce type de projet. exemple simple ou mettre ma balise <ScrollViewer> si je le met au mme endroit qu'avant (tout de suite apres la balise grid) bah la j'ai un probleme de "content is set more than once..."

(ps : pr le simplegrid je vais jeter un coup d'oeil pr voir si c'est lourd a faire ou non car je trouve ça pratique, néanmoins ça ne pose pas de pb quant aut style des page? de base quand on cré une nouvelle page c'est :
Code:

1 2 3 4 5 6 7 8 9 10 11 <navigation:Page x:Class="testGrid.About" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...> <Grid x:Name="LayoutRoot"> <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}"> <StackPanel x:Name="ContentStackPanel"> <TextBlock ..."/> </StackPanel> </ScrollViewer> </Grid> </navigation:Page>

17/08/2010, 15h47
tomlev

Citation:

Envoyé par livinho38

En revanche je suis sur un projet silverlight de type navigation, or j'avai déjà remarqué qu'il était + difficile d'utiliser les grid avec ce type de projet. exemple simple ou mettre ma balise <ScrollViewer> si je le met au mme endroit qu'avant (tout de suite apres la balise grid) bah la j'ai un probleme de "content is set more than once..."

Ben c'est pas spécifique aux projets de type navigation... le problème serait le même dans n'importe quel type de projet.

Citation:

Envoyé par livinho38

(ps : pr le simplegrid je vais jeter un coup d'oeil pr voir si c'est lourd a faire ou non car je trouve ça pratique, néanmoins ça ne pose pas de pb quant aut style des page? de base quand on cré une nouvelle page c'est :

Ah ben oui, il faut modifier la page générée automatiquement... d'un autre côté, tu n'es pas obligé de remplacer TOUTES les grilles par des SimpleGrid, tu peux le faire au cas par cas.
17/08/2010, 15h53
livinho38

Citation:

Ben c'est pas spécifique aux projets de type navigation... le problème serait le même dans n'importe quel type de projet.

oui oui en effet, je dit ça pour dire que ce j'ai pas juste un module mais toute une page , donc le scroll est obligatoire.

as - tu une solution dans ce cas la ?

et pour le grid ca change peut etre pas beaucoup pour 1 page mais a plus grande echelle, donc je vais voir et le tester dans tout les cas parce que (peutt etre pas dans mon cas je sais pas) ça a l'air bien interessant

j'ai tester de metre le scroll de cette façon :
Code:

1 2 3 4 <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}" MouseWheel="PageScrollViewer_MouseWheel"> <Grid x:Name="LayoutRoot"> </Grid> </ScrollViewer>
a premiere vue ça a l'air de fonctionner mais étant données que de base les balise sont inversées je pense que ce n'est pas bien de faire comme sa...
?

17/08/2010, 23h08
tomlev

comment ça "les balises sont inversées" ? Je ne vois pas où est le problème...

alors c'est pas vrmt un probleme (vu que sa marche) mais + une question de savoir si ça se fait (si c'est correct)

d'ordinaire (lors de la creation d'une page) les balises sont comme sa :
Code:

1 2 3 4 5 6 7 8 <grid> <ScrollViewer> <stackpanel 1></stackpanel 1> <stackpanel 2></stackpanel 2> <stackpanel n></stackpanel n> <ScrollViewer> <grid>
et la pour pouvoir spécifier dans quel colonne et row je place mes stackpanel je suis Obliger de mettre les balise comme sa :
Code:

1 2 3 4 5 6 7 8 <ScrollViewer> <grid> <stackpanel 1 grid.column="0" grid.row="0"></stackpanel 1> <stackpanel 2 grid.column="1" grid.row="0"></stackpanel 2> <stackpanel n grid.columnSpan="2" grid.row="1"></stackpanel n> <grid> <ScrollViewer>
donc voila je sais pas si c'est un problème ou pas?

18/08/2010, 00h46
tomlev

Citation:

Envoyé par livinho38

donc voila je sais pas si c'est un problème ou pas?

Non. D'ailleurs le premier exemple que tu donnes ne peut pas fonctionner, un ScrollViewer ne peut avoir qu'un seul élément enfant. Il faut un Panel (Grid, StackPanel ou autre) pour regrouper les éléments
18/08/2010, 09h12
livinho38

en effet jai oublier dans le premier exemple de mettre un stack panel qui englobe les 3 autres ;)

bon alors je te fait confiance et je laisse mon scroll entourer mon grid ;)

merci bien!!!!!

petite question tout de meme, le dimensionnement marche bien pour la ligne 1 cependant pour la ligne 2 j'ia un datagrid dedans... et la gros probleme la taille du datagrid ne respecte pas du tout les dimensions que je souhaite, jai testé avec des minwidht maxwidth etc etc mais quand je reduit la taille de la fenetre le datagrid lui reste rigide.... une solution à ça ?
18/08/2010, 10h06
tomlev

Citation:

Envoyé par livinho38

tite question tout de meme, le dimensionnement marche bien pr la ligne 1 cependant pr la ligne 2 j'ia un datagrid dedans... et la gros probleme la taille du datagrid ne respecte pas du tout les dimension que je souhaite, jai tester ac des minwidht maxwidth etc etc mais kan je reduit la taille de la fenetre le datagrid lui reste rigide.... une solution à ça ?

Ben si tu mets le DataGrid dans un ScrollViewer, c'est normal... il va afficher les barres de défilement plutôt que de redimensionner. Si tu veux que le DataGrid se redimensionne avec la fenêtre, il faut pas le mettre dans un ScrollViewer
18/08/2010, 10h10
cinemania
ScrollViewer est un composant comme l'est Border, il ne s'attend à avoir qu'un seul et unique enfant, de type composant ou un layout container, genre Grid ou StackPanel.

donc si tu veux dans ta page écrire
Code:

1 2 3 4 5 6 7 <Page ....> <ScrollViewer> <Grid> </Grid> </ScrollViewer> </Page>
cela n'a absolument rien de choquant... Rien d'ailleurs ne t'interdit d'utiliser autre chose qu'une Grid comme layout principal pour ton rendu de page, c'est juste que c'est le plus couramment utilisé dans ce cas précis.
18/08/2010, 10h52
livinho38

Citation:

il faut pas le mettre dans un ScrollViewer

euh oué mais moi je veux pouvoir naviguer dans ma page ... donc il me faut ce scrollviewer...
surtout que je reflechissais a mettre mon formulaire et mon graph (ligne 1 du tableau) en dehors du scroll pour avoir que le tableau dans le scroll (ce qui permet quan on décend voir les ligne plus basse du tableau de garder à l'écran le graph et le formulaire...

donc moi c'est juste au niveau de la largeur qu'il ne faut qu'il sadapte (sa hautreur est fixe grace à une pagination de 50 ligne max