CODEWITHSUNDEEP
wpf
Martyn Ball
Martyn Ball

Reputation: 4889

WPF Styling: mouse over change background to ControlTemplate Control

I have designed a button within my WPF application, this button layout will be used throughout the application, however the colours will change. There are two parts of the button, the left side has an icon and a background color, then the right side has the text with a different background color.

How can I reference the left sides background color in the Triggers so that when the user mouse over the button it will change to that color?

Side 1: Name="buttonIcon" Side 2: Name="buttonText"

<Style x:Key="ButtonIcoSmall" TargetType="Button">
            <Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Background" Value="#FF22252b" />
            <Setter Property="Padding" Value="8" />
            <Setter Property="Margin" Value="6" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="TextOptions.TextFormattingMode" Value="Display" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <WrapPanel>
                            <Border Grid.Column="0"
                                    CornerRadius="5 0 0 5" 
                                    BorderThickness="0"
                                    Background="#434953"
                                    Name="buttonIcon">
                                <WrapPanel>
                                    <ContentPresenter Grid.Column="0" 
                                                      HorizontalAlignment="Center" 
                                                      VerticalAlignment="Center" 
                                                      Margin="{TemplateBinding Margin}" />
                                </WrapPanel>
                            </Border>
                            <Border Grid.Column="0"
                                    CornerRadius="0 5 5 0" 
                                    BorderThickness="0"
                                    Background="#FF22252b"
                                    Name="buttonText" >
                                <TextBlock Text="{TemplateBinding Tag}" 
                                                       FontSize="13"
                                                       Foreground="White"
                                                       Padding="{TemplateBinding Padding}" />
                            </Border>
                        </WrapPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="" TargetName="buttonText" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#757b8d" />
                    <Setter Property="Foreground" Value="White" />
                </Trigger>
            </Style.Triggers>
        </Style>

Upvotes: 0

Views: 3604

Answers (1)

Bobby
Bobby

Reputation: 487

Hopefully I understand the issue correctly. If so, change your ControlTemplate.Triggers section to add a Setter for buttonIcon as follows:

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="" TargetName="buttonText" />
                            <Setter Property="Background" Value="Blue" TargetName="buttonIcon" />
                        </Trigger>
                    </ControlTemplate.Triggers>

Since you are handling IsMouseOVer for both parts of the button in the ControlTemplate, you may no longer need your Style.Triggers section unless it is providing useful background to the parent layers above the borders.

Upvotes: 4

Related Questions