[英]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. 需要在WPF中使用MVVM模式以最简单的方式绘制2D图形(我认为-这是折线)。 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; 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 the App.xaml 在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 在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 > ? 1)如何绑定
<Line X1="{Binding ??}" Y1="{Binding ??}" X2="{Binding ??}" Y2="{Binding ??}" Stroke="Red"/>
排队<点>?
2)How can the < Line .../>
refresh itself every second? 2)
< Line .../>
如何每秒刷新一次? Or how can the ViewModel refresh itself every second and notifies the View about it? 还是ViewModel如何每秒刷新一次并通知View?
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. 使用MVVM模式在WPF中创建穷人图表的最简单方法是将数据转换为易于通过标记使用的格式,特别是分段而不是点。
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": 这导致此“图表”:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.