Discussion :

[ypelissier]

Bonjour,
J'ai un problème d'affichage avec WPF j'ai fait une présentation d'une liste d'objet qui ont eux-même une liste d'un autre objet.
J'ai donc fait un groupe qui contient un en-tête et une liste représenté par 2 labels et une zone de texte saisissable.

Voici le code :

Code c# :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
using System.Windows;
 
namespace WpfApp6
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new Group[]
                {
                    new Group
                    {
                        Name = "TestGroup111",
                        Tests = new Test[]
                        {
                            new Test { Name = "Test1", Value = 5, Symbole = "%" },
                            new Test { Name = "Test1Test", Value = 105, Symbole = "mm/s" },
                            new Test { Name = "Test1ff", Value = 15, Symbole = "i" }
                        }
                    },
                    new Group
                    {
                        Name = "TestGroup222",
                        Tests = new Test[]
                        {
                            new Test { Name = "Test2", Value = 25, Symbole = "%" },
                            new Test { Name = "Test2Test", Value = 135, Symbole = "mm/s" },
                            new Test { Name = "Test2ff", Value = 45, Symbole = "i" }
                        }
                    }
                };
        }
    }
 
    public class Group
    {
        public string Name { get; set; }
        public Test[] Tests { get; set; }
    }
 
    public class Test
    {
        public string Name { get; set; }
        public int Value { get; set; }
        public string Symbole { get; set; }
    }
}

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<Window x:Class="WpfApp6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp6"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="ListBoxDataTemplate">
            <GroupBox Header="{Binding Name}">
                    <ItemsControl Name="icTodoList" ItemsSource="{Binding Tests}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="0,0,0,5">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <Label Content="{Binding Name}"/>
                                    <TextBox Grid.Column="1" Text="{Binding Value}"/>
                                    <Label Grid.Column="2" Content="{Binding Symbole}"/>
                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
            </GroupBox>
        </DataTemplate>
        <ItemsPanelTemplate x:Key="ListBoxItemsPanelTemplate">
            <StackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </Window.Resources>
    <Grid>
        <ItemsControl Name="Measure"
                      ItemsSource="{Binding}"
                      ItemTemplate="{StaticResource ListBoxDataTemplate}"
                      ItemsPanel="{StaticResource ListBoxItemsPanelTemplate}"
                      VerticalAlignment="Center"/>
    </Grid>
</Window>

Là tout est bon, ça fonctionne, tout est bien aligné joli et tout ça... Mais on me demande de mettre les groupes côte à côte plutôt que l'un sur l'autre.

Pas de soucis réponds-je, il suffit de de changer l'orientation du StackPanel en Horizontal et hop c'est fait...

Sur le fond, c'est fait mais non, voilà la tête des groupes...


Rien n'est aligné comme avant...

Qu'est-ce que j'ai raté ? Et surtout comment faire en sorte que ce soit tout beau tout joli mais cote à cote ???

Merci pour vos idées.

P.S. : Sachant qu'il y aura du multi-langue en dessous et que je ne pourrais pas fixer les tailles à l'avance.

[popo]

Ah les ergonomes...
Ils ont toujours de bonnes idées mais des fois, il faut les recadrer sur ce qu'ils imaginent et sur la réalité.
Le libellé dont la taille peut potentiellement être beaucoup plus grande que ce qu'il avait prévu (surtout dans certaines langues) est ce avec quoi je me bats de manière régulière avec les ergonomes de ma boîte.

Sachant qu'il y aura du multi-langue en dessous et que je ne pourrais pas fixer les tailles à l'avance.

Les options sont variées mais n'étant pas trop familier avec WPF je ne sais pas si ces options sont réalisables
- Jouer sur la taille du conteneur
- Ancrer la partie gauche et la partie droite (on peut supposer que les chiffres ne changeront pas suivant la langue, par contre faut voir jusqu'à quelle longueur ils peuvent aller.
- Définir une taille maximale pour chaque zone (même si cela revient un peu à définir une longueur fixe).
- Il me semble qu'en WPF vous avez un truc du genre LayoutMachinCHose

[Noxen]

En fait il est possible de gérer ça de façon native en WPF via la propriété SharedSizeGroup définie sur les ColumnDefinition et les RowDefinition. Tous les éléments d'une Grid possédant la même valeur de SharedSizeGroup (une string respectant, pour faire simple, le format d'une propriété, c.à.d : que des lettres, des chiffres, des underscores, ne commence pas par un chiffre) partageront leurs valeurs de layout, comme leurs valeurs de Width.

Il me semble qu'il faut aussi définir la propriété attachée Grid.IsSharedSizeScope sur leur conteneur, par exemple l'ItemsControl ou le GroupBox de ton DataTemplate. Il est possible qu'il y ait des petites différences selon l'endroit où tu définie cette valeur. Du style : si cette valeur est "settée" sur l'ItemsControl du DataTemplate ("icTodoList") ça s'appliquera individuellement sur chaque DataTemplate, alors que si elle est "settée" sur l'ItemsControl global ("Measure") les valeurs seront communes à tous les éléments de la page ; mais je dis ça sans avoir vérifié, peut-être que tes tests me donneront tort.

En espérant que ça réponde bien à ton besoin.

[ypelissier]

Je m'estime débutant encore sur WPF bien qu'ayant bien compris comment l'utiliser mais pas encore assez familier avec les objets.

Je me suis également aidé de cet exemple après une recherche sur internet.

Au lieu de mettre dans un Grid, je l'ai mis dans un DockPanel

Code XML :

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

<DockPanel Grid.IsSharedSizeScope="true" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10">

mais dans un Grid ça marche aussi...
Au final voici le résultat :


C'est exactement ce qui était recherché.

Un grand merci Noxen