Control Utilisateur WPF/XAML

Version imprimable

18/12/2014, 11h31
Lionhart

1 pièce(s) jointe(s)

Control Utilisateur WPF/XAML

Bonjour,

Je me permets de demander de l'aide car jusqu'à maintenant j'ai travaillé principalement sur l'aspect fonctionnel plutôt que visuel de mon application.

Je cherche à réaliser une vue qui permettrait à un chef de service de voir le planning des personnes de son service.

Ainsi donc il pourra voir sur un mois qui travaille sur quel projet pendant le mois.

Ce qui m'amène à créer un(e) View/ViewModel composé d'une liste de personnes et aussi d'une liste de période de travail pour chacune d'elles.

Je voudrais réaliser quelque chose qui ressemble à ceci :
Pièce jointe 164208

Il s'agit d'un mix entre une timeline et un diagram de Gantt. (il n'y a pas l'aspect "ordre" ou "chemin critique"). Il s'agit du calendrier de la personne pour le mois en cours avec la liste des attributions au projet pour ce mois.

Je voudrais donc faire un tableau qui serait bindé sur la liste de personne + un contrôle graphique bindé sur les périodes de la personne.

N'ayant jamais réalisé de contrôle graphique ou même de template de ce genre, je requiers un peu d'aide.

J'ai trouvé ce genre de truc qui ressemble à ce que je veux mais c'est du payant et surtout de l'ASP...

ici : http://www.daypilot.org/demo/Lite/Scheduler/Month.aspx

Y a les source pour asp.

Merci d'avance pour vos réponses/coup de pouce.
05/01/2015, 09h52
theMonz31

sans maitriser WPF, je dirais que ton controle doit pouvoir se binder à des données et avec les templates exploitées
certaines informations...

sinon, il me semble qu'il existe des controles en Winforms qui font celà et que tu pourrais intégrer "facilement" dans ton application WPF.

Moi, je sais qu'un controle comme ça en winform, je le ferais assez rapidement (genre 1/2 journée)
05/01/2015, 10h47
theMonz31

1 pièce(s) jointe(s)

En winforms, en 1h, je t'ai fait un petit truc qui ressemble presque entièrement à ton besoin :)

Tiens, c cadeau... par contre, je te laisse améliorer le truc...

J'ai crée un controle TimeLiner qui te permet d'afficher une ligne avec date de début et de fin (classe TimeLine propriété Periode) et une liste de date
à inclure...

Tu compiles sous VS2012 et tu cliques sur le bouton et magie...

Je te laisse comprendre le truc qui est assez simple à comprendre !
05/01/2015, 11h56
Lionhart

J'ai déjà pensé à faire ça avec une timeline mais je n'ai pas trouvé le contrôle wpf.
De plus je ne sais pas comment faire pour faire apparaître mes rectangles(tâches) dessus...

merci beaucoup pour ton aide.
Je vais essayer de voir pour traduire en WPF.
05/01/2015, 12h01
theMonz31

tu peux embarquer du winform directement dans WPF... ça sera aussi efficace et rapide !
05/01/2015, 13h43
Lionhart

