Silverlight Toggle Button Grouping

Question

Hola,

I'm developing a Silverlight app and would like to create a grouping of 5 toggle buttons (used for menu options) that animate when clicked (grow in size) and also cause any previously clicked buttons in the group to unclick and animate back to their shrunken size.

I know I could use a brute force approach where the app is directly aware of each button, but if I add or change the menu (add/remove a button) I'd have to remember to modify the code (which is bad since I'm forgetful). Is there a way to more intelligently group the buttons so that when one is clicked is can tell all the others in the group to unclick?

Thanks! Todd

Answer 1

Give all of the RadioButton objects the same GroupName.

Answer 2

Special shout-out to Michael S. Scherotter for pointing me in the right direction to use RadioButton and a control template!

Here's the basic control template that I came up with. Put this in the App.xaml between the tags if you care to see it. The UX folks will give it a once over to pretty it up, but for now, it works as a radio button that looks like a toggle button (or just a button), but has a groupname.

An important note: this template doesn't have any of the basic button animation, so it won't press down when clicked... That's the UX work I mentioned above.

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