マウスイベントに対応したグラフを持つWPFアプリケーションの作成

ComponentOne Studio Enterprise 2011JのC1Chartコントロールを使ったWPFアプリケーションの作成

2011/09/21 14:00

ダウンロードサンプルソース（C#） (10.4 KB)
ダウンロードサンプルソース（VB） (12.7 KB)

　今回は、3月14日に発売が開始されたコンポーネントスイート「ComponentOne Studio Enterprise 2011J」に含まれているコンポーネントの中から、Chart for WPFを取りあげます。本稿では「C1Chartコントロール」を使って、見た目も綺麗な折れ線グラフを作成してみました。

はじめに

　高度なグラフィックス機能や視覚効果を持つWindows Presentation Foundation（WPF）ですが、機能が豊富な分覚えるテクニックもたくさんあり、簡単なグラフを作るだけでもかなり苦労します。

　ComponentOne Studio Enterprise 2011J（ComponentOne Studio for WPF 2011J）のChart for WPFコンポーネントに含まれるC1Chartコントロールは、強力なレンダリング、豊富なスタイル設定要素、アニメーション、データ連結などの機能を備えているため、XAML記述やプロパティウィンドウを使った簡単なプロパティ設定で、見栄えと訴求力に優れたチャートをWPFアプリケーション上に簡単に表示できます。

　今回は、このC1Chartコントロールを使って、東京の8月の気温を表示する折れ線グラフを作成してみました。

最高気温と最低気温を、ゆるやかな曲線の折れ線グラフで表示

マウスでポイントするとシンボルのスタイルが変化する

データ系列ごとに変化をつけられる

対象読者

　Visual Basic、Visual C# 2010を使ってプログラムを作ったことのある人

必要な環境

　Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。なお、本プログラムはWindows Vista上で動作するVisual Studio 2010を使用して作成し、動作確認を行っています。

※サンプルソース実行時の注意事項

　動作環境として、あらかじめ.NET Framework 4.0がインストールされている必要があります。動作するOSは、以下を参照ください。

動作するOS一覧

OS	32ビット（x86）	64ビット（x64）
Windows XP 日本語版	●	●
Windows Vista 日本語版	●	●
Windows 7 日本語版	●	●
Windows Server 2003 日本語版	●	●
Windows Server 2008 日本語版	●	●
Windows Server 2008 R2 日本語版	-	●

コンポーネントのインストール

　この記事の手順を試すには、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterprise 2011J（または、ComponentOne Studio for WPF 2011J）をインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。

　製品のトライアル版一覧ページにてダウンロードしたい製品にチェックを入れ、ページ右上部の［申込フォーム］をクリックしてグレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

　ComponentOne Studio Enterprise 2011J（または、ComponentOne Studio for WPF 2011J）をインストールしたら、ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、［WPFコンポーネント］でアセンブリ名が「C1.WPF.C1Chart」の「C1Chart」コントロールです。

［WPFコンポーネント］でアセンブリ名が「C1.WPF.C1Chart」の「C1Chart」コントロールを選択する

C1Chartコントロールについて

　Chart for WPFに含まれるC1Chartコントロールは、WPFの持つ機能を最大限に生かし、簡単な操作で高度なグラフィックスと高い表現力、アニメーション機能を含む対話機能などを持ったチャートを、WPFアプリケーション上に表示できるコントロールです。

　強力なレンダリング、豊富なスタイル設定要素、アニメーション、データ連結などの機能によって、チャートの表現力を高めることができます。

35種類を超える豊富な組み込みグラフ

　標準的なグラフ種別（棒グラフ、折れ線グラフ、円グラフ、エリアグラフなど）に加え、より高度なグラフ種別（3Dドーナツチャートや3Dリボンなど）や、多彩なグラフ種類を備えています。グラフによっては、2D／3Dの両方の表現を持つものもあります。

