Question de Layout variable

Bonjour,

J'ai un écran qui affiche des nom de joueurs.
Jusqu'à un 5 joueurs j'en veux un nom par ligne. Et que ça prenne toute la largueur.

Si on a 6 joueurs ou plus, je souhaite que les noms soit mis en forme de tableau ?

Comment faire ça le plus proprement ?

Cas 1
Code:

1 2 3 4 Player 1 Player 2 Player 3 Player 4
Cas 2
Code:

1 2 3 Player 1 Player 4 Player 7 Player 2 Player 5 Player 8 Player 3 Player 6 Player 9
ou
Cas 2
Code:

1 2 3 Player 1 Player 2 Player 3 Player 4 Player 5 Player 6 Player 7 Player 8 Player 9
Merci de votre aide

Bonjour,
Il manque tout de même des informations, la hauteur contenant tes noms de joueurs est fixe/variable ? Donc du coup comment dois-tu les répartir verticalement.

Sinon la première chose qui me vient à l'esprit de simple c'est un wrappanel en jouant sur les propriétés orientation ou ItemHeight et ItemWidth selon le nombre de joueur.
Bref il y'a un paquet de solution possible

Le but est que le texte prenne le maximum de place. Sachant que la fenêtre n'a pas une taille fixe.
Tout est variable

utilise un wrap panel
mais le comportement risque pour le premier cas de pas correspondre
donc tu modifi le wrap panel pour que le comportement
soit le bon
sinon tu change le itempaneltemplate en fonction du nombre d'utilisateur en code

moi perso je ferais une classe qui changerais ca en fonction du nombre d'element

bonjour oberown...
Bien que la fonctionnalite desiree n'est pas bien connue dans le detaill....mais un custom panel UniformGrid pourrait repondre à la problematique....car le probleme pose est du ressort de la Disposition des elements et necessite d'intervenir dans "nArrangeOverride"....

simple code .cs du costum panel MyUniformGrid:

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
32
33
34
35
36
37
 
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Controls.Primitives;
 
namespace WpfTestGridItemsControl
{
 
    public class CustUniformGrid : UniformGrid
    {
        static CustUniformGrid()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustUniformGrid), new FrameworkPropertyMetadata(typeof(CustUniformGrid)));
        }
 
        protected override Size ArrangeOverride(Size arrangeSize)
        {
            //nbre lignes  dans uniformgrid => depend de la collection data 
            //redefinir le nbre de colonnes voulues
            this.Columns = this.InternalChildren.Count < 6 ? 1 : 3;
            return base.ArrangeOverride(arrangeSize);
        } 
 
 }
}

code .cs du simple class Person test:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
 
namespace WpfTestGridItemsControl
{
    public class Person
    {
        string _name;
        bool _canCode;
        int _number;
        public Person(string name, bool canCode,int n)
        {
            Name = name;
            CanCode = canCode;
            Number = n;
        }
        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }
        public bool CanCode
        {
            get { return _canCode; }
            set { _canCode = value; }
        }
        public int Number
        {
            get { return _number; }
            set { _number = value; }
        }
    }
    public class ListPerson : ObservableCollection<Person>
    {
        private Person p;
 
        public ListPerson()
        {
            for (int i = 0; i < 9; i++)
            {
                p = new Person("name" + i.ToString(), true,(i+1));
                this.Add(p);
 
            }
 
        }
 
    }
}

code xaml du winform utilisateur :
-2 boutons additem et removeitem pour voir le changement de disposition(layout) ...
-un texblock additionnel dans itemplate pour afficher le nombre de "columns" du grid à chaque ajout ou suppression d'tem (>5).....

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<Window x:Class="WpfTestGridItemsControl.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="clr-namespace:WpfTestGridItemsControl"
        Title="Window1" Height="500" Width="540">
    <Window.Resources>
        <local:ListPerson x:Key="datasource"></local:ListPerson>
    </Window.Resources>
    <DockPanel>
        <Button
            DockPanel.Dock="Top" 
            Background="Red" 
            FontSize="14"
            Foreground="White"
            Content="RemoveItem"
            x:Name="btnRemoveItem"
            Click="btnRemoveItem_Click">
        </Button>
        <Button
            DockPanel.Dock="Top" 
            Background="Red" 
            FontSize="14"
            Foreground="White"
            Content="AddItem"
            x:Name="btnAddItem"
            Click="btnAddItem_Click">
        </Button>
        <ScrollViewer DockPanel.Dock="Top" >
            <ListBox
                x:Name="lb"
                 ItemsSource="{StaticResource datasource}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                       <local:CustUniformGrid 
                            x:Name="MyGrid"
                            IsItemsHost="True" >
                        </local:CustUniformGrid>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate  DataType="{x:Type local:Person}">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock
                                Margin="5" 
                                Text="{Binding Name}">
                            </TextBlock>
                            <TextBlock
                                Margin="5" 
                                Text="{Binding Number}">
                            </TextBlock>
                            <TextBlock
                                Background="Red" 
                                FontSize="14"
                                Foreground="White"
                                Text="{Binding ElementName=MyGrid,Path=Columns}">
                            </TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </ScrollViewer>
    </DockPanel>
</Window>

code .cs du winform:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
 
namespace WpfTestGridItemsControl
{
    /// <summary>
    /// Logique d'interaction pour Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
 
        private void btnRemoveItem_Click(object sender, RoutedEventArgs e)
        {
           ListPerson l = (ListPerson) this.lb.Items.SourceCollection;
           if (l.Count > 0)
           {
               int indexitem = l.Count-1;
               l.RemoveAt(indexitem);
 
           }
 
 
        }
 
        private void btnAddItem_Click(object sender, RoutedEventArgs e)
        {
            ListPerson l = (ListPerson)this.lb.Items.SourceCollection;
            int indexitem = l.Count-1;
            Person p = new Person("NewName", true, indexitem++);
            l.Add(p);
 
        }
    }
}

bon code.....

Yeah !
Parfait merci !

J'ai remplacé le ScrollViewer par un Grid (pour ne plus avoir de scrollbar)
Et la listbox par un ItemsControl pour que les élèments ne soient plus clickable

- Comment faire pour que le nom prenne toute la place du ItemsControl.ItemTemplate?
Merci