WPF - Utilisation Grid dynamique

Version imprimable

Bonjour à tous.

Pour mon application, j'ai créé un contrôle personnalisé. Je veux l'insérer dans ma form WPF autant de fois que j'ai des lignes dans une table SQL.

J'ai créé une grid et j'aimerais savoir comment créé la grid dynamiquement, au fur à mesure que j'ai des lignes dans SQL.

J'aimerais disposer mes éléments en 2 colonnes et autant de lignes que nécessaire de la façon qui suit :
A / B
C / D
E /F
...

Voici ma boucle actuelle avec en dernière ligne de code grDatas.Children.Add(ucOperation) --> C'est cette ligne qui ajoute mon contrôle préalablement rempli dans la Grid, mais comme je ne créé aucune colonne / ligne nul part alors il s'empilent tous l'un sur l'autre.

Merci !

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
for (int i = 0; i < dvOps.Count; i++)
            {
                CL_Operation clOp = new CL_Operation();
 
                clOp.A= dvOps[i]["A"].ToString().Trim();
                clOp.B= dvOps[i]["B"].ToString().Trim();
                clOp.C= dvOps[i]["C"].ToString().Trim();
                clOp.D= dvOps[i]["D"].ToString().Trim();
                clOp.E= dvOps[i]["E"].ToString().Trim();
                clOp.F= dvOps[i]["F"].ToString().Trim();
                clOp.G= Convert.ToString(Convert.ToDouble(String.Format("{0:0}", dvOps[i]["G"].ToString().Trim()))) + " pces";
                clOp.H = Convert.ToString(Convert.ToDouble(String.Format("{0:0.00}", dvOps[i]["H"].ToString()))) + " Hrs";
                clOp.I = dvOps[i]["I"].ToString().Trim();
                clOp.J= dvOps[i]["J"].ToString();
                clOp.K= dvOps[i]["K"].ToString();
                clOp.L = dvOps[i]["L"].ToString();
 
                lstOperations.Add(clOp);
 
                Operations ucOperation = new Operations();
                //ucOperation.NoOfOp =
                ucOperation.A.Content = clOp.A+ " - " + clOp.B;
                ucOperation.C.Content = clOp.C;
                ucOperation.D.Content = clOp.D;
                ucOperation.E.Content = clOp.E;
                ucOperation.F.Content = clOp.F;
                ucOperation.G.Content = clOp.G;
                ucOperation.H.Content = clOp.H;
                ucOperation.J.Content = clOp.J;
                ucOperation.K.Content = clOp.K;
                ucOperation.L.Content = clOp.L;
                ucOperation.M= clOp.M;
 
                DateTime dt = Convert.ToDateTime(clOp.A);
                TimeSpan t = dtNow.Date - dt.Date;
 
                if (Convert.ToDouble(t.TotalDays) > 5)
                    ucOperation.A.Foreground = Brushes.Red;
                else if (Convert.ToDouble(t.TotalDays) < 6 && Convert.ToDouble(t.TotalDays) > -1)
                    ucOperation.A.Foreground = Brushes.Orange;
 
                ucOperation.A.Content = Convert.ToString(Math.Abs(Convert.ToDouble(t.TotalDays))) + " jrs";
 
                ucOperation.Margin = new Thickness(top, left, 0, 0);
 
                grDatas.Children.Add(ucOperation);
            }

Egalement, comme vous pouvez le voir, j'utilise une classe, que je remplis dans une liste pour chaque objet. J'espère que la manière de travailler est bonne !

12/09/2017, 07h58
Pol63

Wpf n'a rien à voir avec winform, il faut passer du temps à lire des cours pour comprendre les concepts.
Genre utiliser un usercontrol ca veut dire qu'on a pas compris le principe.
Il faut utiliser des datatemplates qui auront l'effet d'un usercontrol via les bindings
12/09/2017, 08h16
Fellerson

Merci pour ta réponse.

Je vais me renseigner là dessus, et oui je le cache pas j'ai aucune expérience sur WPF.

Salut Pol63.

J'ai bien compris maintenant comment afficher selon ma classe et les data Binding .... avec cette vidéo : https://www.youtube.com/watch?v=Q8IRFTq-wIc

Donc : code XAML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Plutus" x:Class="Plutus.MainWindow"
        Title="MainWindow" Height="350" Width="525" Background="#FF404040" WindowStartupLocation="CenterScreen" WindowState="Maximized">
 
 
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <Grid>
            <ContentControl Content="{Binding clOp}" />
        </Grid>
 
    </ScrollViewer>
 
</Window>

Code C Dièze :

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
public CL_Operation clOp { get; set; }
 
 
 
            for (int i = 0; i < dvOps.Count; i++)
            {
                clOp = new CL_Operation();
 
                clOp.A= dvOps[i]["A"].ToString().Trim();
                clOp.B= dvOps[i]["B"].ToString().Trim();
                clOp.C= dvOps[i]["C"].ToString().Trim();
                clOp.D= dvOps[i]["D"].ToString().Trim();
                clOp.E= dvOps[i]["E"].ToString().Trim();
                clOp.F= dvOps[i]["F"].ToString().Trim();
                clOp.G= Convert.ToString(Convert.ToDouble(String.Format("{0:0}", dvOps[i]["G"].ToString().Trim()))) + " pces";
                clOp.H = Convert.ToString(Convert.ToDouble(String.Format("{0:0.00}", dvOps[i]["H"].ToString()))) + " Hrs";
                clOp.I = dvOps[i]["I"].ToString().Trim();
                clOp.J= dvOps[i]["J"].ToString();
                clOp.K= dvOps[i]["K"].ToString();
                clOp.L = dvOps[i]["L"].ToString();
 
                this.DataContext = this;
 
                lstOperations.Add(clOp);
 
            }

