Silverlight Toggle Button Grouping

Question

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

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>

Answer 2

I was trying to do the same thing and I found this old post. Let me update it a bit...

Todd seems to be like many other lazy programmers, letting the UX guys do all the work. :) So here is Todd's solution with actual toggle buttons as radio buttons in a group:

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

And now you'll have your pretty button rollover effects and all that and only one toggle button will be able to be 'checked' at one time.

Both radio buttons and toggle buttons can be three state, and you can bind the 'IsThreeState' property of the toggle button as well in the same manner that I bind 'IsChecked' here. But by default they are two state.

Also, the long form binding is important here as the shortcut {TemplateBinding IsChecked} would default to one way and we need them to stay in sync both ways.

This example does not, of course, animate the buttons with size changing and all that Todd originally posted, but it does give you regular buttons that you can easily distinguish as being checked or not.