For my 3rd year SEP project my supervisor want me to add mathematical graphs for the Question Generating System. So I was looking for WPF libraries. I found several libraries for graphing but there was no proper documentation. Finally I found a book about WPF graphing called “practical WPF graphs and graphics” by Jack Xu. So I could easily draw graphs inside application. So I am going to put an article about how to draw a graph inside a WPF application.
It is easy to create a 2D X-Y line chart in WPF. Let’s use an example to illustrate the procedure. Start with
a new WPF Windows project and name it LineCharts. Add a new WPF Window to the project and name it
SimpleLineChart. I’ll create the user interface and layout using XAML and perform the computations
and generate the data in code. The XAML file for this example is very simple:


<Window x:Class="LineCharts.SimpleLineChart"

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

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

Title="Simple Line Chart" Height="300" Width="300">

<Grid Margin="0" x:Name ="chartGrid" ClipToBounds="True"

Background="Transparent" SizeChanged="chartGrid_SizeChanged">

<Border HorizontalAlignment="Center" VerticalAlignment="Center"

BorderBrush="Gray" BorderThickness="1"

Background="White" Margin="0">

<Canvas Margin="0" x:Name ="chartCanvas" ClipToBounds="True"

Background="Transparent"/>

</Border>

</Grid>

</Window> Here I implement a resizable Canvas element, chartCanvas, on which we want to create the
simple line chart. Here is the corresponding code-behind file, which creates the line chart, for this
example:
using System;

using System.Collections.Generic;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Shapes;

namespace LineCharts

{

public partial class SimpleLineChart : System.Windows.Window

{

private double xmin = 0;

private double xmax = 6.5;

private double ymin = -1.1;

private double ymax = 1.1;

private Polyline pl;

public SimpleLineChart()

{

InitializeComponent();

}

private void AddChart()

{

// Draw sine curve:

pl = new Polyline();

pl.Stroke = Brushes.Black;

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

{

double x = i/5.0;

double y = Math.Sin(x);

pl.Points.Add(NormalizePoint(new Point(x, y)));

}

chartCanvas.Children.Add(pl);

// Draw cosine curve:

pl = new Polyline();

pl.Stroke = Brushes.Black;

pl.StrokeDashArray = new DoubleCollection(new double[] { 4, 3 });

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

{

double x = i / 5.0;

double y = Math.Cos(x);

pl.Points.Add(NormalizePoint(new Point(x, y)));

}

chartCanvas.Children.Add(pl);

}

private Point NormalizePoint(Point pt)

{

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;

}

private void chartGrid_SizeChanged(object sender, SizeChangedEventArgs e)

{

chartCanvas.Width = chartGrid.ActualWidth;

chartCanvas.Height = chartGrid.ActualHeight;

chartCanvas.Children.Clear();

AddChart();

}

}

}

What is metro?
In Windows Phone 7, Microsoft introduced its Metro style user interface. The Metro style UI is the touch-and-tile interface that Microsoft designed to create an interface focused on content, information, and movement. It is designed to embrace 5 principles: clean, light, fast, open aesthetics; dynamic, moving transitions and interactions; embrace the beauty of typography; content-focused interface; and authentically digital design.
The user interface for Windows 8 will be the Metro style UI. The Metro style works particularly well with new tablet and touch-screen devices. Windows 8 features such as user log in with tap and trace gestures, and accessing the new charms menu with a swipe are just a couple of the ways in which Microsoft uses the Metro UI to work well with new hardware as well as hardware users already own.
In the present, lot of desktop and web designers use metro concepts to develop their products, because it is very attractive and it is the trend. For our 3rd year project system totally developed base on Metro concepts.
In this post I am going to discuss how to add Metro style for our desktop applications.

Our project, we use Mahapps.metro which is easily download via Nugets. Simply go to Nuget console in visual studio and type PM> Install-Package MahApps.Metro
Official documentation :- http://mahapps.com/MahApps.Metro/

Windows Presentation Foundation (WPF) is a Computer Software graphical subsystem for rendering user interfaces in Windows-based applications by Microsoft. WPF attempts to provide a consistent programming model for building applications and separates the user interface from business logic. WPF use XAML to define and link various UI elements. WPF applications can also be deployed as standalone desktop programs, or hosted as an embedded object in a website. WPF aims to unify a number of common user interface elements, such as 2D/3D rendering, vector graphics, run time animation, and pre-rendered media.

How to do animations in WPF?
If you understand a few important concepts about the timing system, WPF animations can be easier to use. Most important is that, in WPF, you animate objects by applying animation to their individual properties. For example, to make a framework element grow, you animate its Width and Height properties. To make an object fade from view, you animate its Opacity property.

In this blog post I am going to discuss two ways of doing WPF animations. So I am going to show how to do a fade in fade out animation to a Text Box by using its Opacity property.
First we need to write an animation method to a given time period. My first approach I am going to implement it inside the window resources.
When the Text Box visibility property changes Hidden to Visible animation get automatically fire. To apply an animation to an object, I create a Storyboard and use the Target Property attached properties to specify the object and property to animate. Because the Opacity property is of type Double, you need an animation that produces double values. A DoubleAnimation is use for that purpose. A DoubleAnimation creates a transition between two double values. To specify its starting value, set From property. To specify its ending value, set To property.
Then I am going to bind this animation method with the Text Box.
Then I change the visibility property of the Text Box to Visible by using a Button in run time then it appears the fade animation that I have done to the Text Box.