Bar
BarStacked
BarStacked100pc
Column
ColumnStacked
ColumnStacked100pc
Line
LineSmoothed
LineStacked
LineStacked100pc
LineSymbols
LineSymbolsStacked
LineSymbolsStacked100pc
LineSymbolsSmoothed
Area
AreaStacked
AreaStacked100pc
AreaSmoothed
Pie
PieExploded
PieDoughnut
PieExplodedDoughnut
XYPlot
Bubble
Radar
RadarSymbols
RadarFilled
HighLowOpenClose
Candle
Gantt
Step
StepSymbols
StepArea
PolarLines
PolarSymbols
PolarLinesSymbols
Bar3D
Bar3DStacked
Bar3DStacked100pc
Column3D
Column3DStacked
Column3DStacked100pc
Area3D
Area3DStacked
Area3DStacked100pc
Area3DSmoothed
Pie3D
Pie3DExploded
Pie3DDoughnut
Pie3DExplodedDoughnut
Ribbon

作成できるグラフ例（ヘルプファイルより抜粋）

高度な表現力

　C1Chartコントロールは、グラフの訴求力を高めるために、高度な表現力を実現する次のような機能を備えています。

データラベルによるグラフの読みやすさの向上
　各データ系列にデータラベルを追加することによって、重要なデータポイントを強調表示し、有益なデータ情報を提供します。グラフに含めることができるデータラベルの数に制限はありません。
ToolTip を備えたインタラクティブなグラフ
　ユーザーがグラフ要素の上にマウスポインタを置くと、特定のテキストを表示します。Chart for WPFでは、ToolTipに表示される情報を書式設定するコントロールが提供されます。
複数の軸による高度なデータ表現
　グラフの上、下、左、または右に複数の軸を配置して、より詳細なデータ表現を実現します。
複数のグラフによる印象的なデータ表現の実現
　Chart for WPFでは、1つのプロット上でさまざまなグラフ種別を組み合わせて、印象的なデータ表現を生み出すことができます。
高度なカスタマイズが可能なプロット要素
　シンボルや接続のプロパティを使用して、任意のプロット要素の外観をすばやく効率的に変更できます。
プロット要素用のさまざまなカスタムパレットの作成
　プロット要素のカスタマイズオプションを数多く利用でき、定義済みのパレットに制約されることはありません。たとえば、CustomPalette プロパティを使用して、プロット要素のさまざまなブラシを定義できます。
グラフの積層機能
　折れ線、面、横棒、縦棒といった各種グラフを積み重ねることで、より複雑なデータを比較的小さなスペースで表示できます。
12種類の組み込みテーマによるカラフルで実用的な外観を持ったアプリケーションの実現
　Office 2007、Vista、Office 2003の各組み込みテーマや、それらの組み込みテーマに基づいた独自のテーマの作成により、グラフアプリケーションの外観をカスタマイズできます。独自の洗練されたグラフが手軽に作成できます。
グラフィック効果の強化
　ベベル、影、ぼかし、グロー、エンボスといったビットマップ効果を有効にすることによって、グラフに特徴を与えます。

組み込みテーマによりカラフルで実用的な外観を作れる（ヘルプファイルより抜粋）

グラフィック効果の強化（ヘルプファイルより抜粋）

イベントに対応した対話型機能を装備

　また、マウスイベントなどグラフに対するユーザーの操作に対応して、さまざまなインタラクティブ機能を提供しています。エンドユーザーは、マウスとシフトキーを組み合わせて使用して、グラフを詳しく調べたり、回転させたり、拡大／縮小したりできます。

　次のリストは、サポートされているグラフ操作を示しています。

回転操作
　回転操作では、表示の角度を変更できます。この操作は、3D効果を伴うグラフでのみ利用できます。Rotate3Dactionクラスは、3Dグラフの回転操作を表します。
スケール操作
　スケール操作は、選択した1つまたは複数の軸に沿ってグラフのスケールを増減させます。ScaleActionクラスは、スケール操作を表します。
変換操作
　変換操作では、プロット領域全体をスクロールして移動できるようになります。TranslateActionクラスは、変換操作を表します。
ズーム操作
　ズーム操作では、ユーザーは矩形領域を選択して表示できます。
デカルト軸を持つグラフ
　デカルト軸を持つグラフでは、スケール調整、変換、およびズームが利用できます。また、3Dグラフでは、実行時のインタラクティブな回転が利用できます。
軸スクロールによる大量のデータの表示
　ScaleプロパティとValueプロパティを使用して、グラフの軸に沿ったスクロールが可能です。これは、大量のデータを表示するときに役立ちます。

