この手順では、Visual Studio で新しい Windows ストアアプリケーションを作成し、アセンブリ参照を追加して、アプリケーションに必要な .xaml ファイルとコードファイルを追加します。

1. ［ファイル］→［新規作成］→［プロジェクト］を選択し、［新しいプロジェクト］ダイアログボックスを開きます。
   1. 右側のペインで C# の下にある［Windows ストア］を選択します。
   2. 左側のペインで［新しいアプリケーション (XAML)］を選択します。
   3. アプリケーションの名前を入力し（この場合は、RegionSales）、［OK］をクリックします。新しい空の Windows ストアアプリケーションが開きます。
2. ソリューションエクスプローラで、［参照］ファイルを右クリックし、リストから［参照の追加］を選択します。次のアセンブリ参照を参照して選択します。
   • C1.Xaml.dll
   • C1.Xaml.Sparkline.dll
3. MainPage.xaml ファイルをダブルクリックして開きます。
4. ページ先頭の <Page> タグに次の名前空間宣言を追加します。
   
   • C1.Xaml.dll
   • C1.Xaml.Sparkline.dll

   ページ先頭の<Page> タグは次のサンプルのようになります。

   Markup	コードのコピー
   <Page x:Class="RegionSales.RegionSale" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:RegionSales" xmlns:sp="using:C1.Xaml.Sparkline" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

5. <Grid> </Grid> タグの間にカーソルを置き、次のマークアップを挿入します。これで、グリッドのリソース、行、列の定義がそれぞれ作成されます。
   

   コードのコピー

   <Grid.Resources> <Style TargetType="TextBlock"> Setter Property="FontSize" Value="16" /> </Style> </Grid.Resources> <Grid Width="800" Margin="10"> <Grid.RowDefinitions> <RowDefinition Height="30"/> <RowDefinition /> </Grid.RowDefinitions> <Grid Background="Gray"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="200"/> <ColumnDefinition Width="150"/> <ColumnDefinition Width="150"/> </Grid.ColumnDefinitions> </Grid> </Grid>

6. </Grid.ColumnDefinitions> タグのすぐ後に次のマークアップを追加して、いくつかのラベル TextBox コントロールと、RegionSalesListBox を含む別の ScrollViewer コントロールを作成します。
   

   コードのコピー

   <Grid.Resources> <Style TargetType="TextBlock"> Setter Property="FontSize" Value="16" /> </Style> </Grid.Resources> <Grid Width="800" Margin="10"> <Grid.RowDefinitions> <RowDefinition Height="30"/> <RowDefinition /> </Grid.RowDefinitions> <Grid Background="Gray"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="200"/> <ColumnDefinition Width="150"/> <ColumnDefinition Width="150"/> </Grid.ColumnDefinitions> </Grid> </Grid>

7. MainPage.xaml ページを右クリックし、リストから［コードの表示］を選択します。次の名前空間をインポートします。
   

   C#コードの書き方

   C#	コードのコピー
   using C1.Xaml.Sparkline;

8. 次のコードを InitializeComponent() メソッドに追加して、新しいランダムデータを作成します。
   

   C#コードの書き方

   C#

   コードのコピー

   Random rnd = new Random(); string[] states = new string[] { "Alabama", "Alaska", "Arizona", "Idaho", "Illinois", "Indiana", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Vermont", "Virginia", "Washington" }; for (int i = 0; i < states.Length; i++) { RegionSalesData rsd = new RegionSalesData(); rsd.State = states[i]; rsd.Data = new ObservableCollection<double>(); for (int j = 0; j < 12; j++) { double d = rnd.Next(-50, 50); rsd.Data.Add(d); rsd.NetSales += d; rsd.TotalSales += Math.Abs(d); } RegionSale sale = new RegionSale(rsd); RegionSalesListBox.Items.Add(sale); }

9. MainPage.xaml ページの設定が終了したので、アプリケーション名を右クリックし、［追加］→［新しい項目］を選択します。
   1. ［新しい項目の追加］ダイアログで、右側のペインの［空白のページ］を選択します。
   2. ファイルに RegionSale という名前を付け、［OK］をクリックします。
10. アプリケーション名をもう一度右クリックし、［追加］→［新しい項目］を選択します。
    1. ［新しい項目の追加］ダイアログで、左側のペインの［コード］を選択します。
    2. 右側のペインの［コードファイル］を選択します。
    3. ファイルに RegionSalesData という名前を付け、［OK］をクリックします。

この手順では、新しい Windows ストアアプリケーションを作成し、適切な参照アセンブリを追加し、もう１つの .xaml ページとコードファイルをアプリケーションに追加しました。次の手順では、この手順で追加した RegionSale.xaml ページを作成します。