2009-06-02 60 views
11

我正在開發一個Silverlight應用程序,並希望創建一組5個切換按鈕(用於菜單選項),該按鈕可以在點擊時生成動畫(增加大小),並且還可以導致組中的任何先前單擊的按鈕去除和動畫回到他們縮小的大小。我知道我可以使用暴力方法,其中應用程序是直接瞭解每個按鈕,但如果我添加或更改菜單(添加/刪除按鈕),我不得不記得修改代碼(哪些不好,因爲我很健忘)。有沒有辦法更智能地分組按鈕,以便點擊時可以告訴組中的所有其他人不要點擊?Silverlight開關按鈕分組

謝謝! Todd

回答

7

對Michael S. Scherotter特別留言,指出我在正確的方向使用RadioButton和控件模板!

這是我想出的基本控制模板。如果你喜歡看它,將它放在標籤之間的App.xaml中。用戶體驗團隊將一次性完成它,但現在,它可以作爲一個單選按鈕,看起來像一個切換按鈕(或者只是一個按鈕),但有一個組名。

一個重要的注意事項:該模板沒有任何基本的按鈕動畫,所以點擊時不會按下...這就是我上面提到的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

我使用的切換按鈕上有圖像和文字,所以我不能使用單選按鈕和關聯組。 – 2009-06-02 21:46:07

+0

您可以設置單選按鈕的樣式,使其看起來像任何你想要的。 – 2009-06-02 21:48:56

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> 

現在你有你漂亮的按鈕,翻轉效果和這一切,只有一個切換按鈕,就能成爲'檢查'一次。

單選按鈕和切換按鈕都可以是三個狀態,並且您可以綁定切換按鈕的'IsThreeState'屬性以及我在此綁定'IsChecked'的相同方式。但是默認情況下它們是兩個狀態。

此外,長格式的綁定在這裏很重要,因爲快捷方式{TemplateBinding IsChecked}會默認爲一種方式,我們需要它們保持同步。

這個例子沒有,當然,動畫與大小變化和所有託德最初發布的按鈕,但它確實給你普通的按鈕,如被檢查或沒有用戶很容易區分。