MVVM template for WPF-2d graphics without using any toolkits

Question

You need to draw a 2D graph in the simplest way (I think it's a polyline) using the MVVM template in WPF. I have created several classes:

namespace SomeNamespace.Models { class Info { // public Queue<int> Dots { get; set; }??? public int Point { get; set; } public int GetLoad() { return new Random (100); //Get some data from external class } } } namespace SomeNamespace.ViewModels { public abstract class ViewModelBase : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); } } } class InfoViewModel: ViewModelBase { //private Queue<Point> _dots = new Queue<Point>(); //public Queue<int> Dots //{ // get { return _dots; } // set // { // _dots = value; // OnPropertyChanged("Dots"); // } //} private int _point; public int Point { get { return _point; } set { _point = value; OnPropertyChanged("Point"); } } } class MainViewModel : ViewModelBase { // public ObservableCollection<InfoViewModel> InfoList { get; set; }?? public ObservableCollection<int> Points { get; set; } public MainViewModel(List<Info> info) { //InfoList = new ObservableCollection<InfoListViewModel>(info.Select i => new InfoViewModel( i)));??? Points = new ObservableCollection<int>() { 10, 20, 30, 40 }; //just for test } } } 

In App.xaml

  public partial class App : Application { private void OnStartup(object sender, StartupEventArgs e) { List<Info> i = new List<Info>() { new Info(){ Point = 10 }, new Info(){ Point = 15 }, new Info(){ Point = 20 }, new Info(){ Point = 25 }, new Info(){ Point = 30 }, new Info(){ Point = 35 } }; MainWindow mainView = new MainWindow(); MainViewModel mainViewModel = new MainViewModel( i); mainView.DataContext = mainViewModel; mainView.Show(); } } 

In MainWindow.xaml

 <Grid> <Polyline Name="graph1" Fill="Blue" Points="{Binding Points}" Stroke="Blue" > </Polyline> </Grid> 

But that will not work.

EDIT:

I wrote the following code, but do not understand:

1) How do I bind <Line X1="{Binding ??}" Y1="{Binding ??}" X2="{Binding ??}" Y2="{Binding ??}" Stroke="Red"/> to the <Point> queue?

2) How to update < Line .../> every second? Or how does the ViewModel update every time and notify about it?

 public class Segment { public Queue<Point> Dots { get; set; } } public class ViewModel:INotifyPropertyChanged { private Queue<Segment> _segments; public Queue<Segment> Segments { get { return _segments; } set { _segments = value; OnPropertyChanged("Segments"); } } public ViewModel(Queue<Point> segments) { } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); } } } MainWindow mainView = new MainWindow(); Queue<Point> q = Class1.GenerateData(); //Class1.GenerateData() returns Queue<Point> mainView.DataContext = new ViewModel(q); 

Answer 1

The easiest way to create a poor person’s diagram in WPF using the MVVM template is to convert the data to a format that is easily consumed by markup, in particular segments instead of dots.

Here is the code representing the view model:

  public class Segment { public Point From { get; set; } public Point To { get; set; } } public class ViewModel { public IList<Segment> Segments { get; set; } } void SetDataContext() { var Points = new Point[] { new Point { X = 0, Y = 10 }, new Point { X = 10, Y = 30 }, new Point { X = 20, Y = 20 }, }; DataContext = new ViewModel { Segments = new List<Segment>(Points.Zip(Points.Skip(1), (a, b) => new Segment { From = a, To = b })) }; } 

and here is how to create a bare-bones chart from this data:

 <Grid> <Border Height="100" Width="100" BorderBrush="Black" BorderThickness="1"> <Canvas Background="Pink"> <Canvas.LayoutTransform> <ScaleTransform ScaleY="-1"/> </Canvas.LayoutTransform> <ItemsControl ItemsSource="{Binding Segments}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Line X1="{Binding From.X}" Y1="{Binding From.Y}" X2="{Binding To.X}" Y2="{Binding To.Y}" Stroke="Red"/> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Canvas> </Border> </Grid> 

which leads to this "chart":