In this step, you'll add assembly references and a C1Chart control to your application. You'll also set some the C1Chart control's properties using XAML markup.
- Right-click the References folder from your Visual Studio Solution Explorer. Select Add Reference from the context menu. The Reference Manager will open.
- Select the drop-down arrow next to the Windows option in the left side of the Reference Manager. Select Extensions from the list.
- Check the arrows next to the C1.Xaml and C1.Xaml.Chart assemblies.
- Select OK to add the references to your project.
- Locate the MainPage.xaml file in the Solution Explorer. Double-click to open the file.
- Place your cursor between the <Grid> </Grid> tags on the page.
- Locate the C1Chart control in your Visual Studio ToolBox. Double-click the control to add it to your page. The following markup and a namespace declaration will be added to your page:
| XAML Markup |
Copy Code
|
<Chart:C1Chart > </Chart:C1Chart>
|
- Edit the opening Chart tag so that it resembles the following. With this markup you'll set the ChartType property, the Alignment properties, the Height property, and the Width property:
| XAML Markup |
Copy Code
|
<Chart:C1ChartChartType="Gantt"Height="550"HorizontalAlignment="Center"Margin="11,12,0,0"Name="chart"VerticalAlignment="Center"Width="770" >
|
- Set the Loaded Event: edit the <Chart:C1Chart> tag so that it resembles the following:
| XAML Markup |
Copy Code
|
<Chart:C1ChartChartType="Gantt"Height="287"HorizontalAlignment="Left"Margin="11,12,0,0"Name="chart"VerticalAlignment="Top"Width="482"Loaded="Page_Loaded" >
|
- Place your cursor between the <Chart:C1Chart> </Chart:C1Chart> tags. Add the following markup to define the X Axis:
| XAML Markup |
Copy Code
|
<Chart:C1Chart.View>
<Chart:ChartView>
<Chart:ChartView.AxisX>
<Chart:Axis IsTime="True" AnnoFormat="hh:mm"/>
</Chart:ChartView.AxisX>
</Chart:ChartView>
</Chart:C1Chart.View>
|
- Next, you'll add some resources for your application. Place your cursor above the <Grid> </Grid> tags and add the following tag set:
| XAML Markup |
Copy Code
|
<Page.Resources>
</Page.Resources>
|
- Reference the StringFormatConverter that you'll add in the next step:
| XAML Markup |
Copy Code
|
<local:StringFormatConverterx:Key="StringFormat"/>
|
- Then add the DataTemplates for the chart's label elements:
| XAML Markup |
Copy Code
|
<DataTemplatex:Key="lbl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="*"/>
<ColumnDefinitionWidth="*"/>
</Grid.ColumnDefinitions>
<!--Display Start values-->
<TextBlockHorizontalAlignment="Stretch"VerticalAlignment="Stretch"
Text="{BindingPath=Series.LowValuesSource[0],Converter={StaticResourceStringFormat},ConverterParameter='{}{0:hh-mm}'}"TextWrapping="Wrap"Margin="4,4,4,4"
Grid.ColumnSpan="1"Name="txtStart" />
<!--Display task names-->
<TextBlockHorizontalAlignment="Stretch"VerticalAlignment="Stretch"
Text="{BindingPath=Series.Label}" TextWrapping="Wrap"Grid.Column="1"Margin="4,4,4,4"
Grid.ColumnSpan="1"Name="txtName" />
<!--Display End values-->
<TextBlockHorizontalAlignment="Stretch"VerticalAlignment="Stretch"
Text="{BindingPath=Series.HighValuesSource[2],Converter={StaticResourceStringFormat},ConverterParameter='{}{0:hh-mm}'}"TextWrapping="Wrap"Grid.Column="2"
Margin="4,4,4,4"Grid.ColumnSpan="1"Name="txtEnd" />
</Grid>
</DataTemplate>
|
- Lastly, add the Styles that will be applied to your project:
| XAML Markup |
Copy Code
|
<SolidColorBrushx:Key="CE_SampleForeground"Color="#FFF0F8FE"/>
<Stylex:Key="CE_SampleHighlightBkg"TargetType="Border">
<SetterProperty="Background"Value="#ff071D2E" />
<SetterProperty="Padding"Value="4" />
<SetterProperty="Margin"Value="2" />
<SetterProperty="CornerRadius"Value="3" />
</Style>
<Stylex:Key="CE_SampleChart"TargetType="Chart:C1Chart">
<SetterProperty="Foreground"Value="#FFF0F8FE" />
<SetterProperty="Background"Value="#ff071D2E" />
<SetterProperty="BorderBrush"Value="#FF8FB4CC" />
<SetterProperty="BorderThickness"Value="1" />
<SetterProperty="Padding"Value="10" />
</Style>
|
In this step, you added assembly references and a C1Chart control to your application. You also set some of the C1Chart control's properties using XAML markup, and created resources for your application.