Создание графика в Silverlight на основании данных из БД SQL

Создаем приложение Silverlight 4 в Visual Studio 2010:


Ставим настройки приложения Silverlight как на картинке:



Появится приложение, включающее в себя два проекта: проект страницы asp.net, на которой будет размещаться график Silverlight и сам проект приложения Silverlight:

Добавляем в проект сайта LINQ to SQL classes(нужен для получения данных из баз данных):

Откроется окно дизайнера, в котором можно добавить таблицы для использования их потом в нашем проекте Silverlight:

Создаем подключение к базе данных SQL:




Для того, чтобы приложение Silverlight могло получить данные из sql добавляем в проекте сайта службу, которая и будет передавать эти данные в Silverlight (Silverlight-enabled WCF service):

Заменяем код внутри класса Service на код, выводящий нужные нам данные из БД SQL:
[OperationContract]
List<D_Scenario> GetAllMG()
{
DataClassesDataContext context = new DataClassesDataContext();
var result = (from c in context.D_Scenario

select c).Take(5).ToList();
return result;
}
В данном случае из таблицы D_Scenario выводятся 5 первых записей.
Добавляем в проект сайта ссылку на библиотеку System.Data.Services.Client.
Далее в приложении Silverlight создаем ссылку на службу, которую мы создали в проекте сайта:



Добавляем в Silverlight проект ссылку на библиотеку: System.Windows.Controls.DataVisualization.Toolkit (нужна для построения графика).
Создаем в Silverlight проекте библиотеку DifficultyLevel.cs.
Копируем туда код:
using System;

namespace System.Windows.Controls.Samples
{
/// <summary>
/// Describes the level of difficulty of the sample.
/// </summary>
public enum DifficultyLevel
{
/// <summary>
/// Used when Sample does not need to be categorized.
/// </summary>
None = 0,

/// <summary>
/// Used for basic samples.
/// </summary>
Basic = 1,

/// <summary>
/// Used for intermediate samples.
/// </summary>
Intermediate = 2,

/// <summary>
/// Used for advanced samples.
/// </summary>
Advanced = 3,

/// <summary>
/// Used for scenario samples.
/// </summary>
Scenario = 4
}
}

Создаем в Silverlight проекте библиотеку ISampleMetadata.cs.
Копируем туда код:
using System;

namespace System.Windows.Controls.Samples
{
/// <summary>
/// Set of metadata needed for each sample.
/// </summary>
public interface ISampleMetadata
{
/// <summary>
/// Gets the Sample name.
/// </summary>
string Name { get; }

/// <summary>
/// Gets the Sample DifficultyLevel.
/// </summary>
DifficultyLevel DifficultyLevel { get; }

/// <summary>
/// Gets the Sample category.
/// </summary>
string Category { get; }
}
}

Создаем в Silverlight проекте библиотеку SampleAttribute.cs.
Копируем туда код:
using System;
using System.ComponentModel.Composition;
using System.Diagnostics;

namespace System.Windows.Controls.Samples
{
/// <summary>
/// The SampleAttribute identifies sample name and level of difficulty.
/// </summary>
[MetadataAttribute]
[AttributeUsage(AttributeTargets.Class, AllowMultiple = false)]
public sealed partial class SampleAttribute : ExportAttribute, ISampleMetadata
{
/// <summary>
/// Gets the path to the sample in the Sample Browser tree.
/// </summary>
public string Name { get; private set; }

/// <summary>
/// Gets the difficulty level of the sample.
/// </summary>
public DifficultyLevel DifficultyLevel { get; private set; }

/// <summary>
/// Gets the category for this sample.
/// </summary>
public string Category { get; private set; }

/// <summary>
/// Initializes a new instance of the SampleAttribute class.
/// </summary>
/// <param name="name">
/// Name of the sample.
/// </param>
/// <param name="difficultyLevel">
/// Difficulty Level of the sample.
/// </param>
/// <param name="category">
/// Category of the sample.
/// </param>
public SampleAttribute(string name, DifficultyLevel difficultyLevel, string category)
: base("Sample", typeof(FrameworkElement))
{
Debug.Assert(!string.IsNullOrEmpty(name), "name should not be empty!");
Name = name;
DifficultyLevel = difficultyLevel;
Category = category;
}
}
}

