読者です 読者をやめる 読者になる 読者になる

atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

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

コントロールを縦や横にきれいにならべる方法は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です。早速試してみましょう。

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

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

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

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

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


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

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

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


じーっとみてると、とある黒い集団のダンスにみえてきた。。。。