軸スクロールによる大量のデータの表示が可能

データバインディング

　C1Chartコントロールでは、XAMLによるチャートデータの設定以外に、コードからデータをセットできます。その形態も、配列を使った方法、データセットを使った方法など、いろいろなデータバインディングを提供しています。データセットをデータソースに使用できるため、データベースから直接データを取り出してグラフ化できます。

WPFアプリケーションの作成

　では、さっそくC1Chartコントロールを使ってWPFアプリケーションを作成しましょう。

GUIのデザイン

　今回作成するアプリケーションは、東京都の8月の最高・最低気温を折れ線グラフにします。折れ線グラフは、緩やかなラインとし、最高気温と最低気温で線の色とシンボルの形状を変えます。全体の配色はテーマを使用しますが、カラーパレットを変えてカスタム化します。

　また、マウスポインタをシンボルに重ねると、シンボルを強調表示するようなイベント処理を加えます。使用するコントロールは、C1ChartコントロールとTextBlockコントロールだけです。

コントロールのレイアウト

C1Chartコントロールの設定

　作業のメインは、C1Chartコントロールの設定です。デフォルトの設定から、徐々にデザインを変えていきます。

系列データの変更

　C1Chartコントロールをツールボックスからページにドラッグ＆ドロップします。ウィンドウサイズを変え、C1Chartコントロールもウィンドウに合わせて広げます。

　C1Chartコントロールには、デフォルトでダミーのデータが挿入され、縦棒グラフが作成されています。

<Window x:Class="WPF_C1Chart_cs.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:c1chart="http://schemas.componentone.com/xaml/c1chart"
        Title="Window1" Height="610" Width="869" FontSize="16" >
    
    <Grid>
        <c1chart:C1Chart Height="513" HorizontalAlignment="Left" Margin="34,12,0,0" Name="c1Chart1" 
                         VerticalAlignment="Top" Width="791">
            <c1chart:C1Chart.Data>
                <c1chart:ChartData ItemNames="P1 P2 P3 P4 P5">
                    <c1chart:DataSeries Label="Series 1" Values="20 22 19 24 25" />
                    <c1chart:DataSeries Label="Series 2" Values="8 12 10 12 15" />
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
            <c1chart:C1ChartLegend DockPanel.Dock="Right" />
        </c1chart:C1Chart>
    </Grid>
</Window>

　次に、系列データの変更です。ここでは、DataSeriesクラスのValuesプロパティの値を書き換えます。また、ChartDataクラスのItemNamesプロパティの値を変えると、横軸にあるデータ名が変更されます。「AxisX」「AxisY」プロパティで軸ラベルを設定します。この時点で、縦棒グラフのデータと軸ラベルが変更されます。

<c1chart:C1Chart.Data>
    <c1chart:ChartData ItemNames="10日 11日 12日 13日 14日 15日 16日 17日 18日 19日">
        <c1chart:DataSeries Values="27.4 28.2 28.1 27.2 27.7 27.4 27.4 27.5 28.7 22.0" AxisX="気温（℃）" 
                            AxisY="東京 8月" Label="最低気温"/>
        <c1chart:DataSeries Values="34.6 35.2 35.1 34.5 33.6 33.2 33.6 33.8 36.1 30.9" AxisX="気温（℃）" 
                            AxisY="東京 8月" Label="最高気温"/>
    </c1chart:ChartData>

縦棒グラフのデータと軸ラベルが変更される

　そして、C1Chartコントロールを選択した状態で、プロパティウィンドウの［可視性－ChartType］プロパティをクリックし、リストから［LineSymbolsSmoothed］を選びます。これで、チャートが緩やかな曲線の折れ線グラフに変わります。

リストから［LineSymbolsSmoothed］を選ぶ

チャートが緩やかな曲線の折れ線グラフに変わる

ビジュアルの変更

　続いて、グラフをカスタマイズしていきます。

　まず、XAMLコードの1番目の<c1chart:DataSeries>をクリックします。プロパティウィンドウが「DataSeries」クラスのプロパティに変わるので、［その他］をクリックして展開し［SymbolMarker］プロパティの値欄をクリックします。リストが展開したら、［Star8］を選びます。これにより、最低気温のグラフのシンボルが星形に変わります。

プロパティリストから［Star8］を選ぶ

　縦軸のデータラベルが1℃おきになっているので、これを2℃単位に変え、XY軸のラベルを設定します。ここでは「ChartView」クラスのAxisクラスを使用します。X軸、Y軸それぞれに、「AxisX」「AxisY」クラスを使用し、表示するデータの範囲はMin・Maxプロパティで指定、増減値は「MajorUnit」プロパティで指定します。また、ラベルを傾ける場合は「AnnoAngle」プロパティを使用します。このグラフでは、縦軸のデータラベルを60度傾けています。軸ラベルを表示する場合は、TextBlockコントロールを使用します。

<c1chart:C1Chart.View>
    <c1chart:ChartView>
        <c1chart:ChartView.AxisY>
            <c1chart:Axis Min="21" Max="37" MajorUnit="2" AutoMin="False" AnnoFormat="00" AnnoAngle="60" >
                <c1chart:Axis.Title>
                    <TextBlock Text="気温（℃）" TextAlignment="Center" Foreground="BlueViolet" Margin="5"/>
                </c1chart:Axis.Title>
            </c1chart:Axis>
        </c1chart:ChartView.AxisY>
        <c1chart:ChartView.AxisX>
            <c1chart:Axis>
                <c1chart:Axis.Title>
                    <TextBlock Text="東京 8月" TextAlignment="Center" Foreground="BlueViolet" Margin="7"/>
                </c1chart:Axis.Title>
            </c1chart:Axis>
        </c1chart:ChartView.AxisX>
    </c1chart:ChartView>
</c1chart:C1Chart.View>

XY軸に軸ラベルを表示し、縦軸の温度を2℃ごとに表示

テーマの適用

　このままではビジュアル的にちょっと味気ないので、テーマを適用してより視覚効果を高めていきます。

　C1Chartコントロールには、あらかじめ12個の組み込みテーマが使用できるようになっています。テーマを定義するには、次のようなXAMLコードを<c1chart:C1Chart>タグに追加します。

<c1chart:C1Chart Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1chart:C1Chart, ResourceId=Office2007Black}}">

　最後の「ResourceId」がテーマを決める要素になります。これらのテーマはChart for WPFのインストールディレクトリ（デフォルトでは、<UserFolder>\Misc\Xaml\WPF\C1WPFChart）に、XAMLファイルとして置かれているので、ファイル名を「ResourceId」に指定します。

テンプレート一覧

要素	説明
ChartTypes.xaml	すべての利用可能なグラフタイプのテンプレート
default.xaml	Defaultテーマのテンプレート
DuskBlue.xaml	Dusk Blueテーマのテンプレート
DuskGreen.xaml	Dusk Greenテーマのテンプレート
generic.xaml	グラフの各種スタイルと初期スタイルのテンプレート
Grayscale.xaml	Grayscaleテーマのテンプレート
Legend.xaml	Legendのテンプレート
MediaPlayer.xaml	Media Playerテーマのテンプレート
Office2003Blue.xaml	Office 2003 Blueテーマのテンプレート
Office2003Classic.xaml	Office 2003 Classicテーマのテンプレート
Office2003Olive.xaml	Office 2007 Oliveテーマのテンプレート
Office2003Royale.xaml	Office 2003 Royalテーマのテンプレート
Office2003Silver.xaml	Office 2003 Silverテーマのテンプレート
Office2007Black.xaml	Office 2007 Blackテーマのテンプレート
Office2007Blue.xaml	Office 2007 Blueテーマのテンプレート
Office2007Silver.xaml	Office 2007 Silverテーマのテンプレート
Vista.xaml	Vistaテーマのテンプレート

