Discussion :

[Phoenix07]

Bonjour,

Etant gros novice en c#/wpf j'ai quelques soucis pour mon application au niveau de l'affichage avec wpf.

Code xaml :

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
 
<Grid>
<ItemsControl ItemsSource="{Binding ListeNetwork}" FontWeight="Normal">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate >
 
                <DataTemplate >
                    <ContentControl Content="{Binding}" VerticalAlignment="Top" HorizontalAlignment="Left">
                        <ContentControl.Resources>
                            <DataTemplate DataType="{x:Type local:Switch}">
                                <TextBox Height="20" Width="20" Text="{Binding NumSwitch}" Margin="50,50,50,50" />
                            </DataTemplate>
</ContentControl.Resources>
                    </ContentControl>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

Avec ce petit bout de code, j'ai un affichage comme ceci :
1 2 3 4

Alors que moi je voudrais plutôt quelque chose comme ça :
1 2

3 4

et je ne sais pas comment faire.

Merci

[koyot3]

Salut Phoenix,

Ton StackPanel a une orientation horizontale, ce qui explique ta ligne de chiffre.
Tu peux essayer de regarder avec les autres panels (WrapPanel, DockPanel par exemple) pour voir si tu en trouves pas un qui répond plus à tes attentes...

Par exemple, le WrapPanel va aligner tes chiffres en fonction de la taille disponible. En lui définissant une taille, tu pourra en avoir 2 par ligne.

Bon courage !

[Phoenix07]

Salut koyot3,

Merci pour ta réponse.
En fait un collègue m'a bidouillé un converter donc l'affichage se fait correctement et avec les liens :



Maintenant je cherche à rajouter les équipements appropriés pour chaque switchs comme l'image ci dessous :



Et ça je sais vraiment pas faire.
Le principe de l'application c'est que je lis un fichier texte, je crée une liste de networkelement que je remplis avec des switchs, des equiepements et des liens et ensuite j'aimerai faire le tracer en wpf pour obtenir l'image du dessus.

[koyot3]

Re,

Ah bah là je te conseille de passer par un Canvas pour dessiner tes différentes bulles pour ton switch sachant que tout en dynamique...
Va y avoir un peu de boulot pour faire ton "organigramme"

Soit tu fais tout en WPF, sous tu passes par un dessin en background (Graphics, Drawlines) et tu stockes le résultat en Image que tu affiches.
On avait fait des tests sur une appli et il s'avère que lorsqu'il y a beaucoup a dessiné, la deuxième solution est plus rapide, ce qui n'est pas forcément ton cas !

Reprend le converter de ton collègue, je pense que c'est une bonne base pour le dessin

Bon courage

[Phoenix07]

Le problème c'est que j'y connais tellement rien en WPF... et en C# j'ai commencé ya pas longtemps.

Le converter c'était pour positionner les switch et faire le calcule des points pour le tracer des traits.

[MABROUKI]

