2009-06-02 8 views
11

Silverlightアプリケーションを開発していて、クリックしたときにアニメートされる(サイズが大きくなる)5つのトグルボタンのグループを作成したいと思います。 unclickして元の大きさに戻します。Silverlight Toggle Button Grouping

私はアプリが各ボタンを直接認識しているブルートフォースアプローチを使用することができますが、私がメニューを追加または変更すると(ボタンを追加/削除する)、コードを変更することを忘れないでください私は忘れているので悪いです)。ボタンをもっとインテリジェントにグループ化する方法があるので、クリックしたときにグループ内の他のすべての人に解凍を伝えることができます。

ありがとうございます! Todd

答えて

7

RadioButtonとコントロールテンプレートを使用する正しい方向に私を向けるためのMichael S. Scherotterに特別に感謝します!

私が思いついた基本的なコントロールテンプレートは次のとおりです。あなたが気にしている場合は、これをタグ間のApp.xamlに入れてください。 UXの皆さんはこれまで以上にかなりのことをしていますが、今のところ、それはトグルボタン(または単にボタン)のように見えるラジオボタンとして機能しますが、グループ名を持っています。

重要な注意:このテンプレートには基本的なボタンアニメーションが含まれていないため、クリックすると押されません。これは私が上で述べたUXの作業です。

<Style x:Key="MenuButton" TargetType="RadioButton"> 
     <Setter Property="Width" Value="100"/> 
     <Setter Property="Height" Value="25"/> 

     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="RadioButton"> 
        <Border BorderBrush="DarkGray" BorderThickness="3" CornerRadius="3" Background="Gray"> 
         <!-- The ContentPresenter tags are used to insert on the button face for reuse --> 
         <ContentPresenter></ContentPresenter> 
        </Border> 
       </ControlTemplate> 

      </Setter.Value> 
     </Setter> 
    </Style> 
3

すべてのRadioButtonオブジェクトに同じGroupNameを付けます。

+0

私が使用しているトグルボタンにはイメージとテキストがありますので、ラジオボタンや関連グループは使用できません。 –

+0

ラジオボタンは、好きなように見せることができます。 –

+2

これを行うには、ラジオボタンのコントロールテンプレートを変更する必要があります。 –

4

私は同じことをやろうとしていたと私はこの古い記事を見つけました。私はそれを少し更新してみましょう...

トッドは、UXの人たちがすべての作業をやり遂げることを可能にする多くの他の怠惰なプログラマーのようです。 :)だからここに、グループ内のラジオボタンなどの実際のトグルボタンとトッドのソリューションです:

<RadioButton GroupName="myGroup" 
      Style="{StaticResource MenuButton}" 
      Content="One" 
      IsChecked="True" /> 
<RadioButton GroupName="myGroup" 
      Style="{StaticResource MenuButton}" 
      Content="Two" />  
<RadioButton GroupName="myGroup" 
      Style="{StaticResource MenuButton}" 
      Content="Three" /> 

<Style x:Key="MenuButton" TargetType="RadioButton"> 
    <Setter Property="Width" Value="100"/> 
    <Setter Property="Height" Value="25"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="RadioButton"> 
       <Border BorderBrush="DarkGray" BorderThickness="3" CornerRadius="3" Background="Gray"> 
        <ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"> 
         <ToggleButton.Content>     
          <ContentPresenter></ContentPresenter> 
         </ToggleButton.Content> 
        </ToggleButton>        
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

そして今、あなたはあなたのかわいいボタンのロールオーバー効果を持っており、すべてが一つだけトグルボタンがあることができるようになるだろう " 1度にチェックされました。

ラジオボタンとトグルボタンの両方を3つの状態にすることができます。また、トグルボタンの 'IsThreeState'プロパティも、ここで 'IsChecked'と同じ方法でバインドできます。しかし、デフォルトでは2つの状態になっています。

また、ショートフォーム{TemplateBinding IsChecked}が既定で一方向になり、両者を同期させる必要があるので、長いフォームバインドが重要です。

この例では、当然のことながら、サイズ変更や、もともと投稿されたすべてのものトッドとのボタンをアニメーション化しませんが、それはあなたが容易に確認かされているものとして区別することができ、通常のボタンを与えません。

+0

この動作中に、グループ内のラジオボタンが押されると、そのグループには選択されたボタンがゼロ(少なくとも1つ...) – Pingi