In this step, you'll add the markup and code to create the RegionSale.xaml page that you added in Step 1.
- From the Solution Explorer, double-click RegionSale.xaml to open it.
- Add the following namespaces to the <Page> tag:
- xmlns:local="using:RegionSales"
- xmlns:sp="using:C1.Xaml.Sparkline"
- Locate the opening <Grid> tag and edit it to resemble the following:
| Markup |
Copy Code
|
<Grid Background="#EFEFEF">
|
- Place your cursor between the <Grid> </Grid> tags and insert the following markup. This will add the necessary column definitions to your application:
| Markup |
Copy Code
|
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
|
- Directly below the column definitions, add the following markup to add the TextBlock controls, C1Sparkline controls, and a Border to correspond with the <Grid> columns:
| Markup |
Copy Code
|
<TextBlock Text="{Binding State}" Foreground="#444444" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5" FontFamily="Global User Interface" x:Name="text"/>
<TextBlock Text="{Binding TotalSalesFormatted}" Grid.Column="1" FontSize="14" Foreground="#444444" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5" FontFamily="Global User Interface"/>
<TextBlock Text="{Binding NetSales}" Grid.Column="2" FontSize="14" Foreground="#444444" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5" FontFamily="Global User Interface"/>
<sp:C1Sparkline Grid.Column="3" Height="50" FontFamily="Global User Interface" Margin="10" x:Name="sparkline"/>
<sp:C1Sparkline SparklineType="Winloss" Grid.Column="4" Height="40" Margin="10" FontFamily="Global User Interface" x:Name="sparklineWinloss" />
<sp:C1Sparkline SparklineType="Column" Grid.Column="5" Height="50" FontFamily="Global User Interface" Margin="10" x:Name="sparklineColumn"/>
<Border Grid.ColumnSpan="6" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" BorderThickness="1" BorderBrush="#CCCCCC" />
|
- Right-click the page and select View Code from the list to open the RegionSale.xaml.cs file.
- Add the following code directly below the InitializeComponent() method:
| C# |
Copy Code
|
this.DataContext = data;
sparkline.Data = data.Data;
sparklineColumn.Data = data.Data;
sparklineWinloss.Data = data.Data;
|
In this step, you added markup and code for the RegionSale.xaml file. In the next step, you'll add code for the RegionSalesData code file.
See Also