　ここでは、Office 2003 Silverテーマのテンプレートを適用します。

Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1chart:C1Chart, 
      ResourceId=Office2003Silver}}"

<c1chart:C1Chart Height="513" HorizontalAlignment="Left" Margin="34,12,0,0" Name="c1Chart1" 
                 VerticalAlignment="Top" Width="791" ChartType="LineSymbolsSmoothed"
                 Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1chart:C1Chart, 
                 ResourceId=Office2003Silver}}" >

　また、カラーパレットを変更することで、さらにテーマの配色を変えることができます。C1Chartコントロールをクリックし、プロパティウィンドウの［可視性－Pallete］の値欄をクリックすると、使用できるカラーパレット名が表示されます。試しに［Metro］を選んでみると、チャートの配色が変わります。

Office 2003 Silverテーマの配色に変更する

パレットを「Metro」に変えると配色が変わる

　C1Chartコントロールの背景色を変えると、さらにグラフのイメージが変わります。最終的には、C1Chartコントロールは次のようなコードになります。

<c1chart:C1Chart Height="513" HorizontalAlignment="Left" Margin="34,12,0,0" Name="c1Chart1" 
                 VerticalAlignment="Top" Width="791" ChartType="LineSymbolsSmoothed"
                 Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1chart:C1Chart, 
                 ResourceId=Office2003Silver}}" Palette="Metro" Background="LemonChiffon">

マウスイベントに応答する処理を組み込む

　せっかくなので、インタラクティブ機能を組み込んでみます。

　マウスポインタをチャートのシンボルに重ねると、シンボルの輪郭線の色と太さが変わるようにします。まず、シンボルの外枠線を変えるスタイルを作成します。そして、Triggersプロパティでトリガーとなるイベントを指定し、対象のプロパティの値を設定します。

　操作するのは、C1ChartコントロールのPlotElementクラスの各プロパティです。「Stroke」は図形の輪郭を描画するBrushオブジェクトを、「StrokeThickness」は輪郭の幅をあらわすプロパティです。ここでは、最高気温と最低気温の折れ線グラフを、それぞれ違う輪郭で表示するようにしています。

<Window.Resources>
    <Style x:Key="mouseOver" TargetType="{x:Type c1chart:PlotElement}">
        <!-- デフォルトのアウトライン -->
        <Setter Property="Stroke" Value="RoyalBlue" />
        <Style.Triggers>
            <!-- 要素上にマウスを置くと太いアウトラインに変わる  -->
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Stroke" Value="Yellow" />
                <Setter Property="StrokeThickness" Value="2" />
            </Trigger>
        </Style.Triggers>
    </Style>
    
    <Style x:Key="mouseOver2" TargetType="{x:Type c1chart:PlotElement}">
        <!-- デフォルトのアウトライン -->
        <Setter Property="Stroke" Value="Salmon" />
        <Style.Triggers>
            <!-- 要素上にマウスを置くと太いアウトラインに変わる  -->
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Stroke" Value="Lime" />
                <Setter Property="StrokeThickness" Value="2" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

　スタイルができたら、このスタイルを呼び出す処理を作成します。それぞれの折れ線グラフをあらわす「DataSeries」要素の中で、SymbolStyleプロパティにこのStyleを設定します。

<c1chart:DataSeries Values="27.4 28.2 28.1 27.2 27.7 27.4 27.4 27.5 28.7 22.0" AxisX="気温（℃）" 
                    AxisY="東京 8月" Label="最低気温" SymbolMarker="Star8" 
                    SymbolStyle="{StaticResource mouseOver}"/>
