Silverlight切换按钮分组

时间:2009-06-02 20:22:08

标签: c# silverlight xaml

我正在开发一个Silverlight应用程序,并希望创建一个包含5个切换按钮(用于菜单选项)的分组,这些按钮在单击时增大动画(增大尺寸),并且还会导致组中任何先前单击的按钮取消选中并设置动画回到他们缩小的尺寸。

我知道我可以使用暴力方法,应用程序直接知道每个按钮,但如果我添加或更改菜单(添加/删除按钮),我必须记住修改代码(这是因为我很健忘,所以很糟糕。有没有办法更智能地对按钮进行分组,以便在单击按钮时可以告诉组中的所有其他按钮是否取消?

谢谢! 托德

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:4)

我试图做同样的事情,我找到了这个老帖子。让我稍微更新一下......

托德似乎和许多其他懒惰的程序员一样,让UX工作人员完成所有工作。 :)所以这里是Todd的解决方案,实际切换按钮作为组中的单选按钮:

<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>

现在你将拥有漂亮的按钮翻转效果,所有这一切,只有一个切换按钮可以一次'检查'。

单选按钮和切换按钮都可以是三种状态,您也可以使用与此处绑定'IsChecked'相同的方式绑定切换按钮的'IsThreeState'属性。但默认情况下,他们是两个州。

此外,长形式绑定在这里很重要,因为快捷方式{TemplateBinding IsChecked}默认为单向,我们需要它们保持同步两种方式。

当然,这个例子不会为尺寸变化的按钮和Todd最初发布的所有按钮设置动画,但它确实为您提供了常规按钮,您可以轻松区分这些按钮以进行检查。

答案 2 :(得分:3)

为所有单选按钮对象指定相同的组名。