WPF でグラフ表示をしたいと常々思ってはいるんだけど，
VC++ のように自分で描画させるコードをしこしこ書くのはなんか違うと思い，
web 上で探しまくった結果，
結局のところ ItemsControl を使うんじゃないかと思い始めた今日この頃．
そんなわけで ItemsControl でデータ点を並べる XAML を書いてみた．
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<Window x:Class="ItemsControlGraph.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <ItemsControl> <ItemsControl.ItemsSource> <x:Array Type="Point"> <Point X="0" Y="0" /> <Point X="20" Y="10" /> <Point X="40" Y="20" /> <Point X="60" Y="30" /> <Point X="80" Y="40" /> <Point X="100" Y="50" /> <Point X="120" Y="60" /> <Point X="140" Y="70" /> <Point X="160" Y="80" /> <Point X="180" Y="90" /> <Point X="200" Y="100" /> <Point X="220" Y="90" /> <Point X="240" Y="80" /> <Point X="260" Y="70" /> <Point X="280" Y="60" /> <Point X="300" Y="50" /> <Point X="320" Y="40" /> <Point X="340" Y="30" /> <Point X="360" Y="20" /> <Point X="380" Y="10" /> <Point X="400" Y="0" /> </x:Array> </ItemsControl.ItemsSource> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Grid IsItemsHost="True" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Path Fill="Red"> <Path.Data> <EllipseGeometry Center="{Binding}" RadiusX="4" RadiusY="4" /> </Path.Data> </Path> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid> </Window> |
ItemsPanelTemplate でアイテムを並べるパネルに Grid を指定．
各アイテムは System.Point 構造体で，
これがそのまま描画する座標になっている．
ItemsPanelTemplate で Grid を指定できることは知っていたけど，
まさかこんな使い方をするなんて全然思いつきませんでした．
ItemsControl と DataTemplate の底力を垣間見た瞬間だった．
だいぶ頭固くなってきたな～．
というわけで実行すると次のように点が並びます．
ItemsControl でグラフを表示するための入り口がなんとなく見えた気がするコードでした．