Donc c'est top, mais malheureusement il ne m'affiche qu'un seul enregistrement de ma boucle. Comment être dynamique ?

Merci.

Bonjour,

je ne connais pas grand chose en WPF proprement dit, cependant, je développe des app avec Xamarin.Forms avec les IU en Xaml (bcp plus pauvre que le WPF).

Pour ton cas, coté Xaml, il faudrait ajouter un controle de type ListView.
L'un des avantages de ce contrôle est pouvoir être binder à un liste(ObservableCollection de préférence).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <ListView ItemsSource ="{Binding lstOperations}"> <ListView.ItemTemplate> <DataTemplate> // ici tu codes les données à afficher d'un de tes objets de la liste lstOperation // cette partie sera répétée autant de fois que d'objet dans ta liste. <StackPanel> <TextBlock Text="{Binding A}"/> // Binding sur les propriétés de ton objet <TextBlock Text="{Binding B}"/> // etc ... </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView>
Bref, je ne te donne pas la solution avec cette exemple mais plutôt une piste ...
Comme Pol63 l'a écrit, documente toi sur les DataTemplates mais aussi les ListView.

En espérant avoir pu aider un peu,
bonne journée.

12/09/2017, 10h21
Pol63

Il te faut un itemscontrol (listbox sans selection) avec itemsource sur la collection d'éléments, et itemscontrol.itemtemplate doit contenir le datatemplate pour un élément

Salut

Merci pour ta réponse. Effectivement je viens d'obtenir un résultat qui commence à me convenir avec

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
<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Plutus" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Plutus.MainWindow"
        Title="MainWindow" Height="350" Width="525" Background="#FF3A3939" WindowStartupLocation="CenterScreen" WindowState="Maximized">
 
    <ListView x:Name="lvDataBinding" HorizontalContentAlignment="Stretch" BorderThickness="0" Margin="10" Grid.Row="3" Background="{x:Null}" ItemsSource="{Binding}" Foreground="White">
        <ListView.ItemTemplate>
            <DataTemplate DataType="{x:Type local:CL_Operation}">
                <Border BorderBrush="White" BorderThickness="0" CornerRadius="3" Margin="0,3" Grid.ColumnSpan="4" Background="Transparent">
                    <Border.Effect>
                        <DropShadowEffect BlurRadius="5" ShadowDepth="5" />
                    </Border.Effect>
                    <Grid Background="Transparent" Margin="0,1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition Width="1.5*"/>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="60"/>
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Vertical" Margin="50,5" >
                            <!-- <TextBlock Text="Customer" Foreground="#33B6EF" FontSize="20" />-->
                            <TextBlock Text="{Binding A}" FontSize="20" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Grid.Column="1">
                            <!-- <TextBlock Text="Location" Foreground="#33B6EF" FontSize="20" />-->
                            <TextBlock Text="{Binding B}" FontSize="20" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Grid.Column="2">
                            <!-- <TextBlock Text="Created On" Foreground="#33B6EF" FontSize="20" />-->
                            <TextBlock Text="{Binding C}" FontSize="20" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Grid.Column="3">
                            <!-- <TextBlock Text="Quantity" Foreground="#33B6EF" FontSize="20" /> -->
                            <TextBlock Text="{Binding D}" FontSize="20" />
                        </StackPanel>
                    </Grid>
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Window>

J'ai bien autant de blocs que j'ai de lignes dans ma table SQL. Résultat très proche de https://stackoverflow.com/questions/...d-template-wpf

Cependant, maintenant, comment mettre des conditions sur les champs, > X ou < Y alors rouge sinon blanc, etc, etc. J'ai un grand manque d'expérience dans WPF.

Comment rendre qu'une partie de la grille cliquable et retourner une valeur .... etc.

EDIT Pol63 : j'ai réussi avec la méthode ci-dessus, mais aussi avec celle-ci :

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
<Window.Resources >
        <DataTemplate DataType="{x:Type local:CL_Operation}" >
            <Border BorderThickness = "1" BorderBrush = "Green" Margin = "2" Padding = "5" Width = "900" CornerRadius = "3" >
                <Grid >
                    <Grid.ColumnDefinitions >
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions >
                    <TextBlock Grid.Column = "0" Text = "{Binding Path = A}" Background = "LightBlue" />
                    <!-- <TextBlock Grid.Column = "0" Text = "{Binding Path = B}" Background = "LightBlue" />-->
                    <TextBlock Grid.Column = "1" Text = "{Binding Path = C}" Background = "LightBlue" />
                    <TextBlock Grid.Column = "2" Text = "{Binding Path = D}" FontStyle = "Italic" />
                </Grid >
            </Border >
            <DataTemplate.Triggers >
                <DataTrigger Binding = "{Binding Path = strRetardAvanceText}" Value = "26 jrs" >
                    <Setter Property = "ListBoxItem.Foreground" Value = "Red" ></Setter >
                </DataTrigger >
            </DataTemplate.Triggers >
        </DataTemplate >
    </Window.Resources >
    <Grid >
        <ListBox x:Name = "listBox1" ItemsSource = "{Binding}" />
    </Grid >

Cependant, quelle est la meilleure ... ?? Comment bien placer mes blocs ? Comment rendre qu'une zone cliquable et pas toute la ligne, etc..

12/09/2017, 18h42
Fellerson

1 pièce(s) jointe(s)

Bonjour à tous

Voici le résultat que je souhaite obtenir en WPF.

Pièce jointe 311210