ドロップダウンボタン

DropDownButtonコントロールは、ユーザーがクリックできるボタンを表示します。このボタンには「開かれた」「閉じた」の2つの状態があります。DropDownButtonコントロールは、矢印で現在の状態を表示します。開いている状態のときは矢印は上向き、閉じているときは矢印が下向きになります。DropDownButtonコントロールは、ユーザーがボタンをクリックするたびにこれら2つの状態を切り替えます。

DropDownButtonコントロールは「Content」というプレースホルダーを追加します。このプレースホルダーがオープン状態にあるときに、そのプレースホルダーに入れたすべてのコントロールが表示されます。このプレースホルダーには任意のSPEAKコンポーネントを追加できます。

!注ユーザーがコンテンツのプレースホルダー内の任意のコントロールをクリックすると、クリックされたコントロールとDropDownButtonコントロールの両方でクリックイベントが発生します。つまり、DropDownButtonコントロールはクローズド状態に切り替わります。

ButtonTypeプロパティをPrimaryに設定すると、SPEAKで見た目に際立つようになります。Dimensionsプロパティでボタンのサイズをノーマルまたは大きいに設定できます。

ユーザーがページの主な目的を実行するボタンタイプとしてPrimaryを指定し、他のボタンについてはDefaultを指定するべきです。ButtonTypeプロパティをInverseに設定することもできます。InverseボタンタイプはDefaultボタンタイプと同じ色を使用しますが、テキスト色と背景色が入れ替わります。

ボタンはアイコンもテキストも表示でき、両方を同時に表示することも可能です。

アイコンはImageUrlプロパティを使って指定します。ここでも、コンテンツツリーでアイテムのアイコンを選択する時と同じアイコンを使用できます。ボタンコントロールは、スプライトシートから選択した「スプライト」としてアイコンを定義することもサポートしています。ImageUrlプロパティはスプライトシートのURLを、BackgroundPositionプロパティは目的のスプライト(アイコン/画像)の座標を保存します。

アイコンとテキストの両方を使う場合、SPEAKはアイコンをテキストの左側に配置します。この位置は変更できません。