bonjour phoenix07
Ton StackPanel est en fait un WrapPanel (comme l'as dit koyot3) qui revient à la ligne tous les 2 elements....
Maintenant revenons à ton probleme :tu utilises un ItemsControl qui affiche une classique liste de NetworkElement qui a une classique sous-liste Switches...
Seul un modele logique hierarchique comme le TreeVeiw ou MenuItem peuvent afficher une liste de liste(ils sont derives de HeaderedItem et non de ItemsControl) .
Mais toi tu utilise un ItemsControl qui ne peut afficher qu'une simple liste avec WrapPanel customise(ton stackpanel) .....
Mais en regardant les choses sous un autre angle non pas intuitif "visuel" mais logique et moins routinier ,que penses-tu si on cree une ListAncestor qui store une instance ElementNetwork suivi de une instance ListSwitches... ElementNetwork et ListSwitches ayant un ClassAncestor commun.....

Si en plus on store l'instance ListSwitches en premier et l'instance ElementNetwork en second la simple ListAncestor "fourguee" au ItemControl contiendrait visuellement un control SubItem Switch suivi d'un control SubItem NetworkElement ....
Notons au passage que -ceci t'obligerait à revenir à 4 elements au lieu de 2 avec un StackPanel si tu veux avoir 2 NetworkElement par ligne-........
Bref dans le code qui suit ou je prefere utilise un custom WrapPanel qui revient à la ligne à chaque fois que le nombre d'elements depasse 4
on utilises 2 simples DataTemplates en resources un pour ListSwitches et un pour ElementNetwork et on donne au itemsControl en entre la Liste Ancetre Items.......Si utilise toujours ton StackPanel c'est zero code-behind mis à part de revoir legerement la conception de ta liste ........
code behind du custom wrappanel:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
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;
 
namespace WpfWrapPanelMini
{
 
    public class WrapPanelMinimum : WrapPanel
    {
        static WrapPanelMinimum()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(WrapPanelMinimum), new FrameworkPropertyMetadata(typeof(WrapPanelMinimum)));
        }
        //simple passe de mesure des childs qui marche pour n'importe quel wrappanel
        //et qui ne change rien à notre wrapanel 
        protected override Size MeasureOverride(Size availableSize)
        {
            Size resultSize = new Size(0, 0);
 
            foreach (UIElement child in Children)
            {
                child.Measure(availableSize);
                resultSize.Width = Math.Max(resultSize.Width, child.DesiredSize.Width);
                resultSize.Height = Math.Max(resultSize.Height, child.DesiredSize.Height);
            }
 
            resultSize.Width = double.IsPositiveInfinity(availableSize.Width) ?
                resultSize.Width : availableSize.Width;
 
            resultSize.Height = double.IsPositiveInfinity(availableSize.Height) ?
                resultSize.Height : availableSize.Height;
 
            return resultSize;
        }
        // dans la passe de disposition on va lui 
        // demander de sauter à la ligne suivante chaque fois que le nombre 
        // d'enfants depasse 4 à savoir 2 x (switch + networkelement) 
        protected override Size ArrangeOverride(Size finalSize)
        {
            if (this.Children == null || this.Children.Count == 0)
                return finalSize;
 
            double curX = 0; 
            double curY = 0;
            double curLineHeight = 0;
            //nbre de childs item
            int nbChild = 0;
            foreach (UIElement child in Children)
            {
                if (nbChild > 3)
                { 
                    //Wrap to next line
                    curY += curLineHeight;
                    curX = 0;
                    curLineHeight = 0;
                    nbChild = 0;
                }
 
                child.Arrange(new Rect(curX, curY, child.DesiredSize.Width,
                    child.DesiredSize.Height));
 
                curX += child.DesiredSize.Width;
                nbChild = nbChild + 1;
                if (child.DesiredSize.Height > curLineHeight)
                    curLineHeight = child.DesiredSize.Height;
            }
 
            return finalSize;
 
        }
    }
}

code xaml du winform:

Code xaml :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
<Window x:Class="WpfWrapPanelMini.MainWinWrapPanelMinimum"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfWrapPanelMini"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <!--simple animation couleur ellipse des switches suite à un click gauche-->
        <Style 
            x:Key="TriggerEllipse" 
            TargetType="{x:Type TextBlock}">
            <Setter Property="Opacity" Value="0.25" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver"  Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetProperty="Opacity"
                                    To="1" Duration="0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetProperty="Opacity"
                                    To="0.25" Duration="0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
        <!--DataTemplate du ListSwitches-->
        <DataTemplate DataType="{x:Type local:ListSwitches}">
            <!--mets des marges regulieres de 10 -->
            <StackPanel Margin="10">
                <!--un grid pour superposer rectangle et texte
                width=* strecthe suivant rectangle
                le rectangle streche suivant texte-->
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Rectangle 
                        Fill="Blue"
                        Stroke="Black" 
                        StrokeThickness="2">
                    </Rectangle>
                    <!--margin pour centrer texte dans rectangle
                    pas de background color => transparent-->
                    <TextBlock 
                        Margin="10"
                        FontSize="16"
                        Text="{Binding ElementName}" />
                </Grid>
                <ItemsControl 
                    x:Name="itemsControlSW"
                    ItemsSource="{Binding NamedSwitches}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate >
                            <StackPanel>
                                <!--meme observation que ci-avant-->
                                <Grid >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Ellipse 
                                        x:Name="myEllipse"
                                        Stroke="Black" 
                                        StrokeThickness="2">
                                        <Ellipse.Fill>
                                            <SolidColorBrush x:Name="MyAnimatedBrush" Color="CornflowerBlue" />
                                        </Ellipse.Fill>
                                        <Ellipse.Triggers>
                                            <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation
                                                            Storyboard.TargetName="MyAnimatedBrush"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="0.0" Duration="0:0:0.5" AutoReverse="True" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Ellipse.Triggers>
                                    </Ellipse>
                                    <TextBlock 
                                        Margin="10" 
                                        IsHitTestVisible="False"
                                        FontSize="16"
                                        Text="{Binding Name}" >
                                     </TextBlock>
                                </Grid>
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
        <!--DataTemplate du NetworkElement-->
        <DataTemplate DataType="{x:Type local:NetworkElement}">
            <!--mets des marges regulieres de 10 identiques a ceux des switches 
            pour eviter un decalage entre NetworkElement & son item Switch-->
            <!--sauf droite  une marge de 100 pour eloigner 2eme NetworkElement du 1er et aerer-->
            <Grid Margin="10,10,100,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Rectangle
                    Stroke="Black" 
                    Fill="Red"
                    StrokeThickness="2">
                </Rectangle>
                <TextBlock 
                    Margin="10,100,10,100"
                    FontSize="16"
                    Foreground="WhiteSmoke"
                    Text="{Binding ElementName}" />
            </Grid>
        </DataTemplate>
    </Window.Resources>
 
    <Grid 
        x:Name="LayoutRoot">
        <ScrollViewer
            ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ItemsControl 
                x:Name="ItemsControlRoot" 
                Height="1600"
                ScrollViewer.VerticalScrollBarVisibility="Auto"
                ItemsSource="{Binding Items}">
                <!--custom WrapPanelMinimum qui wrappe tous les 4 elements & non les 2 !-->
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <local:WrapPanelMinimum
                                        Orientation="Horizontal"
                                        IsItemsHost="True">
                        </local:WrapPanelMinimum>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Window>

code-behind du winform & class NetworkBase ,NetworkElement , ListSwitches:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
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.Collections.ObjectModel;
 
namespace WpfWrapPanelMini
{
    /// <summary>
    /// Logique d'interaction pour Window1.xaml
    /// </summary>
    public partial class MainWinWrapPanelMinimum : Window
    {
        public MainWinWrapPanelMinimum()
        {
            InitializeComponent();
            Utility();
            this.ItemsControlRoot.ItemsSource = Items;
        }
        //proprietes Items
        public ObservableCollection<BaseNetwork> Items { get; set; }
 
        // procedure utility pour l'exemple
        private void Utility() 
        {
            ListSwitches  lstSw  ;
            NetworkElement nt;
            NamedSwitch nameSW ;
            Items = new ObservableCollection<BaseNetwork>();
 
            Random rnd = new Random();
            for (int i = 0; i < 10; i++)
			{
                nt = new NetworkElement ();
                nt.ElementName="NetworkElement" + (i + 1).ToString();
 
                lstSw = new ListSwitches ();
                lstSw.ElementName= "Switches";
                lstSw.NamedSwitches= new ObservableCollection<NamedSwitch>();
 
                for (int j = 0; j < rnd.Next (1,5); j++)
			    {
                    nameSW = new NamedSwitch("sw" + (j + 1).ToString());
                    lstSw.NamedSwitches.Add(nameSW);
			    }
                //l'ordre de stockage est important car il trompera notre "ennemi" itemsControl
                //ajout en premier l'objet ListSwitches 
                Items.Add(lstSw);
                //ajout en second l'objet NetworkElement
                Items.Add(nt);
            }
        }
    }
    //Nos classes BaseNetwork,NetworkElement et  ListSwitches
 
    //Base classe
    public abstract class BaseNetwork
    {
        public string ElementName { get; set; }
    }
    //NetworkElement Herite base 
    public class NetworkElement : BaseNetwork
    {
    }
    //ListSwitches Herite base 
    public class ListSwitches : BaseNetwork
    {
        public ObservableCollection<NamedSwitch> NamedSwitches { get; set; }
    }
 
    //simple classe des switches 
    public class NamedSwitch 
    {
        public NamedSwitch(string lbl)
        {
            Name = lbl;
        }
        public string Name { get; set; }
    }
}

bon code.........