Discussion :

[aharel]

Bonjour,

Je développe une application WPF en C# en respectant le modele MVVM (j'utilise MVVMLight).
Actuellement je cherche la meilleure solution pour réaliser un écran qui ressemblerait à l'image ci-dessous :


Sur cette représentation, j'ai 5 synoptiques les uns au dessus des autres, mais ce nombre de synoptiques est variable.
Chaque synoptique est composé de gauche à droite :
- d'une icone
- puis de 3 zones distinctes séparées par les pointillés

Les 3 zones en question affichent un bout de synoptique qui est statique mais dont la représentation dépend de certains paramètres du contexte mais ces zones doivent également contenir un composant permettant de modifier une valeur par les boutons + et -.
Et cerise sur le gâteaux (et c'est ce qui me fait coincer), on doit pouvoir afficher sur ces synoptiques une barre verticale (en vert sur le schéma) qui se déplace en fonction de l'avancée d'un traitement.

Initialement je partais dans l'idée de développer un UserControl pour représenter un synoptique :


Mais du coup je ne vois pas trop comment faire pour la barre verticale qui doit chevaucher tous les synoptiques.

Cordialement

[MABROUKI]

Bonjour,


Mais du coup je ne vois pas trop comment faire pour la barre verticale qui doit chevaucher tous les synoptiques.

Cordialement

La barre verticale qui chevauche les synoptiques (je suppose que ce sont des controls) doit être hébergé dans un control Canvas en dessous des synoptiques (le Canvas doit avoir le Z-INDEX le plus élevé et avoir son background transparent.
Le tout sera "logé" dans le Grid du UserControl.
code exemple simplié avec un timer dans le MainModel.
1/ behind.cs du MainModel

Code :

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
sing System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Timers;
namespace WpfAppCurseur
{
    public class BaseModel:INotifyPropertyChanged
    {
 
        public event PropertyChangedEventHandler PropertyChanged;
        public void RaisePropChanged(string nameprop)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if (h != null)
                h(this, new PropertyChangedEventArgs(nameprop));
        }
    }
    public class MainModel:BaseModel 
    {
        private Timer tmr;
 
        public MainModel()
        {
            val1 = 20; val2 = 50; val3 = 75;
            traitement = 0.0;
            tmr = new Timer();
            tmr.Interval = 100.0;
            tmr.Enabled = true;
            tmr.Elapsed += new ElapsedEventHandler(tmr_Elapsed);
        }
 
        void tmr_Elapsed(object sender, ElapsedEventArgs e)
        {
            Traitement += 5.0;
            if (traitement > 400)
                traitement = 0;
        }
        private int val1;
        public int Val1
        {
            get { return val1; }
            set
            {
                val1 = value; this.RaisePropChanged("Val1"); tmr.Start();  }
        }
        private int val2;
        public int Val2
        {
            get { return val2; }
            set { val2 = value; this.RaisePropChanged("Val2"); ; tmr.Start(); }
        } 
        private int val3;
        public int Val3
        {
            get { return val3; }
            set { val3 = value; this.RaisePropChanged("Val3"); ; tmr.Start(); }
        }
        private double traitement;
        public double Traitement
        {
            get { return traitement; }
            set { traitement = value; this.RaisePropChanged("Traitement"); }
        }
    }
}

2/ code xaml du UserControl

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
<UserControl x:Class="WpfAppCurseur.MainControl"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
            >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button x:Name="Composant1" Content="{Binding Val1}" Grid.Column="0"></Button>
        <Button x:Name="Composant2" Content="{Binding Val2}" Grid.Column="1"></Button>
        <Button x:Name="composant3" Content="{Binding Val3}" Grid.Column="2"></Button>
        <Canvas x:Name="chart" Background="Transparent" 
                Grid.Column="0" Grid.ColumnSpan="3" 
                Grid.Row="0">
            <Line   
                x:Name="mycursor"
                Stroke="Red"
                X1="{Binding Traitement}"  Y1="10"
                X2="{Binding Traitement}"  Y2="400"
 
              >
            </Line>
 
        </Canvas>
    </Grid>
</UserControl>

3/ code xaml du MainForm User:

Code XAML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<Window x:Class="WpfAppCurseur.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfAppCurseur"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainModel></local:MainModel>
    </Window.DataContext>
    <Grid>
        <local:MainControl/>
    </Grid>
</Window>

bon code...