その３３：コントロールを円状に設置する

コントロールを縦や横にきれいにならべる方法はStackPanelを使えば簡単ですが、円状に並べるにはどうすればいいでしょうか。
マージンでそれっぽく並べるのはスマートじゃないですね。

そんなときはPathListBoxを使えばとっても簡単にコントロールを並べることができます。
こんなかんじ

<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding Source={StaticResource SampleDataSource}}">
	<Ellipse x:Name="ellipse" Fill="Blue" HorizontalAlignment="Left" Margin="82,171,0,67" Stroke="Black" Width="237"/>
	<mec:PathListBox HorizontalAlignment="Left" Margin="82,171,0,81" Width="228">
		<mec:PathListBox.LayoutPaths>
			<mec:LayoutPath SourceElement="{Binding ElementName=ellipse}"/>
		</mec:PathListBox.LayoutPaths>
		<mec:PathListBoxItem Content="PathListBoxItem"/>
		<mec:PathListBoxItem Content="PathListBoxItem"/>
		<mec:PathListBoxItem Content="PathListBoxItem"/>
		<mec:PathListBoxItem Content="PathListBoxItem"/>
		<mec:PathListBoxItem Content="PathListBoxItem"/>
	</mec:PathListBox>
</Grid>

PathListBoxはMicrosoft.Expression.Controlsにあります。

これはPath上にコントロールを並べるためのListBoxです。早速試してみましょう。

１．デザインプレビューにEllipseを描きます。

２．Ellipseを右クリックして、レイアウトパスの作成を選択します。

３．オブジェクトパネルにPathListBoxが設置されていることがわかります。

４．PathListBoxの中にPathListBoxItemをいくつか置きます。
Ellipse上にPathListBoxItemが表示されていることがわかります。

５．実行してみましょう。挙動としてはListBoxなので、選択時はフォーカスがあたります。

レイアウトに関するプロパティや細かい設定はPathListBoxのレイアウトパネルから行うことができます。

EllipseやRectangleなど、Pathを継承しているものなら何でもいいのでこんなのも可能です。

プロパティにアニメーションをつけることでこんなこともできます。
Startプロパティを10秒かけて、0%から100%に変更してみました。