ホーム > Expression Blend > 0からはじめるExpression Blend再入門

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

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square & Windows Phone Arch[著], わにちゃん@ExpressionTech.jp[編集]
2012年1月2日 from Atelier:Mitsuba

はじめに

コントロールを縦や横にきれいにならべる方法はStackPanelを使えば簡単ですが、円状に並べるにはどうすればいいでしょうか。

マージンでそれっぽく並べるのはスマートじゃないですね。

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

こんなかんじ

f:id:c-mitsuba:20120102103444p:image

<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にあります。

f:id:c-mitsuba:20120102102035p:image

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

操作方法

  1. デザインプレビューにEllipseを描きます。
    f:id:c-mitsuba:20120102102610p:image
  2. Ellipseを右クリックして、レイアウトパスの作成を選択します。
    f:id:c-mitsuba:20120102102716p:image
  3. オブジェクトパネルにPathListBoxが設置されていることがわかります。
    f:id:c-mitsuba:20120102102744p:image
  4. PathListBoxの中にPathListBoxItemをいくつか置きます。
    Ellipse上にPathListBoxItemが表示されていることがわかります。
    f:id:c-mitsuba:20120102103323p:image
  5. 実行してみましょう。挙動としてはListBoxなので、選択時はフォーカスがあたります。
    f:id:c-mitsuba:20120102103444p:image

レイアウトのプロパティと設定

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

レイアウト パス

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

f:id:c-mitsuba:20120102104218p:image

プロパティにアニメーションを追加

プロパティにアニメーションをつけることでこんなこともできます。

Startプロパティを10秒かけて、0%から100%に変更してみました。

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

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