Sinon je recherche un tuto pour créer un contrôle comme je veux mais je trouve pas...
(je suis le seul développeur C# (débutant) dans mon entreprise donc je n'ai pas pu trouver conseil)
05/01/2015, 13h48
250rgv

Citation:

Envoyé par Lionhart

N'ayant pas trouvé ce que je voulais, je me permets de mettre un petit message pour savoir si quelqu'un aurait une idée de comment faire ?

Nécessite peut-être des adaptations/modifications mais quelques sources/contrôles/articles/etc...
ici
ici
ici
ici
ici

et ceci uniquement sur la première page de résultats
05/01/2015, 14h01
Lionhart

Il y a certains articles que j'ai déjà pu lire dans les liens que tu as donnés mais peux être un peu compliqué pour un néophyte...
(Le lien sur codeproject me paraissait sympa jusqu'à ce que je le télécharge, il ne ressemble plus du tout aux images du site...)
05/01/2015, 15h25
250rgv

Citation:

Envoyé par Lionhart

Il y a certains articles que j'ai déjà pu lire dans les liens que tu as donnés mais peux être un peu compliqué pour un néophyte...

Ben, il faut bien se lancer un jour ;D

Citation:

Envoyé par Lionhart

(Le lien sur codeproject me paraissait sympa jusqu'à ce que je le télécharge, il ne ressemble plus du tout aux images du site...)

Effectivement. Dans les commentaires explique que la copie d'écran est celle d'une implémentation de production "complétement stylée etc..), le source étant celui d'une version de base mais fonctionnelle.

Pour ceux que cela intéresse (ce n'est pas la présentation que tu cherche), dans les coms, Sacha Barber donne le lien sur controle TimeLine de sa conception....y m'énerve...:lol:
05/01/2015, 16h10
Lionhart

Citation:

Ben, il faut bien se lancer un jour ;D

oui, mon problème est par où (pour ce qui est de ce control).

Le truc c'est que ce qu'à fait theMonz31 m'intéresse vraiment beaucoup.

Je ne veut pas tout ce qui est du drag and drop etc... Je veux juste un affichage graphique qui soit bindé sur la liste des projets d'une personne...

En terme d'objet c'est déjà réalisé. J'ai mon objet personne avec sa liste d'affectation aux différents projet avec date début et date de fin.

Ce qui me pose réellement problème c'est juste le WPF et l'aspect graphique.

Sa fait 2 semaines que je cherche et je commence à un peu stresser de ne pas y arrivé...
05/01/2015, 16h46
theMonz31

1 pièce(s) jointe(s)

je te le dis :

intègre dans WPF mon controle :)

wpf-tutorial-using-winforms-in-wpf

Et une petite amélioration de mon exemple (gestion resizing + affichage du projet)...

et gestion de "Used" qui permet d'avoir une couleur si le projet est "utilisé" ou pas...
05/01/2015, 17h28
Lionhart

J'essaye de respecter mvvm mais je ne vois pas comment binder mon affaire au projet winform...

Je vais me pencher un peu plus sur la question et je reviendrais vers vous.

Merci pour votre aide précieuse.
06/01/2015, 02h51
MABROUKI

bonjour
Etant donne que tu es "en plein" modele hierarchique au vu de tes dires :

Citation:

une liste de personnes et aussi d'une liste de période de travail pour chacune d'elles.

ou "liste de listes" ,la 1ere idee qui vient à l'esprit c'est un TreeView dont le TreeViewItem est "customize" avec un ItemsPanel Canvas et un ItemContainerStyle gerant le positionnement du graphisme voulu....mais c'est moche !!! d'autant plus que tu veux un tableau -a part des P
le code complet pour la version treeview:

bonjour
Etant donne que tu es "en plein" modele hierarchique au vu de tes dires :

Citation:

une liste de personnes et aussi d'une liste de période de travail pour chacune d'elles.

ou "liste de listes" ,
La 1ere idee qui vient à l'esprit c'est un TreeView dont le TreeViewItem est "customize" avec un ItemsPanel Canvas et un ItemContainerStyle gerant le positionnement du graphisme voulu....mais c'est moche !!!
la 2eme idee c'est du "maitre/detail" avec 2 Listboxes le 1er binde à Persons et le 2eme "customise" (avec un ItemsPanel Canvas et un ItemContainerStyle gerant le positionnement du graphisme voulu) binde à Tasks
le code .cs des data exemple d'abord :
class Task:

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
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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Collections.ObjectModel;
 
namespace WpfGraphicPlannigBis
{
    public class Task : INotifyPropertyChanged
    {
 
        private DateTime thisDate = new DateTime(2015, 01, 01, 0, 0, 0);
        private DateTime dstDate = new DateTime(2015, 01, 31, 0, 0, 0);
        public Task()
        {
            _description = "Task";
            _startDate = new DateTimeOffset(thisDate, new TimeSpan(0, 0, 0));
            _endDate = new DateTimeOffset(dstDate, new TimeSpan(0, 0, 0));
            _personName = "PersonName";
        }
        public Task(string pdesc, DateTimeOffset t1, DateTimeOffset t2,int scale,string pname):this()
        {
            _description = pdesc;
            _startDate = t1;
            _endDate = t2;
            _scaleDuration = scale;
            _duration = _scaleDuration * (_endDate.Day - _startDate.Day);
            _x = ScaleDuration * _startDate.Day;
            _personName = pname;
        }
        private string _description ;
        public string Description
        {
            get { return _description; }
            set
            {
                _description = value;
                OnPropertyChanged("Description");
 
            }
        }
        private DateTimeOffset _startDate;
        public DateTimeOffset StartDate
        {
            get { return _startDate; }
            set
            {
                _startDate = value;
                OnPropertyChanged("StartDate");
 
            }
        }
        private DateTimeOffset _endDate;
        public DateTimeOffset EndDate
        {
            get { return _endDate; }
            set
            {
                _endDate = value;
                OnPropertyChanged("EndDate");
 
            }
        }
        private int _duration;
        public int Duration
        {
            get { return _duration; }
            set
            {
                _duration = value;
                OnPropertyChanged("Duration");
 
            }
        }
        //abscisse du jour de debut
        private int _x;
        public int X
        {
            get { return _x; }
            set
            {
                _x = value;
                OnPropertyChanged("X");
 
            }
        }
        private string _personName;
        public string PersonName
        {
            get { return _personName; }
            set
            {
                _personName = value;
                OnPropertyChanged("PersonName");
 
            }
        }
        //facteur d'echelle du graphisme
        private static int _scaleDuration = 50;
        public static  int ScaleDuration
        {
            get { return _scaleDuration; }
            set
            {
               _scaleDuration = value;
            }
        } 
        #region INotifyPropertyChanged Membres
 
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
        }
        #endregion
    }
    public class Tasks : ObservableCollection<Task>
    {
        public Tasks()
        { }
    }
}

class Person:

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
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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections.ObjectModel;
using System.ComponentModel;
 
namespace WpfGraphicPlannigBis
{
    public class Person : INotifyPropertyChanged
    {
        public Person()
        {
            _name = string.Empty;
            _tasks = new Tasks();
 
        }
        public Person(string pname)
            : this()
        {
            _name = pname;
        }
        private string _name;
        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                OnPropertyChanged("Name");
 
            }
        }
        private Tasks _tasks;
        public Tasks Tasks
        {
            get { return _tasks; }
            set
            {
                _tasks = value;
                OnPropertyChanged("Tasks");
 
            }
        }
 
        #region INotifyPropertyChanged Membres
 
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
        }
        #endregion
    }
    public class Persons : ObservableCollection<Person>
    {
        private Person p;
        private Task task;
 
        private DateTime thisDate;
        private DateTime dstDate;
        private DateTimeOffset startTime, endTime;
        private Random rndDuration = new Random();
 
        public Persons()
        {
            thisDate = new DateTime(2015, 01, 01, 0, 0, 0);
            dstDate = new DateTime(2015, 01, 31, 0, 0, 0);
 
            for (int i = 0; i < 10; i++)
            {
                p = new Person("Person" + i.ToString());
                startTime = new DateTimeOffset(thisDate, new TimeSpan(0, 0, 0));
                for (int j = 0; j < 7; j++)
                {
 
                    endTime = startTime.AddDays(rndDuration.Next(5, 6));
 
                    task = new Task("Task" + j.ToString(), startTime, endTime,Task.ScaleDuration,p.Name   );
 
                    p.Tasks.Add(task);
 
                    startTime = endTime;
                    if (startTime >=dstDate.Date) break;
                }
                this.Add(p);
            }
 
        }
 
    }
}

