Discussion :

[livinho38]

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 :

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

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>

[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.

[tomlev]

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 XML :

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
<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 XML :

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

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>

[livinho38]

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 :

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
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>
 
       <!-- <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}" MouseWheel="PageScrollViewer_MouseWheel">-->
 
        <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>
 
        <!--</ScrollViewer>-->
    </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 :

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

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>

[tomlev]

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.

(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.

[livinho38]

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

[livinho38]

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

Code :

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

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...
?

[tomlev]

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

[livinho38]

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 :

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

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 :

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

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?

[tomlev]

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

[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 ?

[tomlev]

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

[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 :

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

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.

[livinho38]

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