Question

I have recently just changed to a ToggleButton after doing research that they work like RadioButtons which is exactly what I need.

I have Storyboard animations on my Buttons and when I click they appear as an arrow to show that is the page your on like this:

enter image description here

But as you can see when I select them both that other one stays checked.

This is the code I have at the moment (for one of the buttons, the other is the same):

<ToggleButton x:Name="btnToDo" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="222" Click="Button_Click" Height="29" Margin="0,132,0,0">
            <ToggleButton.Template>
                <ControlTemplate TargetType="{x:Type ToggleButton}" >
                    <Grid>
                        <Image x:Name="Normal" Source="Images/Normal1.png" Width="281" HorizontalAlignment="Left"/>
                        <Image x:Name="Hover" Source="Images/Hover1.png" Opacity="0" Width="281" HorizontalAlignment="Left"/>
                        <Image x:Name="Pressed" Source="Images/ben.png" Stretch="Fill" Opacity="0"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Trigger.EnterActions>
                            <BeginStoryboard x:Name="ButtonCheckedStoryboardBegin"
                                             Storyboard="{StaticResource MouseDownTimeLine}"/>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard x:Name="ButtonUncheckedStoryboardEnd" 
                                             Storyboard="{StaticResource MouseUpTimeLine}"/>
                        </Trigger.ExitActions>
                    </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource MouseUpTimeLine}"/>
                            </Trigger.EnterActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>

My MouseUpTimeLine, MouseDownTimeLine and MouseExitTimeLine is this:

    <Storyboard x:Key="MouseDownTimeLine" >
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity" >
            <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="MouseUpTimeLine">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity" >
            <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
        </DoubleAnimationUsingKeyFrames>

    <Storyboard x:Key="MouseExitTimeLine">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Normal" Storyboard.TargetProperty="Opacity" >
            <SplineDoubleKeyFrame KeyTime="00:00:00.00" Value="1"/>
        </DoubleAnimationUsingKeyFrames>

So I want the state to back to normal when it IsChecked is False, and this should be when another button IsChecked.

Was it helpful?

Solution

Eh no worries, everyone's bound to be new at something at some point. Anyhow like I said in the comment. The ToggleButton doesn't have the functionality you're looking for by default. Switching to a RadioButton and just styling it to look like your button would make life easier moving forward to provide the behavior you're after.

You can find information and default templates in the MSN docs and using Blend makes editing templates fairly easy, for your instance you could just plop a RadioButton on the designer, right-click it, and choose "edit template -> edit a copy" to add a copy of the control template to your view to edit to your hearts content.

Hope this helps, and if you run into anything along the way come on back and we'll get you sorted. Cheers

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top