Displaying Graphs with an Object Oriented Approach using Silverlight SDK and Visual Studio 2008 - Displaying the Silverlight graph for a particular product
(Page 4 of 5 )
This is available in the “SilverlightTest” project. A web reference to “NorthwindService” is added to this. It simply displays the information (dynamically) as shown below:
Product Name (TextBlock)
Sale Value (TextBlock)
Graph Outline (Rectangle with White fill)
Graph Fill (Rectangle with Brown fill)
Percentage of Sale Value (TextBlock)
The following is the code for adding the objects to the Silverlight canvas:
Partial Public Class Page
Inherits Canvas
Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
' Required to initialize variables
InitializeComponent()
Dim svcNorthwind As New NorthwindService.ProductService
Dim objProject As NorthwindService.Product = svcNorthwind.GetProductInfo(38)
Dim TotalSaleValue As Double = svcNorthwind.GetTotalSaleValue
Dim ProductSalePercentage As Double = Math.Round((objProject.SaleTillToDate * 100) / (TotalSaleValue), 2)
'adding textblock related to Product Name
Dim tbProductName As New TextBlock
With tbProductName
.Text = objProject.ProductName
.Width = 172
.Height = 16
.FontSize = 12
.TextWrapping = TextWrapping.Wrap
.SetValue(Canvas.LeftProperty, 8)
.SetValue(Canvas.TopProperty, 8)
End With
Me.Children.Add(tbProductName)
'adding textblock related to Sale value
Dim tbSaleValue As New TextBlock
With tbSaleValue
.Text = objProject.SaleTillToDate
.Width = 140
.Height = 16
.FontSize = 12
.TextWrapping = TextWrapping.Wrap
.SetValue(Canvas.LeftProperty, 195)
.SetValue(Canvas.TopProperty, 8)
End With
Me.Children.Add(tbSaleValue)
'adding rectangle related to graph outline
Dim rGraphOutline As New Rectangle
With rGraphOutline
.Width = 222
.Height = 16
.Fill = New SolidColorBrush(Colors.White)
.Stroke = New SolidColorBrush(Colors.Black)
.SetValue(Canvas.LeftProperty, 351)
.SetValue(Canvas.TopProperty, 8)
End With
Me.Children.Add(rGraphOutline)
'adding rectangle related to graph fill
Dim rGraphFill As New Rectangle
With rGraphFill
.Width = (222 * ProductSalePercentage) / 100
.Height = 16
.Fill = New SolidColorBrush(Colors.Brown)
.Stroke = New SolidColorBrush(Colors.Black)
.SetValue(Canvas.LeftProperty, 351)
.SetValue(Canvas.TopProperty, 8)
End With
Me.Children.Add(rGraphFill)
'adding textblock related to Percentage
Dim tbPercentage As New TextBlock
With tbPercentage
.Text = ProductSalePercentage & "%"
.Width = 64
.Height = 16
.FontSize = 12
.TextWrapping = TextWrapping.Wrap
.SetValue(Canvas.LeftProperty, 577)
.SetValue(Canvas.TopProperty, 8)
End With
Me.Children.Add(tbPercentage)
End Sub
End Class
Hit F5 to execute the application and point your URL to
http://localhost/SilverlightTest/TestPage.html
Pointing to the URL manually as above (in the browser) is essential, because the request to the web service must be from the same web server as that of Silverlight project. Otherwise, it may raise issues related to “cross domain access.”
Even though you are pointing manually to the localhost, the Silverlight project can still be debugged in the same traditional manner. The URL must be pointed to in the browser window which came up when F5 is hit (otherwise, you will have to attach the process for debugging).
If everything went well, you should see the output as follows:
Next: Displaying the Silverlight graph for all products (multiple rows) >>
More ASP.NET Articles
More By Jagadish Chaterjee