Заменяем код внутри файла MainPage.xaml.cs на этот:
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Linq;
using System.Diagnostics;
using System.Windows.Media;
using System.ComponentModel;
using SilverlightApplication10.ServiceReference1;
namespace System.Windows.Controls.Samples
{

[Sample("Zoom", DifficultyLevel.Scenario, "DataVisualization")]
public partial class SeriesZoomSample : UserControl
{
private Panel chartArea;
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode", Justification = "Called by ZoomChanged.")]
private Panel ChartArea
{
get
{
if (chartArea == null)
{
chartArea = GetLogicalChildrenBreadthFirst(ZoomChart).Where(element => element.Name.Equals("ChartArea")).FirstOrDefault() as Panel;
}

return chartArea;
}
}

private ScrollViewer scrollArea;
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode", Justification = "Called by an event handler in XAML.")]
private ScrollViewer ScrollArea
{
get
{
if (scrollArea == null)
{
scrollArea = GetLogicalChildrenBreadthFirst(ZoomChart).Where(element => element.Name.Equals("ScrollArea")).FirstOrDefault() as ScrollViewer;
}
return scrollArea;
}
}

public SeriesZoomSample()
{
////
ServiceClient WCFService = new ServiceClient();
WCFService.GetAllMGCompleted += new EventHandler<GetAllMGCompletedEventArgs>(SetSales);
WCFService.GetAllMGAsync();
////
InitializeComponent();
this.Loaded += ZoomIntoChartSample_Loaded;
}

private void ZoomIntoChartSample_Loaded(object sender, RoutedEventArgs e)
{
// force synchronous layout pass
ZoomChart.UpdateLayout();

// and force initial zoom
UpdateChart(0);
}
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode", Justification = "Called by an event handler in XAML.")]
private void ZoomChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
Debug.Assert(ChartArea != null && ScrollArea != null, "Zoom should not be called before layout has occurred");

double zoom = e.NewValue;

UpdateChart(zoom);
}
private void UpdateChart(double zoom)
{
ChartArea.Width = ScrollArea.ViewportWidth + (ScrollArea.ViewportWidth * zoom / 100.0);
}

[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode", Justification = "Called by ChartArea and ScrollArea.")]
private IEnumerable<FrameworkElement> GetLogicalChildrenBreadthFirst(FrameworkElement parent)
{
Debug.Assert(parent != null, "The parent cannot be null.");

Queue<FrameworkElement> queue =
new Queue<FrameworkElement>(GetVisualChildren(parent).OfType<FrameworkElement>());

while (queue.Count > 0)
{
FrameworkElement element = queue.Dequeue();
yield return element;

foreach (FrameworkElement visualChild in GetVisualChildren(element).OfType<FrameworkElement>())
{
queue.Enqueue(visualChild);
}
}
}
private IEnumerable<DependencyObject> GetVisualChildren(DependencyObject parent)
{
Debug.Assert(parent != null, "The parent cannot be null.");

int childCount = VisualTreeHelper.GetChildrenCount(parent);
for (int counter = 0; counter < childCount; counter++)
{
yield return VisualTreeHelper.GetChild(parent, counter);
}
}



private void SetSales(object sender, GetAllMGCompletedEventArgs e)
{
ZoomChart.DataContext= e.Result;

}
}
}
Здесь мы создавали логику приложения Silverlight.
Далее меняем код в MainPage.xaml на этот:
<UserControl x:Class="System.Windows.Controls.Samples.SeriesZoomSample"
xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:chartingPrimitivesToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit">

<UserControl.Resources>
<ControlTemplate TargetType="chartingToolkit:Chart" x:Key="ZoomChartTemplate">
<Border

Padding="5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<visualizationToolkit:Title/>

<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>



<ScrollViewer
x:Name="ScrollArea" BorderThickness="0"
HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden">
<chartingPrimitivesToolkit:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
<Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
<Border Canvas.ZIndex="1" BorderBrush="#FF919191" BorderThickness="1" />
</chartingPrimitivesToolkit:EdgePanel>
</ScrollViewer>
</Grid>
</Grid>
</Border>
</ControlTemplate>

</UserControl.Resources>

<StackPanel Background="White">

<ContentControl Content="Zooming a Series"/>

<chartingToolkit:Chart HorizontalAlignment="Left" Width="450" Height="320" Template="{StaticResource ZoomChartTemplate}" x:Name="ZoomChart" Title="Zoomable">
<chartingToolkit:LineSeries
Title="Widget Popularity"
ItemsSource="{Binding}"
IndependentValuePath="Name" DependentValuePath="lvlPosition" />
<chartingToolkit:LineSeries
Title="Gizmo Popularity"
ItemsSource="{Binding}" IndependentValuePath="Name" DependentValuePath="OwnerId" />
</chartingToolkit:Chart>

<StackPanel Margin="5,10,0,0" Orientation="Horizontal" >
<TextBlock Text="Zoom:" />
<Slider Margin="5,0,0,0" Width="250" Minimum="0" Maximum="500" ValueChanged="ZoomChanged" />
</StackPanel>

</StackPanel>
</UserControl>

Здесь мы описывали, как будет выглядеть готовый график.
Компилируем проект. В итоге у нас получился линейный график: