WPF Button Styles

Question

I have a style: "MinorBusinessAreaToggleButtonStyle" defined for my toggle buttons and I want to incorporate a "ToggleButton.Style", but I don't understand how to combine the "ToggleButton.Style" into the "MinorBusinessAreaToggleButtonStyle" style.

<Style x:Key="MinorBusinessAreaToggleButtonStyle" TargetType="ToggleButton" BasedOn="{StaticResource ToggleButton_Style_Base}">
        <Setter Property="Margin" Value="10 0 0 5"/>
        <Setter Property="Padding" Value="8 0 8 0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Background="{TemplateBinding Background}"
                            CornerRadius="5" 
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" >
                        <ContentPresenter 
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>


                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Foreground" Value="{DynamicResource Gold}"/>

                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter Property="Foreground" Value="Gray"/>

                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I want to incorporate the following into the above style:

<ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Background" Value="HotPink" />
                        <Setter Property="Opacity" Value="1.0" />
                    </Trigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.2" To="1"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.2" To="0.2"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>

Answer 1

Define the second Style as a resource with an x:Key. You may want to base it on the ToggleButton_Style_Base depending on your requirements:

<Style x:Key="FirstStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource ToggleButton_Style_Base}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="False">
            <Setter Property="Background" Value="HotPink" />
            <Setter Property="Opacity" Value="1.0" />
        </Trigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.2" To="1"></DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.2" To="0.2"></DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

You can then base the first style in your example on the second one:

<Style x:Key="MinorBusinessAreaToggleButtonStyle" TargetType="ToggleButton" BasedOn="{StaticResource FirstStyle}">
...

If you define the Styles in the same file, make sure that you define them in the correct order. That is ToggleButton_Style_Base first and then FirstStyle followed by MinorBusinessAreaToggleButtonStyle.

You can apply any of your styles to a ToggleButton by settings the Style property:

<ToggleButton Style="{StaticResource FirstStyle}" ... />