code xaml du usercontrol:

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<UserControl x:Class="WpfGraphicPlannigBis.ControlPersonBis"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
            xmlns:local="clr-namespace:WpfGraphicPlannigBis"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             >
    <UserControl.Resources>
        <!--personsListBox-->
        <DataTemplate x:Key="dataTemplate">
            <TextBlock Text="{Binding Path=Name}" />
        </DataTemplate>
        <!--communs-->
        <Style TargetType="StackPanel">
            <Setter Property="DockPanel.Dock" Value="Left"/>
            <Setter Property="Margin" Value="10,0,10,0"/>
        </Style>
        <Style TargetType="ListBox">
            <Setter Property="Height" Value="200"/>
        </Style>
        <Style TargetType="Label">
            <Setter Property="FontSize" Value="12"/>
        </Style>
        <!--tasksListBox-->
        <Style  TargetType="ListBoxItem">
            <Setter Property="Canvas.Left" Value="{Binding Path=X}"/>
            <Setter Property="Canvas.Top" Value="50"/>
        </Style>
        <DataTemplate 
            x:Key="dataTemplateGraphic"
            DataType="{x:Type local:Tasks}">
            <StackPanel  Orientation="Vertical"  >
                <TextBlock 
                    Margin="5"
                    Text="{Binding Description}"
                    ToolTipService.ToolTip="{Binding PersonName}">
                </TextBlock>
                <TextBlock 
                    Margin="5"
                    Text="{Binding StartDate,StringFormat=d}">
                </TextBlock>
                <Rectangle 
                    Margin="5"
                    Width="{Binding Duration}" Height="20" 
                    Fill="Red" 
                    Stroke="Black" 
                    ToolTipService.ToolTip="{Binding Description}">
                </Rectangle>
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>
    <DockPanel DataContext="{Binding }">
        <StackPanel>
            <Label>Person Task</Label>
            <ListBox 
                 Name="personsListBox"
                ItemsSource="{Binding}"
                ItemTemplate="{StaticResource dataTemplate}"
                IsSynchronizedWithCurrentItem="true"/>
        </StackPanel>
        <StackPanel>
            <Label>Tasks</Label> 
            <ListBox 
                Name="tasksListBox"
                ItemsSource="{Binding Path=Tasks}"
                ItemTemplate="{StaticResource dataTemplateGraphic}"
                IsSynchronizedWithCurrentItem="true">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                            <Canvas Width="2000"  Background="White" ClipToBounds="True" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox> 
        </StackPanel>
    </DockPanel >
