- Right-click the References folder in the Solution Explorer and select Add Reference…
- In the Reference Manager, select the drop-down arrow next to Windows and select Extensions from the list.
- Select the C1.Xaml and C1.Xaml.Chart assemblies and click OK. The references will be added to your project.
- Locate the MainPage.xaml file in theSolution Explorer and double-click the file name to open it.
- Edit the opening <Grid> tag below the namespace declarations so that it resembles the following:
| XAML Markup |
Copy Code
|
<GridBackground="Snow">
|
- Place your cursor between the <Grid> </Grid> tags and insert the following markup:
| XAML Markup |
Copy Code
|
<GridMargin="100 0 80 40">
<Grid.RowDefinitions>
<RowDefinitionHeight="140"/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
|
- Add the following markup below the row definitions to add a general TextBlock control:
| XAML Markup |
Copy Code
|
<TextBlockText="Temperature"Style="{StaticResourceHeaderTextBlockStyle}"VerticalAlignment="Center"/>
|
- Directly below the TextBlock control, add a C1Chart control by locating it in your Visual Studio ToolBox and double-clicking it. The markup should resemble the following:
| XAML Markup |
Copy Code
|
<Chart:C1Chart>
</Chart:C1Chart>
|
- Edit the opening C1Chart tag so that it resembles the following. This will give your control a unique name so that you can call it through code later, and customize the control by setting the Palette property:
| XAML Markup |
Copy Code
|
<Chart:C1Chartx:Name="c1Chart1"Grid.Row="1"Palette="Concourse">
|
- Place your cursor between the <Chart:C1Chart> </Chart:C1Chart> tags and insert the following markup. This will format the Axes:
| XAML |
Copy Code
|
<Chart:C1Chart.View>
<Chart:ChartView>
<Chart:ChartView.AxisY>
<Chart:AxisMajorTickThickness="0"MinorTickThickness="0">
<Chart:Axis.AxisLine>
<LineStrokeThickness="0"Visibility="Collapsed"/>
</Chart:Axis.AxisLine>
</Chart:Axis>
</Chart:ChartView.AxisY>
<Chart:ChartView.AxisX>
<Chart:AxisMajorTickThickness="0"MinorTickThickness="0">
<Chart:Axis.AxisLine>
<LineStrokeThickness="0"Visibility="Collapsed"/>
</Chart:Axis.AxisLine>
</Chart:Axis>
</Chart:ChartView.AxisX>
</Chart:ChartView>
</Chart:C1Chart.View>
|
In this step, you created a new application, added both general and ComponentOne controls to your project, and formatted the C1Chart's Axes. In the next step, you'll add code to create an ObservableCollection of new weather data, bind the data to the chart, and customize the chart's appearance.