【发布时间】:2017-03-17 06:37:27
【问题描述】:
我想做一个项目,为几乎无形的图表制作一个非常通用的可重用用户控件。我希望在制图方面有所作为,但似乎地球上几乎每个人都免费使用 WPF 工具包或 Sparrow Charts 以第 3 方方式制作图表。有没有人有绑定或构建完全独立的图表制作方式的经验?我正在考虑做一些通用的事情,比如在画布上绑定多段线并通过。我很好奇是否有其他人曾走这条路,并且有关于为事件引发和潜在依赖属性设置绑定的提示。我正在考虑遵循 MVVM 架构方法并完成大部分与 ViewModel 的绑定,但我最终希望公开属性以进行更新。
在概念上与此类似(UserControl 嵌入另一个 View 或 MainForm):
<StackPanel>
<Label x:Name="lblCustomDataGridHeader" Content="{Binding TestText}" HorizontalAlignment="Center" FontSize="24"/>
<Canvas Height="260" Width="300">
<Polyline Points="{Binding Points}" Stroke="LightBlue" StrokeThickness="4" />
</Canvas>
</StackPanel>
ViewModel 属性:
public ViewModel()
{
TestText = "Line Chart";
//Obviously some converter or something else here to accept one or many lines
Points = "0,260 10,250 20,245 40,200 50,250 80, 200, 140,100";
}
public string TestText {
get { return _testText; }
set
{
_testText = value;
OnPropertyChanged(NameOf(TestText));
}
}
private string _points;
public string Points {
get { return _points; }
set
{
_points = value;
OnPropertyChanged(NameOf(Points));
}
}
稍后编辑
我也尝试过做一个绑定到类的模板化控件
<Style TargetType="{x:Type local:LineGraph}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:LineGraph}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Hello" FontSize="20"/>
<Border Grid.Row="1" BorderThickness="1" BorderBrush="Black" CornerRadius="15" Margin="10">
<Canvas Margin="10" x:Name="PART_Canvas">
<Canvas.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="-1" />
</Canvas.LayoutTransform>
</Canvas>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
类(其中一些需要清理,因为我正在使用其他人的实现,它是在 VB.NET 中并转换的):
public class LineGraph : Control, INotifyPropertyChanged
{
//CONSTRUCTOR
static LineGraph()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(LineGraph), new FrameworkPropertyMetadata(typeof(LineGraph)));
}
public event PropertyChangedEventHandler INotifyPropertyChanged.PropertyChanged;
public void OnPropertyChanged(string info)
{
if (PropertyChanged != null) {
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
public static readonly DependencyProperty _Trends = DependencyProperty.RegisterReadOnly("Trends", typeof(Collection<ChartDataSegment>), typeof(LineGraph), new PropertyMetadata(new Collection<ChartDataSegment>())).DependencyProperty;
public Collection<ChartDataSegment> Trends {
get { return (Collection<ChartDataSegment>)GetValue(_Trends); }
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
dynamic canvas = GetTemplateChild("PART_Canvas") as Canvas;
if (canvas != null && Trends != null) {
foreach (void trend_loopVariable in Trends) {
trend = trend_loopVariable;
DrawTrend(canvas, trend);
}
}
}
private void DrawTrend(Canvas drawingCanvas, ChartDataSegment Trend)
{
dynamic t = Trend as ChartDataSegment;
if (t != null && t.Points != null) {
for (int i = 1; i <= t.Points.Count - 1; i++) {
dynamic toDraw = new Line {
X1 = t.Points(i - 1).X,
Y1 = t.Points(i - 1).Y,
X2 = t.Points(i).X,
Y2 = t.Points(i).Y,
StrokeThickness = 2,
Stroke = t.LineColor
};
drawingCanvas.Children.Add(toDraw);
}
}
}
}
public class ChartDataSegment : DependencyObject
{
public static readonly DependencyProperty _LineColor = DependencyProperty.Register("LineColor", typeof(Brush), typeof(ChartDataSegment), new PropertyMetadata(null));
public Brush LineColor {
get { return (Brush)GetValue(_LineColor); }
set { SetValue(_LineColor, value); }
}
public static readonly DependencyProperty _LineThickness = DependencyProperty.Register("LineThickness", typeof(Thickness), typeof(ChartDataSegment), new PropertyMetadata(null));
public Thickness PointThickness {
get { return (Thickness)GetValue(_LineThickness); }
set { SetValue(_LineThickness, value); }
}
public static readonly DependencyProperty _Points = DependencyProperty.Register("Points", typeof(ObservableCollection<Point>), typeof(ChartDataSegment), new UIPropertyMetadata(null));
public ObservableCollection<Point> Points {
get { return (ObservableCollection<Point>)GetValue(_Points); }
set { SetValue(_Points, value); }
}
}
以及在 ViewModel 中的实现:
var lineTrend1 = new ChartDataSegment {
LineColor = Brushes.Blue,
Points = new ObservableCollection<Point>({
new Point {
X = 1,
Y = 1
},
new Point {
X = 50,
Y = 20
},
new Point {
X = 100,
Y = 100
},
new Point {
X = 150,
Y = 130
}
})
};
var ctrl = new LineGraph();
ctrl.Trends.Add(lineTrend1);
我最担心的不是这可以实现,而是按需注入项目,不仅仅是在实例化时,而是在对象已经运行之后,以便根据需要不断更新行。 EG:异步调用来更新折线图,而不是托管需要处理然后重新调用的静态图表。
由于 Stack Overflow 想要具体问题,我的直接问题是:“您能否轻松注入集合(点)的集合(行)并使用具有依赖属性的 Canvas 进行自我更新?”
【问题讨论】:
-
这真的不是主题。真的很难回答是/否的问题。如果您从未做过任何 UI 工作,那很难。因此,除非您想至少花几个月的时间在上面,否则只需获得一个 3rd 方库。它们很昂贵,原因与离婚很昂贵一样。
-
因此:“由于 Stack Overflow 需要问题的具体细节,我的直接问题是:“您能否轻松注入集合(点)的集合(行)并使用具有依赖属性的 Canvas 进行自我更新? ” “是不是具体的?哪一部分不够具体?
-
这不是势利,它只是有标准。我在底部读到了,但是如果我添加一个“是”或“否”的答案对你有什么好处?你怎么知道我是对的?见鬼,我可以根据我的经验告诉你,按照你的要求去做很容易,但这只是触及控制设计的表面。但话又说回来,也许我只是很烂,你会发现它很容易。这就是您的问题不在主题范围内的原因。它的粗体部分不会使这不正确。