Sparkline for UWP
手順1:アプリケーションの作成
クイックスタート > 手順1:アプリケーションの作成

この手順では、Visual Studio を使用して新しい UWP スタイルのアプリケーションを作成し、ページに C1Sparkline コントロールを追加します。

  1. Visual Studio で、[ファイル]→[新規作成]→[プロジェクト]を選択します。
  2. 新しいプロジェクト]ダイアログボックスで、次の操作を実行します。
    1. 左側のペインで言語を展開します。
    2. 言語の下で、[Windows ストア]を選択します。
    3. テンプレートリストで、[新しいアプリケーション (XAML)]を選択します。
    4. 名前を入力し、[OK]をクリックしてプロジェクトを作成します。
  3. ソリューションエクスプローラで[参照]フォルダを右クリックし、ドロップダウンリストから[参照の追加]を選択します。[参照マネージャー]が開きます。
  4. 参照マネージャー]の左側のペインで、[Windows]の横にあるドロップダウン矢印を選択します。[拡張]を選択します。
  5. C1.Xaml]参照と[C1.Xaml.Sparkline]参照のチェックボックスをオンにし、[OK]をクリックします。
  6. 次のマークアップを開始タグ <Page> に追加します。

    コードのコピー
    xmlns:c1="using:C1.Xaml.Sparkline"
    

    <Page> タグは次のようになります。


    コードのコピー
    <Page
       x:Class="App2.MainPage"       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:App2"
       xmlns:c1="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">
    
  7. <Grid> </Grid> タグの間にカーソルを置きます。
  8. Visual Studio ツールボックスで C1Sparkline コントロールを見つけます。コントロールをダブルクリックしてアプリケーションに追加します。
  9. 次のサンプルのように、タグ <c1:C1Sparkline/> を編集します。これで、コントロールをコードで呼び出すための名前が追加され、スパークラインコントロールの色がカスタマイズされます。また、適切な連結ステートメントも追加されます。

    コードのコピー
    <c1:C1Sparkline x:Name="sparkline" Width="100" Height="100" Data="{Binding Data}" DateAxisData="{Binding DateAxis}"
    SeriesColor="#FF4BC128" ShowMarkers="True"/>

ここまでの成果

この手順では、新しい Windows ストアアプリケーションを作成し、適切なアセンブリ参照をアプリケーションに追加して、C1Sparkline コントロールを追加しました。

関連トピック