ToggleButton MouseOver Checked Pressed Question

0
votes

I want to style the ToggleButton to change color when pressed, and stay that color until pressed again. Currently the mouseover changes the color back after it's pressed and the mouse leaves the togglebutton. I took away the mouseover color change and that allowed me to set the color in the Checked state, but I don't want to lose the mouseover effect. Is there a way to have both? I've created my own expander, teaching myself about creating controls, but can't see to figure out how to have both mouseover and a pressed color that statys, mouseover in my example should only reset if the button was not clicked/checked. I'm working off this ToggleButton style: http://msdn.microsoft.com/en-us/library/cc296245(v=vs.95).aspx

2
silverlighttogglebutton
Can you describe what effect you actually want. The default template feeds back the checked state by using the direction of the gradient. If you are not using that what appearance do you want when the button is both checked and the mouse is over it? – AnthonyWJones
You are experiencing the same issue as in this question: stackoverflow.com/questions/3596026/… – Denis

2 Answers

2
votes

This MSDN Link under the the Remarks section claims:

ControlTemplate authors VisualState objects to a VisualStateGroup in a ControlTemplate to specify the visual behavior of the control. You put states that are mutually exclusive to each other in the same VisualStateGroup. For example, the CheckBox has two VisualStateGroup objects. One contains the states, Normal, MouseOver, Pressed, and Disabled. The other contains the states, Checked, UnChecked, and Indeterminate. The CheckBox can be in states MouseOver and UnChecked at the same time, but it cannot be in the MouseOver and Pressed states at the same time.

I'm fairly new to silverlight, but it looks like you will have to use a 2nd control like a border or rectangle, not sure if this is an option, but you could also set it up to change a border brush color on the mouse over.

1
votes

The order of your triggers is important. This style works as you specified.

<Style x:Key="{x:Type ToggleButton}" TargetType="{x:Type ToggleButton}">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Name="Border" BorderThickness="1" Background="Gray" BorderBrush="Gray">
                    <ContentPresenter Name="ContentHost" Margin="8,3" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="true" />
                </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="Yellow" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="Yellow" />
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="Red" />
                            <Setter TargetName="Border" Property="BorderBrush" Value="Red" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="Green" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="Green" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="Border" Property="Opacity" Value="0.25" />
                        </Trigger>
                    </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>