Chart for WinRT
Step 1 of 3: Setting Up the Application

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.

 

  1. Right-click the References folder from your Visual Studio Solution Explorer. Select Add Reference from the context menu. The Reference Manager will open.
  1. Select the drop-down arrow next to the Windows option in the left side of the Reference Manager. Select Extensions from the list.
  2. Check the arrows next to the C1.Xaml and C1.Xaml.Chart assemblies.
  3. Select OK to add the references to your project.
  1. Locate the MainPage.xaml file in the Solution Explorer. Double-click to open the file.
  2. Place your cursor between the <Grid> </Grid> tags on the page.
  3. 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>
  1. 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" >
  1. 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" >
  1. 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>
  1. 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>
  1. Reference the StringFormatConverter that you'll add in the next step:
XAML Markup
Copy Code
<local:StringFormatConverterx:Key="StringFormat"/>
  1. 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>
  1. 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.

 

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback