问题 Silverlight切换按钮分组

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

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

谢谢！托德

10637

2018-06-02 20:22

起源

答案:

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>

2018-06-05 12:19

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

Todd似乎和许多其他懒惰的程序员一样，让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最初发布的所有按钮设置动画，但它确实为您提供了常规按钮，您可以轻松区分这些按钮是否被检查。

2018-05-23 14:50

虽然这有效，但是你松开了按钮组的行为，一旦按下组中的单选按钮，该组就不能再有ZERO选择的按钮（至少一个......） - Pingi

答案:

Michael S. Scherotter特别向我指出了使用RadioButton和控制模板的正确方向！

一个重要的注意事项：这个模板没有任何基本的按钮动画，因此点击时不会按下...这就是我上面提到的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>

2018-06-05 12:19

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

Todd似乎和许多其他懒惰的程序员一样，让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>

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

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

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

2018-05-23 14:50

虽然这有效，但是你松开了按钮组的行为，一旦按下组中的单选按钮，该组就不能再有ZERO选择的按钮（至少一个......） - Pingi

为所有RadioButton对象提供相同的GroupName。

2018-06-02 20:32

我正在使用的切换按钮上有图像和文字，所以我不能使用单选按钮和相关组。 - Todd Schrubb

您可以设置单选按钮的样式，使其看起来像您想要的任何内容。 - Michael S. Scherotter

您需要修改单选按钮的控件模板才能执行此操作。 - Michael S. Scherotter

问题 Silverlight切换按钮分组

答案:

答案:

热门问题