Discussion :

[Phoenix07]

Bonjour,

Etant débutant en wpf je cherche sur le net depuis ce matin une méthode simple de créer un quadrillage... pour ensuite afficher des graphiques et je trouve rien !!!
Je souhaite faire mon dev en MVVM et je ne trouve aucune piste pour m'aider à construire un quadrillage ou une grille.
Je précise qu'à terme je souhaiterais pouvoir déplacer la grille et zoomer / dézoomer.

J'ai regardé du côté de wpf toolkit mais le chart n'est pas dans la version open source .

Du coup si vous avez des idées pour m'aider à commencer.

Merci

[Phoenix07]

J'ai essayé quelque chose de moche dans un canvas de 300 sur 300.

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
 
<Canvas>
        <Line X1="30" X2="30" Y1="0" Y2="300" Fill="Black" Stroke="Black" />
        <Line X1="60" X2="60" Y1="0" Y2="300" Fill="Black" Stroke="Black" />
        <Line X1="90" X2="90" Y1="0" Y2="300" Fill="Black" Stroke="Black" />
        <Line X1="120" X2="120" Y1="0" Y2="300" Fill="Black" Stroke="Black" />
        <Line X1="150" X2="150" Y1="0" Y2="300" Fill="Black" Stroke="Black" />
        <Line X1="180" X2="180" Y1="0" Y2="300" Fill="Black" Stroke="Black" />
        <Line X1="210" X2="210" Y1="0" Y2="300" Fill="Black" Stroke="Black" />
        <Line X1="240" X2="240" Y1="0" Y2="300" Fill="Black" Stroke="Black" />
        <Line X1="270" X2="270" Y1="0" Y2="300" Fill="Black" Stroke="Black" />
        <Line X1="300" X2="300" Y1="0" Y2="300" Fill="Black" Stroke="Black" />
 
        <Line X1="0" X2="300" Y1="30" Y2="30" Fill="Black" Stroke="Red" />
        <Line X1="0" X2="300" Y1="60" Y2="60" Fill="Black" Stroke="Red" />
        <Line X1="0" X2="300" Y1="90" Y2="90" Fill="Black" Stroke="Red" />
        <Line X1="0" X2="300" Y1="120" Y2="120" Fill="Black" Stroke="Red" />
        <Line X1="0" X2="300" Y1="150" Y2="150" Fill="Black" Stroke="Red" />
        <Line X1="0" X2="300" Y1="180" Y2="180" Fill="Black" Stroke="Red" />
        <Line X1="0" X2="300" Y1="210" Y2="210" Fill="Black" Stroke="Red" />
        <Line X1="0" X2="300" Y1="240" Y2="240" Fill="Black" Stroke="Red" />
        <Line X1="0" X2="300" Y1="270" Y2="270" Fill="Black" Stroke="Red" />
        <Line X1="0" X2="300" Y1="300" Y2="300" Fill="Black" Stroke="Red" />
    </Canvas>

Dans l'idée je souhaiterais donc quelque chose de ce genre mais qui se trace dynamiquement, que je puisse bouger, zoomer et dezoomer et ce sera déjà bien

[theMonz31]

Peut-etre cet article : Draw a board in WPF

[Phoenix07]

Un peu trop "évolué". Faut que je décortique.
Sans vouloir faire le lourd si ya moins développé ça m'arrangerais

[MABROUKI]

Bonjour

Sans vouloir faire le lourd si ya moins développé ça m'arrangerais

Moins elaboree ,leger meme ...C'est possible avec le versatile Canvas...
Et Une grille va toujours dans la prop Background d'un control ne jamais l'oublier !!!...


2 controls Canvas superposes ou "Layeres" sont necessaires,c.à.d de meme dimensions ...

1/Le Canvas Exterieur (root) recoit la grille ,affectee à sa prop Background ...
Pour la dessiner on utilise un Visual qui est un simple Rectangle dessine dans les Resources et on "tile" le Visual convenablement (50 en 50 ou 30 en 30 whatever you want !!)...Un ImageBrush aurait recu un Bitmap ...

2/pour Panner on deplace le Canvas Interieur (chart) dans le Canvas root dans les events Mouse du Canvas interieur (chart)..


3/pour Zoomer on "scale" le Canvas chart dans son ScaleTransform dans l'event MouseWheel du Canvas chart....

4/Pour dessiner un graphique on utilise un shape Polyline place sur le Canvas chart...
Sa prop Points de type PointCollection est bindee au class DataPoint (ObservableCollection<Point>) muni d'une prop AUXILIARE Points de meme type et approvisionne en consequence par DataPoint...

code .cs du DataPoint d'exemple:

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
using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Media;
 
namespace WpfCanvasBoard
{
    public class DataPoint : ObservableCollection<Point>
    {
        private Random rnd = new Random();
        public DataPoint()
        {
            double dx = (300.0 - 0.0) / 100.0;
            double y;
            for (double x = 0; x < 300 + dx; x += dx)
            {
                y = (double)rnd.Next(10,290);
 
                Point pt = new Point(x, y);
                this.Add(pt);
            }
        }
        public PointCollection Points
        {
            get { return new PointCollection(this); }
        }
 
    }
}

code xaml du Winform exemple:

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
<Window x:Class="WpfCanvasBoard.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfCanvasBoard"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources >
        <local:DataPoint x:Key="serie"/>
        <Rectangle 
            x:Key="square"
            Width="10" Height="10"
            Fill="WhiteSmoke" Stroke="CornflowerBlue" StrokeThickness="0.1"/>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition ></RowDefinition>
            <RowDefinition Height="auto" ></RowDefinition>
        </Grid.RowDefinitions>
        <Border 
            x:Name="border"
            BorderBrush="Blue" BorderThickness="2" CornerRadius="8"
             Width="320" Height="320" >
            <Canvas 
                x:Name="root"
                ClipToBounds="True" 
                Width="300" Height="300" 
                 >
                <Canvas.Background>
                    <VisualBrush 
                            TileMode="Tile"
                            Viewport="0,0,20,20"
                            ViewportUnits="Absolute" 
                            Visual="{StaticResource square}">
                    </VisualBrush>
                </Canvas.Background>
                <Canvas 
                    x:Name="chart" 
                    ClipToBounds="True" 
                    Background="Transparent"
                    Width="300" Height="300"
                    RenderTransformOrigin="0.5,0.5"
                    PreviewMouseLeftButtonDown="chart_MouseLeftButtonDown"
                    MouseMove="chart_MouseMove"
                    PreviewMouseRightButtonDown="chart_MouseRightButtonDown"
                    MouseWheel="chart_MouseWheel">
                    <Canvas.RenderTransform >
                        <TransformGroup>
                            <ScaleTransform  x:Name="sc" />
                        </TransformGroup>
                    </Canvas.RenderTransform> 
                    <Polyline  Stroke="Red" StrokeThickness="1.0"
                               Points="{Binding Source={StaticResource serie},Path=Points}">
                    </Polyline>
                    <TextBox 
                        Canvas.Left="100" Canvas.Top="10"
                        FontSize="16" Width="100"
                        Foreground="Red" Background="BlanchedAlmond"  Text="Titre Chart" >
                    </TextBox>
                </Canvas>
            </Canvas>
        </Border>
        <Button Grid.Row="1" x:Name="btnReset" Content="Reset" Click="btnReset_Click" /> 
    </Grid>
</Window>

code behind .cs du winform:

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
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
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 WpfCanvasBoard
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
 
        private Point startPoint;
        private Point endPoint;
        private void chart_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (!chart.IsMouseCaptured)
            {
                startPoint = e.GetPosition(chart);
                chart.CaptureMouse();
                chart.Cursor = Cursors.Hand;
            }
        }
 
        private void chart_MouseMove(object sender, MouseEventArgs e)
        {
 
            if (chart.IsMouseCaptured)
            {
 
                endPoint = e.GetPosition(chart);
                Canvas.SetLeft(chart, endPoint.X);
                Canvas.SetTop(chart, endPoint.Y);
            }
        }
 
        private void chart_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
 
            if (chart.IsMouseCaptured)
            {
                endPoint = e.GetPosition(chart);
                Canvas.SetLeft(chart, endPoint.X);
                Canvas.SetTop(chart, endPoint.Y);
 
                chart.ReleaseMouseCapture();
                chart.Cursor = Cursors.Arrow;
 
            }
        }
        int zoom = 100;
        int increment = 2;
        private void chart_MouseWheel(object sender, MouseWheelEventArgs e)
        {
 
            if (e.Delta ==120)
            {
                zoom += increment;
                zoom = Math.Min(zoom, 150);
            }
            else if (e.Delta == -120)
            {
                zoom -= increment;
                zoom = Math.Max(zoom, 1);
            }
            sc.ScaleX =(double) zoom / 100.0;
            sc.ScaleY =(double) zoom / 100.0;
        }
 
        private void btnReset_Click(object sender, RoutedEventArgs e)
        {
            sc.ScaleX = 1.0;
            sc.ScaleY = 1.0;
            Canvas.SetLeft(chart, 0.0);
            Canvas.SetTop(chart, 0.0);
        }
 
    }
}

C'est du "leger" !!!...
bon code....

[Phoenix07]

Bonjour,

Effectivement c'est plus simple. Ce sera plus facile pour moi de travailler cet exemple pour l'améliorer à ma sauce, notamment en utilisant le pattern MVVM .
Merci MABROUKI, je passe en résolu.