WPF ر یطخ راومن اجیا : هلاقم ناونع ناسیون همانرب یصصzت ... · WPF ر یطخ راومن اجیا : هلاقم ناونع ناسیون همانرب

WPFایجاد نمودار خطی در عنوان مقاله :

مرجع تخصصی برنامه نویسان تهیه وتنظیم کننده :

www.barnamenevisan.org [email protected]

را ارائه می دهد، همچنین نشان می WPF این مقاله یک آموزش کامل و مرحله به مرحله برای ایجاد نمودار خطی در

نیز MVVM با الگوی WPF دهیم که چگونه می توان آن را به یک کامپوننت تبدیل کرد که در اپلیکیشن های دیگر

.قابل استفاده مجدد باشد

WPF ،های رابط انواع راحتی به دهد می اجازه شما به که یک پلت فرم گرافیکی واحد را فراهم می کند

و اشیاء گرافیکی را در اپلیکیشن دات نت خود ایجاد کنید. در اینجا می خواهیم به (user interface)کاربری

.را آموزش دهیم WPF در خطی نمودار ایجاد کنترل)کامپوننت(صورت مرحله به مرحله

بتواند داشته باشد: این یعنیWPF در شده ساخته های المان شبیه رفتاری نیز نمودار کنترل این الزم است

سازگار تعریف MVVM و ViewModel ها در Property برای ها داده ایجاد شود؛ محدوده XAML در

دو نمودار یک مختصاتی سیستم توضیح با خواهیم می اینجا در باشد. MVVM شده باشد؛ سازگار با الگوی

استفاده شده شروع کنیم. و بعد نشان دهیم که چگونه می توان یک نمودار خطی ساده در WPF در که بعدی

گونهچ و کرد ایجاد ایت نشان می دهیم که چگونه می توان یک کنترل نمودار خطینه در این سیستم ها ساخت،

.استفاده مجدد کرد MVVM با الگوی WPF اپلیکیشن در را نمودار کنترل این توان می

http://www.barnamenevisan.org/

http://barnamenevisan.org/Search?srch=WPF+

http://barnamenevisan.org/Search?srch=XAML+

http://barnamenevisan.org/Search?srch=MVVM+




سیستم مختصاتی نمودارهای دو بعدی

:درا برآورده کن زیر شرایط باید بعدی دو نمودار های اپلیکیشن در یک سیستم مختصاتی سفارشی شده

دنیای در کیگرافی اشیاء واحد از مستقل باید این اپلیکیشن همانطور که در اکثر اپلیکیشن های نمودار انجام شده،

این سیستم مختصاتی سفارشی را نشان می 1آن باید از پایین به باال اشاره کند، . شکل Y محور و باشد واقعی

:دهد

که در دنیای واقعی در یک ناحیه ارائه شده است X-Y مختصات سیستم همان ما کنید می همانطور که مشاهده

شما نیز می توانید یک سیستم مختصاتی مشابه را با استفاده از کنترل پنل سفارشی و باز یم.ا کرده تعریف را

ایجاد کنید. هر متد اندازه داده مورد نیاز نسبت ArrangeOverride و MeasureOverride نویسی متدهای

اتی ایجاد سیستم های مختصبه موقعیت و المان های فرزند ارائه شده، بر می گرداند. این یک متد استاندارد برای





سفارشی می باشد. ولی ما به جای ایجاد یک کنترل پنل سفارشی در اینجا می خواهیم این سیستم مختصاتی را با

ایجاد ادهس خطی نمودار یک بعدی بخش در. بسازیم مستقیم نویسی کد اساس بر و متفاوت روش استفاده از یک

.سیستم مختصاتی نمودار دو بعدی سفارشی ساخت توان می چگونه دهد می نشان که کنیم می

نمودارهای خطی ساده

از دو مقدار برای نمایش هر نقطه داده استفاده می کند. این نوع از نمودار برای توضیح روابط X-Y نمودار خطی

ع ر جوامبین داده ها بسیار مفید است و اغلب در تجزیه و تحلیل های آماری داده ها در اپلیکیشن های بزرگ د

.علمی، ریاضیات، مهندسی و امور مالی و همچنین در زندگی روزمره مورد استفاده قرار می گیرد

Visual Studio 2013 ، پروژه یک را باز کرده WPF را آن نام و کنید ایجاد جدید WpfChart .قرار دهید

وارد جزئیات چگونه استفاده استفاده خواهیم کرد ولی MVVM به عنوان فریم ورک Caliburn.Micro ما از

قرار دهید. SimpleChartView به پروژه اضافه کنید و نام آن را UserControl نمی شویم. یک آن کردن از

:نوشته شده و برای ایجاد یک نموار خطی می باشد XAML قطعه کد زیر در

<Grid ClipToBounds="True" cal:Message.Attach="[Event SizeChanged]=

[Action AddChart($this.ActualWidth, $this.ActualHeight)];

[Event Loaded]=[Action AddChart($this.ActualWidth, $this.ActualHeight)]">

<Polyline Points="{Binding SolidLinePoints}" Stroke="Black" StrokeThickness="2"/>

<Polyline Points="{Binding DashLinePoints}" Stroke="Black"

StrokeThickness="2" StrokeDashArray="4,3"/>

</Grid>

محدود شده است و به PointCollection اضافه می کنیم که به دو شیئ Grid به Polylines در اینجا ما دو

ممکن است متوجه شده باشید که ما از می باشند. DashLinePoints و SolidLinePoints ترتیب

به متدهای تعریف شده در View در UI برای اتصال رویدادهای Caliburn.Microمکانیسم

ViewModel استفاده کرده ایم. در اینجا ما از Property با نام Message.Attach برای اتصال به

داشته ViewModel را در AddChart تا متداستفاده کرده ایم Grid’s Loaded و SizeChangedرویدادهای





ارسال کنیم. این اکشن AddChart را به متد ActualWidth و ActualHeigh های Property باشیم و

رسیمت و ها نقطه از ای مجموعه شدن ایجاد دوبار در آن نتیجه و کند می را کنترل Grid بارگذاری یا تغییر اندازه

.داده می شودمجدد نمودار در صفحه نشان

قرار دهید. کد زیر برای این SimpleChartViewModel یک کالس جدید به پروژه اضافه کرده و نام آن را

:کالس در نظر گرفته می شود

using System;

using Caliburn.Micro;

using System.Collections.ObjectModel;

using System.ComponentModel.Composition;

using System.Collections.Generic;

using System.Windows;

using System.Windows.Media;

using System.Windows.Controls;

namespace WpfChart

{

[Export(typeof(IScreen)), PartCreationPolicy(CreationPolicy.NonShared)]

public class SimpleChartViewModel : Screen

{

[ImportingConstructor]

public SimpleChartViewModel()

{

DisplayName = "01. Simple Line";

}





private double chartWidth = 300;

private double chartHeight = 300;

private double xmin = 0;

private double xmax = 6.5;

private double ymin = -1.1;

private double ymax = 1.1;

private PointCollection solidLinePoints;

public PointCollection SolidLinePoints

{

get { return solidLinePoints; }

set

{

solidLinePoints = value;

NotifyOfPropertyChange(() => SolidLinePoints);

}

}

private PointCollection dashLinePoints;

public PointCollection DashLinePoints

{

get { return dashLinePoints; }

set





{

dashLinePoints = value;

NotifyOfPropertyChange(() => DashLinePoints);

}

}

public void AddChart(double width, double height)

{

chartWidth = width;

chartHeight = height;

SolidLinePoints = new PointCollection();

DashLinePoints = new PointCollection();

double x = 0;

double y = 0;

double z = 0;

for (int i = 0; i < 70; i++)

{

x = i / 5.0;

y = Math.Sin(x);

z = Math.Cos(x);

DashLinePoints.Add(NormalizePoint(new Point(x, z)));

SolidLinePoints.Add(NormalizePoint(new Point(x, y)));

}





}

public Point NormalizePoint(Point pt)

{

var res = new Point();

res.X = (pt.X - xmin) * chartWidth / (xmax - xmin);

res.Y = chartHeight - (pt.Y - ymin) * chartHeight / (ymax - ymin);

return res;

}

}

}

Chart Style نمودار خطی با

با استفاده از WPF مثال قبل نشان داد که چگونه می توان به راحتی یک نمودار خطی دو بعدی در

.ایجاد کرد ViewModel و View استاندارد و با یک جدایی کامل بین MVVM الگوی

)شیئ گرا( بیشتر و گسترش ساده آن برای اضافه object-oriented به همین منظور برای برنامه نمودار به شکل

می باشند. LineSeries و ChartStyle کردن ویژگی های جدید، باید دو کالس جدید ایجاد کنیم: که

و غیره را دارد. dashداده ها و استایل های خطی شامل رنگ خط، ضخامت، LineSeries کالس

عالئم و نشانه ، عنوان )خطوط راهنما(، gridlines شامل layout با تمام اطالعات مرتبط ChartStyle کالس

کنترل تعدادی داینامیک صورت به که داریم نیاز منظور همین به و برچسب ها را برای محورها را دارد. ها

می خواهیم ViewModelسخت است. بنابراین ما یک XAML ایجاد کنیم اما ایجاد این کنترلها در View روی

را به صورت داینامیک کنترل کند. این ممکن است View بوده و View که قادر به دستیابی به

های اپلیکیشن توان می هم هنوز روش این با که دهیم می نشان را نقض کند ولی ما در ادامه MVVM قوانین

.های نمودار ایجاد کرد user control سازگار در زمان تبدیل نمودار به MVVMرنمودا





LineSeries کالس

قرار دهید.یک کالس جدید به ChartModel یک پوشه جدید به پروژه اضافه کرده و نام آن را

:قرار دهید. کد زیر مربوط به این کالس است LineSeriesرااضافه کرده و نام آن ChartModel فولدر

using System;


using System.Windows.Shapes;



namespace WpfChart.ChartModel

{

public class LineSeries : PropertyChangedBase

{

public LineSeries()

{

LinePoints = new BindableCollection<Point>();

}

public BindableCollection<Point> LinePoints { get; set; }

private Brush lineColor = Brushes.Black;

public Brush LineColor

{

get { return lineColor; }

set { lineColor = value; }





}

private double lineThickness = 1;

public double LineThickness

{

get { return lineThickness; }

set { lineThickness = value; }

}

public LinePatternEnum LinePattern { get; set; }

private string seriesName = "Default";

public string SeriesName

{

get { return seriesName; }

set { seriesName = value; }

}

private DoubleCollection lineDashPattern;

public DoubleCollection LineDashPattern

{

get { return lineDashPattern; }

set

{

lineDashPattern = value;

NotifyOfPropertyChange(() => LineDashPattern);





}

}

public void SetLinePattern()

{

switch (LinePattern)

{

case LinePatternEnum.Dash:

LineDashPattern = new DoubleCollection() { 4, 3 };

break;

case LinePatternEnum.Dot:

LineDashPattern = new DoubleCollection() { 1, 2 };

break;

case LinePatternEnum.DashDot:

LineDashPattern = new DoubleCollection() { 4, 2, 1, 2 };

break;

}

}

}

public enum LinePatternEnum

{

Solid = 1,

Dash = 2,

Dot = 3,





DashDot = 4,

}

}

برای LinePoints یک که کند می ایجاد )مجموعه نقطه( point collection شیئاین کالس یک

LineSeries ندک می تعریف خطی شیئ برای معین شده نامیده می شود. سپس این کالس یک استایل خطی

زمان ایجاد SeriesName خصوصیت. باشد می سری نام و خط الگوی ضخامت، ، خط رنگ شامل که

با enumeration نمودار مورد استفاده قرار می گیرد. الگوی خط توسط یکبرای legend یک

، Solid، Dash شامل الگوی خطی تعریف شده است که 4تعریف می شود که LinePatternEnumنام

.می باشد DashDot و Dot و

ایجاد الگوی خطی از طریق ایجاد می کنیم. در اینجا نیازی به SetLinePattern ما یک الگوی خطی از طریق متد

هم نیست زیرا این تنظیمات به طور پیش solid نیست. نیازی به ایجاد الگوی خطی SetLinePattern متد

را با استفاده از dottedیا dashed وجود دارند. همچنین الگوی خطی Polyline فرض در شیئ

.ایجاد می کنیم Polyline در StrokeDashArray خصوصیت

ChartStyle کالس

اضافه می کنیم. کد زیر مربوط به این کالس ChartModel به فولدر ChartStyle یک کالس جدید دیگر با نام

:است


using System;









namespace WpfChart.ChartModel

{

public class ChartStyle

{

private double xmin = 0;

private double xmax = 6.5;

private double ymin = -1.1;

private double ymax = 1.1;

private string title = "Title";

private string xLabel = "X Axis";

private string yLabel = "Y Axis";

private bool isXGrid = true;

private bool isYGrid = true;

private Brush gridlineColor = Brushes.LightGray;

private double xTick = 1;

private double yTick = 0.5;

private LinePatternEnum gridlinePattern;

private double leftOffset = 20;

private double bottomOffset = 15;

private double rightOffset = 10;

private Line gridline = new Line();

public Canvas TextCanvas { get; set; }

public Canvas ChartCanvas { get; set; }

public double Xmin





{

get { return xmin; }

set { xmin = value; }

}

... ...

... ...

public void AddChartStyle(TextBlock tbTitle, TextBlock tbXLabel, TextBlock tbYLabel)

{

Point pt = new Point();

Line tick = new Line();

double offset = 0;

double dx, dy;

TextBlock tb = new TextBlock();

// determine right offset:

tb.Text = Xmax.ToString();

tb.Measure(new Size(Double.PositiveInfinity, Double.PositiveInfinity));

Size size = tb.DesiredSize;

rightOffset = 5;

// Determine left offset:





for (dy = Ymin; dy <= Ymax; dy += YTick)

{

pt = NormalizePoint(new Point(Xmin, dy));

tb = new TextBlock();

tb.Text = dy.ToString();

tb.TextAlignment = TextAlignment.Right;

tb.Measure(new Size(Double.PositiveInfinity, Double.PositiveInfinity));

size = tb.DesiredSize;

if (offset < size.Width)

offset = size.Width;

}

leftOffset = offset + 5;

Canvas.SetLeft(ChartCanvas, leftOffset);

Canvas.SetBottom(ChartCanvas, bottomOffset);

ChartCanvas.Width = Math.Abs(TextCanvas.Width - leftOffset - rightOffset);

ChartCanvas.Height = Math.Abs(TextCanvas.Height - bottomOffset - size.Height / 2);

... ...

... ...

}

public Point NormalizePoint(Point pt)

{

if (Double.IsNaN(ChartCanvas.Width) || ChartCanvas.Width <= 0)

ChartCanvas.Width = 270;





if (Double.IsNaN(ChartCanvas.Height) || ChartCanvas.Height <= 0)

ChartCanvas.Height = 250;

Point result = new Point();

result.X = (pt.X - Xmin) * ChartCanvas.Width / (Xmax - Xmin);

result.Y = ChartCanvas.Height - (pt.Y - Ymin) * ChartCanvas.Height / (Ymax - Ymin);

return result;

}

public void SetLines(BindableCollection<LineSeries> dc)

{

if (dc.Count <= 0)

return;

int i = 0;

foreach (var ds in dc)

{

PointCollection pts = new PointCollection();

if (ds.SeriesName == "Default")

ds.SeriesName = "LineSeries" + i.ToString();

ds.SetLinePattern();

for (int j = 0; j < ds.LinePoints.Count; j++)

{

var pt = NormalizePoint(ds.LinePoints[j]);

pts.Add(pt);





}

Polyline line = new Polyline();

line.Points = pts;

line.Stroke = ds.LineColor;

line.StrokeThickness = ds.LineThickness;

line.StrokeDashArray = ds.LineDashPattern;

ChartCanvas.Children.Add(line);

i++;

}

}

}

}

را در فایل listing ایم. شما می توانید کد کامل شده داده قرار کالس این در را کد از بخشی در اینجا، ما فقط

را به عنوان خصوصیت عمومی ,Canvas control, ChartCanvas ضمیمه شده ببینید. توجه داشته باشید که ما

.تعریف کرده ایم

ظاهر شود. همانطور ViewModel در مدل یا Canvas اجازه نمی دهد که کنترل MVVM معموال فریم ورک

.ستا داینامیک صورت به کنترلها کردن اضافه قبال توضیح داده شد، هدف ما از انجام این کار ایجاد امکان که

نمودار و و ظاهر آن استفاده (layout)در اینجا ما فیلدهای عضو بیشتری اضافه می کنیم که برای دستکاری طرح

را درک کنید. توجه (name)از این نام Property می کنیم. شما می توانید به راحتی می توانید معنای هر فیلد و

برای TextCanvas دیگری اضافه می کنیم.که TextCanvas و Canvas داشته باشید که ما خصوصیت

نمودار خود را ChartCanvas که حالی در شود، می استفاده )برچسب نشانه ها( tick mark labels نگهداری

.نگه میدارد





)خطوط راهنما( درنمودار استفاده می gridlines زیر را برای تعریف (member)های عضوعالوه بر این ما فیلد

:کنیم

private bool isXGrid = true;

private bool isYGrid = true;

private Brush gridlineColor = Brushes.LightGray;

private LinePatternEnum gridlinePattern;

ها ایجاد می کند. gridline های مربوط به آنها انعطاف بیشتری در ظاهر Property این فیلدها و

انتخاب کنید که dash به شما اجازه می دهد استایل های متنوعی برای GridlinePattern خصوصیت

ها را با استفاده از gridline می باشد. شما می توانید رنگ dash-dot و solid، dash، dot شامل

IsYGrid و IsXGrid به صورت bool تغییر دهید. عالوه بر این ما دو خصوصیت GridlineColor خصوصیت

.افقی یا عمودی را فعال یا غیر فعال کنید gridlines تعریف می کنیم که به شما اجازه می دهد

Chart Style ایجاد نمودارهای خطی با

برای ایجاد یک نمودار خطی با خطوط باال ChartStyle و LineSeries حاال می توانیم از دو کالس

استفاده (tick marks) و عالئم تیک (title)، عنوان(axis labels)، برچسب های محورها(gridlines)راهنما

قرار دهید. در اینجا کد مربوط ChartView جدید به پروژه اضافه کرده و نام آن را UserControl کنیم. یک

:نشان داده شده است View برای XAML به این قطعه کد در





<Grid Margin="10">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

در سلولهای مختلف از از Y و X محورهای برای را ها برچسب و ایم داده قرار در اینجا، یک عنوان

می chartCanvas و textCanvas در نظر گرفته ایم و دو کنترل بومی نیز تعریف کرده ایم: که Grid کنترل

ه بندی مجدد می باشد زیرا که خصوصیات عرض و انداز قابلیت یک کنترل بومی برای textCanvas .باشند

از ما محدود شده است. chartGrid’s ActualWidth و ActualHeight ارتفاع آن به خصوصیات

برای نگهداری برچسب های عالمت تیک مدیریت می کند؛ chartCanvas به عنوان والد textCanvasلکنتر

.نمودار خود را مدیریت می کند chartCanvas کنترل

دهیم که کد آن به صورت زیر قرار می ChartViewModel یک کالس جدید به پروژه اضافه کرده و نام آن را

:است

using System;




using System.Windows.Documents;

using System.Collections.Generic;




using WpfChart.ChartModel;





namespace WpfChart

{


public class ChartViewModel :Screen

{


public ChartViewModel()

{

DisplayName = "02. Chart";

}

private ChartView view;

private ChartStyle cs;

private void SetChartStyle()

{

view = this.GetView() as ChartView;

view.chartCanvas.Children.Clear();

view.textCanvas.Children.RemoveRange(1, view.textCanvas.Children.Count - 1);

cs = new ChartStyle();

cs.ChartCanvas = view.chartCanvas;

cs.TextCanvas = view.textCanvas;

cs.Title = "Sine and Cosine Chart";

cs.Xmin = 0;

cs.Xmax = 7;





cs.Ymin = -1.5;

cs.Ymax = 1.5;

cs.YTick = 0.5;

cs.GridlinePattern = LinePatternEnum.Dot;

cs.GridlineColor = Brushes.Green;

cs.AddChartStyle(view.tbTitle, view.tbXLabel, view.tbYLabel);

}

public void AddChart()

{

SetChartStyle();

BindableCollection<LineSeries> dc = new BindableCollection<LineSeries>();

var ds = new LineSeries();

ds.LineColor = Brushes.Blue;

ds.LineThickness = 2;

ds.LinePattern = LinePatternEnum.Solid;

for (int i = 0; i < 50; i++)

{

double x = i / 5.0;

double y = Math.Sin(x);

ds.LinePoints.Add(new Point(x, y));

}

dc.Add(ds);





ds = new LineSeries();

ds.LineColor = Brushes.Red;


ds.LinePattern = LinePatternEnum.Dash;

ds.SetLinePattern();

for (int i = 0; i < 50; i++)

{

double x = i / 5.0;

double y = Math.Cos(x);


}

dc.Add(ds);

cs.SetLines(dc);

}

}

}

دسترسی داریم داشته View به View model طریق از توجه ویژه ای نسبت به اینکه چگونه

کند که به ما اجازه می دهد به راحتی را ارائه می GetView یک متد با نام Caliburn.Micro .باشید

نیاز به دسترسی به کنترل ChartStyle دسترسی داشته باشیم. همانطور که قبال بحث شد، کالس View به

ایجاد شده است. بنابراین در View دارد که در chartCanvas و textCanvas های

:داریمبا استفاده از کد زیر دسترسی View به SetChartStyle متد

view = this.GetView() as ChartView;

view.chartCanvas.Children.Clear();





view.textCanvas.Children.RemoveRange(1, view.textCanvas.Children.Count - 1);

cs = new ChartStyle();

cs.ChartCanvas = view.chartCanvas;

cs.TextCanvas = view.textCanvas;

پنجره که زمانی در چارت دوباره ترسیم منظور به می گیریم. GetView را از متد View شیئابتدا

chartCanvas را فراخوانی کنیم.اما textCanvas فرزند های المان تمام باید شده است، resize اپلیکیشن

تبدس باال کد در شده( شده پررنگ)بولد کد توسط را پاک می کند که chartCanvas تمام کنترل های فرزند

خود را ChartCanvas و TextCanvas های Property ایجاد کرده و ChartStyle شیئ یک سپس. آید می

.مربوطه تنظیم می کنیم View برای کنترل های

ها title ، tick mark ها، gridline که را فراخوانی می کنیم SetChartStyle متد ابتدا ، AddChart در متد

برچسب های محورها را تنظیم می کند. بقیه کد شبیه به کدی است در مثال قبلی استفاده کردیم. شکل زیر و

، خطوط title، labels نتایج اجرای این اپلیکیشن را نشان می دهد. شما می توانید مشاهده کنید که نمودار امکانات

.ایجاد کرده اید WPF ودار خطی درراهنما، عالئم و تیک را دارد. تا اینجا شما با موفقیت یک نم





کنترل های نمودار خطی

سازی پیاده داشت وجود مستقیم طور به ما نمودار برنامه در که هایی کالس همه در بخش های قبلی، ما کد

برنامه ردیگ برای را کد همین بخواهید اگر اما. کند می کار خوبی به روش این ساده اپلیکیشن یک برای. کردیم

userابزار قدرتمند، wpf ورک دات نت و فریم. است فایده بی و اثر بی روش این کنید استفاده نت دات های

control را برای حل این مشکل ارائه داده است. user control های سفارشی در WPF فقط شبیه دکمه های

.بوندو دات نت فراهم شده WPF هایی هستند که از قبل با text box ساده یا

متعدد یا کدهای (windows)به طور معمول کنترل ها یا کامپوننت هایی که طراحی می کنید در پنجره های

برای های سفارشی شده می تواند مقداری از کد را که باید user controlماژوالر مورد استفاده قرار می گیرد. این

ودتانخ اپلیکشن در کد کردن کپی برای دلیلی هیچ. دهد می کاهش کنید، ایجاد برنامه در سازی پیاده تغییر

ینا بنابراین ها را از دست می دهید. و متوجه اشتباهاتتان در کدنویسی نمی شوید، bug کار این با که چرا نیست

در کدهای منبع کنترل user control ر یک تمرین برنامه نویسی خوب جهت ایجاد قابلیت های خاص برایکا

.می تواند کپی کردن کد را کاهش داده و کد را ماژوالر کندها می باشد که

سفارشی user control در این بخش می خواهیم به شما نشان دهیم که چگونه می توان نمودارهای خطی را در

استفاده کرد. ما تالش MVVM خود با استایل WPF اپلیکیشن در را کنترل یک قرار دهیم و چگونه می توان

در دسترس XAML ایجاد کرده و آن را برایWPF مربوط به first-class که کنترل نمودار را درخواهیم کرد

شده برای کنترل Rout قرار دهیم. این بدین معناست که باید خواص وابستگی را تعریف کنیم و رویدادهای

ضروری WPF های سرویس از پشتیبانی گرفتن منظور به را ، استایل ها، و انیمیشنdata binding مانند نمودار

.تعریف کنیم

. است آسان ایم، نوشته را آنها قبل این برای ایجاد یک کنترل نمودار خطی بر اساس نمودارهای خطی که ما از

نمودار بسیار شبیه مدل استفاده شده برای اپلیکیشن توسعه یافته user control برای یافته توسعه مدل

.است WPF در

را انتخاب کنید. شما می Add | New Project راست کلیک کرده و user control ا نامب Solution بر روی

ها انتخاب کرده و نام آن template جدید از WPF برای user control توانید یک کتابخانه

ایجاد XAML یک فایل Visual Studio 2013 قرار دهید. زمانی که این کار را انجام دهید، ChartControl را





کرده و یک کالس سفارشی مربوط برای مدیریت مقداردهی اولیه و مدیریت رویدادهای کد ایجاد می کند.این

در UserControl1.xaml ایجاد می کند. بر روی UserControl1 پیش فرض با نام user control کار یک

solution explorerراست کلیک کرده و Rename را بهرا انتخاب کرده و نام آن LineChart .تغییر دهید

برای این کنترل تغییر code behind در هر دو فایلLineChart را به UserControl1 همچنین شما باید نام

قرار دهید . دو کالس موجود از فولدر ChartModel را آن نام و کرده اضافه دهید. یک فولدر جدید در کنترل

ChartModel از پروژه ChartModel از پروژه جاری را اضافه کرده و فضای نام آن را به

ChartControl برای تمام کالس ها در فولدر ChartModel از فولدر جاری تغییر دهید. برای جلوگیری از

:تغییر دهید ChartStyleControl وLineSeriesControl سردرگمی، باید نام های این دو کالس را به

<UserControl x:Class="ChartControl.LineChart"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300">

<Grid Margin="10">


<ColumnDefinition Width="Auto"/>




http://schemas.microsoft.com/winfx/2006/xaml/presentation

http://schemas.microsoft.com/winfx/2006/xaml

http://schemas.openxmlformats.org/markup-compatibility/2006

http://schemas.microsoft.com/expression/blend/2008




استفاده برای پیاده سازی کنترل نمودار code-behind شما ممکن است توجه کرده باشید که ما داریم از کد

برای مدیریت رویدادهایی Caliburn.Micro به مربوط Message.Attach متد از ما می کنیم به خاطر اینکه

داریم. user control استفاده نمی کنیم. در واقع ما دو گزینه برای ایجاد یک کتابخانه SizeChanged مانند

وانیمت می ری مورد استفاده قرار گرفته باشد،اگر کنترل نموداری که طراحی کرده ایم تنها در اپلیکیشن جا

های جداگانه View model ایجاد کنیم. در این مورد ما باید MVVM با استفاده از روش user control یک

. کرد خواهد استفاده کنترل این از که کنیم ایجاد والد اپلیکیشن برای کنترل و نمونه ای از آن در

را در این کنترل از طریق View modelیها کنترل و داشت خواهد کنترل را در آنوالد این View بنابراین

ParentVM.UserControlVM متصل خواهد کرد و UserControlVM و user control ما از دیگر اتصاالت

.مراقبت خواهند کرد

گیرد، رارق استفاده مورد دهندگان توسعه دیگر توسط یا از سوی دیگر، اگر کنترل ما توسط دیگر اپلیکیشن ها

بر اساس خواص وابستگی ایجاد کرد. control template خود را با استفاده از پیاده سازی user control باید

-code یا خواص وابستگی MVVM از ایم گرفته تصمیم در اینجا باید به یک نکته مهم اشاره کنیم که

behind استفاده کنیم. این کار نقض قوانینبرای توسعه کنترل نمودار خود MVVM برای مصرف

.ما نیست user control کنندگان

در اینجا می خواهیم نشان دهیم که چگونه می توان یک کنترل نمودار بر اساس خواص

ایجاد کنیم. این خواص code-behind پیاده سازی شده در کد (dependency properties)وابستگی

است ارائه می WPF ه برای اتصال داده ها در زمانی که شیئ منبع المانی ازوابستگی یک روش ساد

منبع یک خاصیت وابستگی است. زیرا خواص وابستگی پشتبانی داخلی برای اعالم خواص تغییر Property و دهد

صله به روز در شیئ مورد نظر را بالفا Property یافته دارد. به عنوان یک نتیجه تغییر مقدار خواص وابستگی ،

افیاض زیرساخت نوع هر ساخت رسانی می کند. این دقیقا همان چیزی است که ما می خواهیم و این بدون نیاز به

.INotifyPropertyChanged رفیساینت یک مانند میافتد، اتفاق

تعریف ویژگی های وابستگی

کنترل نمودار خطی را در معرض پیاده سازی می کنیم که (public interface)در ادامه ما یک رابط عمومی

ها، متدها و رویدادهایی که مصرف Property جهان بیرون قرار می دهد. به عبارت دیگر زمان آن است که

.کنیم ایجاد را دارد احتیاج کننده کامپوننت نمودار ما





قرار خارج جهان معرض در را ChartStyleControl کالس در ها Property بیشتر بخواهیم ممکن است

امکان صورت در کنیم می تالش زمان همان در. ها برچسب و عنوان محورها، محدودیت مثال عنوان به دهیم

.کنیم ایجاد اصلی خطی نمودار پروژه در کوچکی تغییرات

اضافه Property مرحله اول برای ایجاد خواص وابستگی، یک فیلد استاتیک برای آن تعریف می کنیم، که با کلمه

:اضافه کنید code-behind شده به انتهای نام خواص تعریف می شود. کد زیر را به فایل

using System;






using System.Collections.Specialized;

namespace ChartControl

{

public partial class LineChart : UserControl

{

private ChartStyleControl cs;

public LineChart()

{

InitializeComponent();





this.cs = new ChartStyleControl();

this.cs.TextCanvas = textCanvas;

this.cs.ChartCanvas = chartCanvas;

}

private void chartGrid_SizeChanged(object sender, SizeChangedEventArgs e)

{

ResizeLineChart();

}

private void SetLineChart()

{

cs.Xmin = this.Xmin;

cs.Xmax = this.Xmax;

cs.Ymin = this.Ymin;

cs.Ymax = this.Ymax;

cs.XTick = this.XTick;

cs.YTick = this.YTick;

cs.XLabel = this.XLabel;

cs.YLabel = this.YLabel;

cs.Title = this.Title;

cs.IsXGrid = this.IsXGrid;

cs.IsYGrid = this.IsYGrid;

cs.GridlineColor = this.GridlineColor;

cs.GridlinePattern = this.GridlinePattern;





ResizeLineChart();

}

private void ResizeLineChart()

{

chartCanvas.Children.Clear();

textCanvas.Children.RemoveRange(1, textCanvas.Children.Count - 1);

cs.AddChartStyle(tbTitle, tbXLabel, tbYLabel);

if (DataCollection != null)

{

if (DataCollection.Count > 0)

{

cs.SetLines(DataCollection);

}

}

}

public static DependencyProperty XminProperty =

DependencyProperty.Register("Xmin", typeof(double), typeof(LineChart),

new FrameworkPropertyMetadata(0.0,

FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

public double Xmin





{

get { return (double)GetValue(XminProperty); }

set { SetValue(XminProperty, value); }

}

......

......

public static readonly DependencyProperty DataCollectionProperty =

DependencyProperty.Register("DataCollection",

typeof(BindableCollection<LineSeriesControl>), typeof(LineChart),

new FrameworkPropertyMetadata(null,

FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,

OnDataChanged));

public BindableCollection<LineSeriesControl> DataCollection

{

get { return (BindableCollection<LineSeriesControl>)GetValue(DataCollectionProperty); }

set { SetValue(DataCollectionProperty, value); }

}

private static void OnDataChanged(object sender, DependencyPropertyChangedEventArgs e)

{

var lc = sender as LineChart;

var dc = e.NewValue as BindableCollection<LineSeriesControl>;





if (dc != null)

dc.CollectionChanged += lc.dc_CollectionChanged;

}

private void dc_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)

{

if (DataCollection != null)

{

CheckCount = 0;

if (DataCollection.Count > 0)

CheckCount = DataCollection.Count;

}

}

public static DependencyProperty CheckCountProperty =

DependencyProperty.Register("CheckCount", typeof(int), typeof(LineChart),

new FrameworkPropertyMetadata(0,

FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,

new PropertyChangedCallback(OnStartChart)));

public int CheckCount

{

get { return (int)GetValue(CheckCountProperty); }

set { SetValue(CheckCountProperty, value); }

}





private static void OnStartChart(DependencyObject sender,

DependencyPropertyChangedEventArgs e)

{

(sender as LineChart).SetLineChart();

}

}

}

در اینجا فقط می خواهیم به شما نشان دهیم که چگونه خواص وابستگی را ایجاد کنید و کدهای تکراری را برای

تعریف خواص وابستگی حذف کنید. شما می توانید لیست کد کامل را در نمونه برنامه ضمیمه شده بررسی

با تکنیک های جدیدی WPF .را تعریف می کنیم Xmin برای وابستگی خواص چگونه ما که کنید توجه کنید.

خواص وابستگی است و جدید Property سیتم اصلی هسته از تعریف خواص برای یک کنترل را ارائه می دهد.

رجیستر برای wrapper را فراخوانی می کند. در اینجا ما از کالس DepedencyObject یک wrapper کالس

داخل آن باشد و Property در سیستم خواص استفاده می کنیم تا شیئ شاملXamin وابستگی خواص کردن

نباید شامل property wrapper کنیم. معموال set یا get را Property می توانیم به راحتی مقدار

از GetValue و SetValue ای باشد زیرا ممکن است به طور مستقیم و با استفاده از متدهای logic هرنوع

.تنظیم و بازیابی شود DependencyObject کالس پایه

تگیوابس خاصیت یک برای مقدار تنظیم از بعد را متدها و ها منطق برخی بخواهیم است ممکن در برخی شرایط،

از Property انجام دهیم که زمانی که یک callback متد یک سازی پیاده با را کارها این توانیم می .کند محاسبه

مستقیم فراخوانی می شود راه اندازی می شود. برای مثال، بعد از SetValue یا wrapper طریق

می باشد، می خواهیم کنترل نمودار را برای LineSeriesControl که شامل شیئ DataCollection ایجاد

-code فایل در شده پررنگ کد ایجاد کنیم. LineSeriesControl نمودار خطی مربوط به طور اتوماتیک برای

behind متد یک توان می قبلی نشان می دهد که چگونه callback را پیاده سازی

می باشد. در داخل این OnDataChanged با نام callback یک متد شامل DataCollectionProperty .کرد

اضافه می کنیم و این زمانی CollectionChanged برای خصوصیت handler یک رویداد callback متد

یک خواص وابستگی CollectionChanged handler تغییر کند راه اندازی می شود. در DataCollectionکه





< CheckCount فراخوانی می کنیم. اگر DataCollection را در CheckCount و دیگر تنظیم می کنیم

می باشد و به همین LineSeriesشامل اشیاء DataCollection باشد می فهمیم که 0

برای پیاده سازی می کنیم که OnStartChart دیگری با نام callback دمت خاطر

.می باشد SetLineChart متد فراخوانی با خطی نمودار در CheckCountتخصوصی

های عمومی را در کالس property ما SetLineChart توجه داشته باشید که داخل متد

ChartStyleControl برای خواص وابستگی مربوط به کنترل نمودار تنظیم کرده ایم. به این ترتیب هر زمان

نیز متعاقبا ChartStyleو Legend کالس هایتغییر کند خواص LineChart که خواص وابستگی در کالس

.تغییر خواهد کرد

به کنترل نمودار خطی اضافه می کنیم chartGrid_SizeChanged event handler در اینجا ما همچنین یک

شود به روز رسانی می شود. حاال می توانیم resize نمودار کنترل تنظیم می کند که هر زمان handler این

.(کنیم Build)،بسازیم Buildکنترل را توسط راست کلیک بر روی نام پروژه و انتخابکتابخانه

استفاده از کنترل نمودار

در آن تا اینجای کار ما یک کنترل نمودار خطی ایجاد شده داریم که می توانیم به راحتی از

نیاز داریم فضای نام دات WPF خود استفاده کنیم. برای استفاده از این کنترل در اپلیکیشن WpfChart پروژه

:را به صورت شکل زیر مونتاژ کنیم XML کنیم و فضای نام map نت را

xmlns:local="clr-namespace:ChartControl;assembly=ChartControl"

:کنیم map را نام فضای که داریم نیاز اگر کنترل نمودار در همان اپلیکیشن ما قرا گرفته باشد فقط

xmlns:local="clr-namespace:ChartControl





می توانید یک کاربر را به طور دقیق اضافه کنید user control و نام کالس XML با استفاده از فضای نام

.را اضافه کرده اید XAML همانطور که دیگر انواع شیئ فایل

ایجاد یک نمودار خطی ساده

استفاده کنیم. در WPF نمودار برای ایجاد یک نمودار خطی درحاال نشان خواهیم داد که چگونه از کنترل

را انتخاب کنید تا Add References راست کلیک کرده و References، بر رویWpfChart پروژه

را از پنل سمت Projects کلیک کرده و سپس Solution ظاهر شود. بر روی Reference Manager پنجره

کلیک کنید OK کنید. بر روی highlight را ChartControl چپ این پنجره انتخاب کرده و

به پروژه جاری اضافه شود. به این ترتیب شما می توانید از این کنترل در ChartControlتا

جدید به UserControl شبیه به المان های ساخته شده در آن استفاده کنید. یک WPF اپلیکیشن

برای XAMLقرار دهید. در اینجا فایل ChartControlView اضافه کرده و نام آن را WpfChart پروژه

:به صورت زیر است View این

<UserControl x:Class="WpfChart.ChartControlView"






mc:Ignorable="d"


<Grid>



<ColumnDefinition Width="150"/>










ایجاد کرده بودید، WPF در اینجا به سادگی یک کنترل نمودار خطی دقیقا مثل آنچه که برای دیگر انواع المان

سادگی به و کنیم می مشخص را Property GridlinePattern ایجاد می کنید. توجه کنید که چگونه ما

تعریف شده استفاده می کنیم. این بسیار ساده LinePatternEnum که در Solid, Dash, Dot, DashDot از

می باشد که شما نیاز به تعیین نوع مسیر کامل به منظور تعریف الگوی code-behind تر از استفاده

رل جهت کنت WPF دارید. همچنین می توانید دیگر خصوصیت های استاندارد برای المان های gridlinesخطی

می باشد. BackGround و CanvasLeft ، CanvasTop نمودار را مشخص کنید که مانند عرض، ارتفاع،

های استاندارد اجازه می دهند کنترل را قرا داده و اندازه کنترل را تنظیم کنید یا رنگ پس زمینه Property این

.کنترل را انتخاب کنید

قرا ر می دهیم. در ChartControlViewModel و نام آن را حاال یک کالس جدید به پروژه اضافه می کنیم

:اینجا کد کالس به صورت زیر نشان داده شده است

using System;






using ChartControl;

namespace WpfChart

{


public class ChartControlViewModel : Screen

{


public ChartControlViewModel()





{

DisplayName = "03. Chart Control";

DataCollection = new BindableCollection<LineSeriesControl>();

}

public BindableCollection<LineSeriesControl> DataCollection{get;set;}


{

DataCollection.Clear();

LineSeriesControl ds = new LineSeriesControl();



ds.SeriesName = "Sine";


for (int i = 0; i < 50; i++)

{

double x = i / 5.0;



}

DataCollection.Add(ds);

ds = new LineSeriesControl();







ds.SeriesName = "Cosine";


for (int i = 0; i < 50; i++)

{

double x = i / 5.0;



}


}

}

}

ایجاد کردیم، نیاز داریم که سری های خطی را ایجاد کرده و درست مثل زمانی که ما نمودارهای قبلی را از پیش

کنترل اضافه کنیم. زیبایی استفاده از کنترل نمودار این است که ما می DataCollectionسپس آنها را به نمودار

ز ااستاندارد در اپلیکیشن استفاده کنیم، حتی از طریق ایجاد کنترل نمودار با استفاده MVVM توانید از الگوی

View را در DataCollectionدر اینجا ما فقط خصوصیت . Code behind خواص وابستگی و روش

Model تعریف کردیم) نیازی به پیاده سازی رابط INotifyCollectionChanged برای

تصل وجود دارد( و این را به کنترل نمودار م interface نداریم زیرا به صورت ساخته شده در اینcollection این

محدود Caliburn.Micro با نامگذاری View نیز به دکمه در View Model در AddChart می کند. متد

ایجاد کردیم که مطابق با نیازمندی های View Model و View است. به این ترتیب ما یک جداسازی کامل بین

.می باشد MVVM الگوی





ی که در شکل زیر نشان داده شده را می دهد. شما می نتیجه ا Chart اجرای این مثال و کلیک بر روی دکمه

.توانید نمودار را تغییر اندازه دهید تا ببینید که چگونه نمودار به طور خودکار آپدیت می شود

ایجاد چندین نمودار خطی

کنید. اجازه ایجاد WPF با استفاده از کنترل نمودار خطی می توانید به آسانی نمودارهای متعددی در یک پنجره

قرار دهیم.یک کنترل MultiChartView جدید به پروژه اضافه کنیم ونام آن را UserControl دهید یک





از استفاده با تواند می که کنید اضافه گرید سلول 4 هر برای نمودار کنترل یک و کرده ایجاد گرید دو به دو

:زیر انجام شود XAML فایل

<UserControl x:Class="WpfChart.MultiChartView"





xmlns:cal="http://www.caliburnproject.org"


mc:Ignorable="d"


<Grid cal:Message.Attach="[Event Loaded]=[Action AddChart]">


<ColumnDefinition/>

<ColumnDefinition/>


نام دارد. برای سادگی Chart1, Chart2, Chart3, Chart4 کنترل نمودرا خطی ایجاد می کنیم که 4در اینجا ما

یک نمودار هر برای کنیم. اماکار در این مثال توابع داده ای مشابه روی نمودار رسم می

مودارن هر روی را متفاوتی ریاضی توابع توانیم می عمل در. کنیم می تنظیم متفاوت GridlineColor خصوصیت

.کنیم رسم خود اپلیکیشن های نیازمندی به توجه با

دهید. کد قرار MultiChartViewModel اضافه کرده و نام آن را ViewModels یک کالس جدید به فولدر

:این کالس به صورت زیر است

using System;






http://www.caliburnproject.org/










using ChartControl;

namespace WpfChart

{


public class MultiChartViewModel : Screen

{

private readonly IEventAggregator _events;


public MultiChartViewModel()

{

this._events = events;

DisplayName = "02. Multiple Charts";

DataCollection = new BindableCollection<LineSeriesControl>();

}

public BindableCollection<LineSeriesControl> DataCollection { get; set; }






{

DataCollection.Clear();

LineSeriesControl ds = new LineSeriesControl();



ds.SeriesName = "Sine";


for (int i = 0; i < 50; i++)

{

double x = i / 5.0;



}


ds = new LineSeriesControl();



ds.SeriesName = "Cosine";


for (int i = 0; i < 50; i++)

{

double x = i / 5.0;







}


}

}

}

کنترل 4مشابه مثال قبلی است که در آن یک نمودار خطی تکی ایجاد کرده بودید. در اینجا View Model این

می WPF مشابه متصل می شود. مانند بقیه المانهای ساخته شده در DataCollectionهای نمودار خطی به شیئ

.تکی قرار دهید WPF اپلیکیشن یک در نیاز، اساس توانید بسیاری از کنترل های نمودار را بر

.شکل زیر نتایج اجرای این مثال را نشان می دهد
