この手順では、手順１で追加した RegionSale.xaml ページを作成するためのマークアップとコードを追加します。

1. ソリューションエクスプローラで、RegionSale.xaml をダブルクリックして開きます。
2. 次の名前空間をタグ <Page> に追加します。
   • xmlns:local="using:RegionSales"
   • xmlns:sp="using:C1.Xaml.Sparkline"
3. 開始タグ <Grid> を見つけて、次のように編集します。
   

   	コードのコピー
   <Grid Background="#EFEFEF">

4. <Grid> </Grid>タグの間にカーソルを置き、次のマークアップを挿入します。これで、必要な列定義がアプリケーションに追加されました。
   

   	コードのコピー
   <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="200"/> <ColumnDefinition Width="150"/> <ColumnDefinition Width="150"/> </Grid.ColumnDefinitions>

5. 列定義のすぐ下に次のマークアップを追加して、<Grid> 列に対応する TextBlock コントロール、C1Sparkline コントロール、および Border を追加します。
   

   コードのコピー

   <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" />

6. ページを右クリックし、リストから［コードの表示］を選択して RegionSale.xaml.cs ファイルを開きます。
7. InitializeComponent() メソッドのすぐ下に、次のコードを追加します。
   

   C# コードの書き方

   C#	コードのコピー
   this.DataContext = data; sparkline.Data = data.Data; sparklineColumn.Data = data.Data; sparklineWinloss.Data = data.Data;

この手順では、RegionSale.xaml ファイルのマークアップとコードを追加しました。次の手順では、RegionSalesData コードファイルのコードを追加します。