MVVM pattern for WPF - 2d graph without using any toolkits
Need to draw 2D graph the most easy way (I think - it's polyline) using MVVM pattern in WPF. I've 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; se开发者_JAVA技巧t; }??
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 the 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 it doesn't work.
EDIT:
I've wrote the following code, but I don't understand:
1) How do I bind
<Line X1="{Binding ??}" Y1="{Binding ??}" X2="{Binding ??}" Y2="{Binding ??}" Stroke="Red"/>
to Queue < Point > ?
2)How can the < Line .../>
refresh itself every second? Or how can the ViewModel refresh itself every second and notifies the View 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);
The easiest way to create a poor-man's chart in WPF using the MVVM pattern is to transform the data into a format that is easily consumable by markup, specifically segments instead of points.
Here is code representative of 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 that 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 results in this "chart":
精彩评论