In this step, you'll add code that adds three HighLowSeries that will appear on the same line. This will allow you to give the impression of a single task.
- Open the MainPage.xaml.cs file by right-clicking on the current page and selecting View Code from the context menu.
- Add the following namespaces to the declarations at the top of your page:
| C# |
Copy Code
|
using C1.Xaml.Chart;
using Windows.UI;
|
- Add the following code after the MainPage() constructor:
| C# |
Copy Code
|
private void Page_Loaded(object sender, RoutedEventArgs e)
{
}
|
- Add the first HighLowSeries within the Page_Loaded event, and the code that adds the data to the chart:
| C# |
Copy Code
|
C1.Xaml.Chart.HighLowSeries ds1 = new HighLowSeries()
{
XValuesSource = new int[] { 0 },
LowValuesSource = new DateTime[] { new DateTime(2014, 1, 1, 9, 0, 0) },
HighValuesSource = new DateTime[] { new DateTime(2014, 1, 1, 9, 15, 0) }
};
chart.Data.Children.Add(ds1);
ds1.Label = "Prepare";
ds1.PointLabelTemplate = this.Resources["lbl"] as DataTemplate;
|
- Add the second HighLowSeries and the code that adds the data to the chart:
| C# |
Copy Code
|
C1.Xaml.Chart.HighLowSeries ds2 = new HighLowSeries()
{
XValuesSource = new int[] { 0 },
LowValuesSource = new DateTime[] { new DateTime(2014, 1, 1, 9, 15, 0) },
HighValuesSource = new DateTime[] { new DateTime(2014, 1, 1, 9, 30, 0) }
};
chart.Data.Children.Add(ds2);
ds2.Label = "Cook";
ds2.PointLabelTemplate = this.Resources["lbl"] as DataTemplate;
|
- Add the third and last HighLowSeries and the code that adds the data to the chart:
| C# |
Copy Code
|
C1.Xaml.Chart.HighLowSeries ds3 = new HighLowSeries()
{
XValuesSource = new int[] { 0 },
LowValuesSource = new DateTime[] { new DateTime(2014, 1, 1, 9, 30, 0) },
HighValuesSource = new DateTime[] { new DateTime(2014, 1, 1, 10, 00, 0) }
};
chart.Data.Children.Add(ds3);
ds3.Label = "Serve";
ds3.PointLabelTemplate = this.Resources["lbl"] as DataTemplate;
|
- Next, you'll set the palette for the chart:
| C# |
Copy Code
|
var palette = new Brush[] {
new SolidColorBrush(Colors.Red),
new SolidColorBrush(Colors.Blue),
new SolidColorBrush(Colors.Orange)
};
|
- Add the PlotElementLoaded events that will fill each data series with a different color:
| C# |
Copy Code
|
ds1.PlotElementLoaded += (s, a) =>
{
PlotElement pe = (PlotElement)s;
if (pe.DataPoint.PointIndex >= 0)
pe.Fill = palette[0];
};
ds2.PlotElementLoaded += (s, a) =>
{
PlotElement pe = (PlotElement)s;
if (pe.DataPoint.PointIndex >= 0)
pe.Fill = palette[1];
};
ds3.PlotElementLoaded += (s, a) =>
{
PlotElement pe = (PlotElement)s;
if (pe.DataPoint.PointIndex >= 0)
pe.Fill = palette[2];
};
|
- Then add an ItemName for the data series:
| C# |
Copy Code
|
chart.Data.ItemNames = new string[] { "Dinner" };
}
}
|
- Because the WinRT runtime is missing the StringFormat property, you'll need a converter:
| C# |
Copy Code
|
public sealed class StringFormatConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value == null)
return null;
if (parameter == null)
return value;
return string.Format((string)parameter, value);
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
}
|
In this step, you added the code that added three HighLowSeries that will appear on the same line. This gives the impression of a single task.