<c1chart:DataSeries Values="34.6 35.2 35.1 34.5 33.6 33.2 33.6 33.8 36.1 30.9" AxisX="気温（℃）" 
                    AxisY="東京 8月" Label="最高気温"  SymbolStyle="{StaticResource mouseOver2}"/>

　最後に、グラフのタイトルをTextBlockで作成し、C1Chartコントロールに重ねてできあがりです。

XAML全文

<Window x:Class="WPF_C1Chart_cs.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:c1chart="http://schemas.componentone.com/xaml/c1chart"
        Title="Window1" Height="610" Width="869" FontSize="16" >

    <Window.Resources>
        <Style x:Key="mouseOver" TargetType="{x:Type c1chart:PlotElement}">
            <!-- デフォルトのアウトライン -->
            <Setter Property="Stroke" Value="RoyalBlue" />
            <Style.Triggers>
                <!-- 要素上にマウスを置くと太いアウトラインに変わる  -->
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Stroke" Value="Yellow" />
                    <Setter Property="StrokeThickness" Value="2" />
                </Trigger>
            </Style.Triggers>
        </Style>
        
        <Style x:Key="mouseOver2" TargetType="{x:Type c1chart:PlotElement}">
            <!-- デフォルトのアウトライン -->
            <Setter Property="Stroke" Value="Salmon" />

            <Style.Triggers>
                <!-- 要素上にマウスを置くと太いアウトラインに変わる  -->
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Stroke" Value="Lime" />
                    <Setter Property="StrokeThickness" Value="2" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    
    <Grid>
        <c1chart:C1Chart Height="513" HorizontalAlignment="Left" Margin="34,12,0,0" Name="c1Chart1" 
                         VerticalAlignment="Top" Width="791" ChartType="LineSymbolsSmoothed"
                         Theme="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=c1chart:C1Chart, 
                         ResourceId=Office2003Silver}}" Palette="Metro" Background="LemonChiffon">
            <c1chart:C1Chart.Data>
                <c1chart:ChartData ItemNames="10日 11日 12日 13日 14日 15日 16日 17日 18日 19日">

                    <c1chart:DataSeries Values="27.4 28.2 28.1 27.2 27.7 27.4 27.4 27.5 28.7 22.0" AxisX="気温（℃）" 
                                        AxisY="東京 8月" Label="最低気温" SymbolMarker="Star8" 
                                         SymbolStyle="{StaticResource mouseOver}"/>
                    <c1chart:DataSeries Values="34.6 35.2 35.1 34.5 33.6 33.2 33.6 33.8 36.1 30.9" AxisX="気温（℃）" 
                                        AxisY="東京 8月" Label="最高気温"  SymbolStyle="{StaticResource mouseOver2}"/>
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
            <c1chart:C1ChartLegend DockPanel.Dock="Right" />
            <c1chart:C1Chart.View>
                <c1chart:ChartView>
                    <c1chart:ChartView.AxisY>
                        <c1chart:Axis Min="21" Max="37" MajorUnit="2" AutoMin="False" AnnoFormat="00" AnnoAngle="60" >
                            <c1chart:Axis.Title>
                                <TextBlock Text="気温（℃）" TextAlignment="Center" Foreground="BlueViolet" Margin="5"/>
                            </c1chart:Axis.Title>
                        </c1chart:Axis>
                    </c1chart:ChartView.AxisY>
                    <c1chart:ChartView.AxisX>
                        <c1chart:Axis>
                            <c1chart:Axis.Title>
                                <TextBlock Text="東京 8月" TextAlignment="Center" Foreground="BlueViolet" Margin="7"/>
                            </c1chart:Axis.Title>
                        </c1chart:Axis>
                    </c1chart:ChartView.AxisX>
                </c1chart:ChartView>
            </c1chart:C1Chart.View>
        </c1chart:C1Chart>

        <TextBlock Height="23" HorizontalAlignment="Left" Margin="300,41,0,0" Name="TextBlock1" Text="東京 8月の気温"
                   Foreground="MediumVioletRed"  VerticalAlignment="Top" Width="161" TextAlignment="Center" />
    </Grid>
</Window>