</UserControl>

et le xaml du form d' utilisation:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<Window x:Class="WpfGraphicPlannigBis.TestControlTaskPerson"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfGraphicPlannigBis" 
        Title="ControlTaskPerson" Height="350" Width="525">
    <Window.Resources>
        <local:Persons x:Key ="source"></local:Persons >
    </Window.Resources>
    <Grid>
        <local:ControlPersonBis DataContext="{StaticResource source}"></local:ControlPersonBis>
    </Grid>
</Window>

pas de code .cs du form....
bon code ...

06/01/2015, 08h50
Lionhart

1 pièce(s) jointe(s)

Citation:

mais c'est moche !!!

Pourquoi penses-tu qu'il faudrait éviter cela ?

De plus j'ai upload un début d'application de ce que j'ai fait...

Il pourrait s'agir d'un système de calendrier de salle par exemple. Occupé de telle date à telle date... etc...
Dans ce genre : https://social.msdn.microsoft.com/fo...endar-blocking

Edit :

J'y suis presque... J'ai réussi à avancer (voir fichier zip) il me manque encore un petit quelque chose... mes carrés s'entassent..
20/01/2015, 11h43
Lionhart

Citation:

mais c'est moche !!!

Après relecture je pense que tu parlais du graphisme et non pas du développement de la fonctionnalité qui pour le coup reste du mvvm.

N'ayant pas trouvé mieux (controle déjà existant trop complexe pour moi. trop de fonctionnalités pour du simple affichage) pour le moment je vais garder l'idée.