How do I make this trigger work?

Question

I've created a UserControl for use in my app. It consists of a ComboBox in a Grid with two RepeatButtons. This control is for use in an application that will run on a touchscreen equipped laptop. The buttons are used to select the next or previous choice in the ComboBox. Here is the Xaml for the control:

<UserControl x:Class="CarSystem.CustomControls.TouchComboBox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:cs="clr-namespace:CarSystem.CustomControls"
             mc:Ignorable="d"
             Focusable="True"
             GotFocus="UserControl_GotFocus">

    <UserControl.Resources>
        <Style x:Key="FocusedStyle" TargetType="{x:Type ComboBox}">
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Background" Value="{DynamicResource FocusedBackground}" />
                    <Setter Property="Foreground" Value="{DynamicResource FocusedForeground}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <Grid Background="{Binding Path=GridBackground, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}"
          Width="{Binding Path=Width, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <ComboBox Background="{Binding Path=Background, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}"
                  BorderBrush="{Binding Path=BorderBrush, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}"
                  DisplayMemberPath="{Binding Path=DisplayMemberPath, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  FlowDirection="{Binding Path=FlowDirection, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  Focusable="True"
                  FontFamily="{Binding Path=FontFamily, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  FontSize="{Binding Path=FontSize, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  FontStretch="{Binding Path=FontStretch, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  FontStyle="{Binding Path=FontStyle, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  FontWeight="{Binding Path=FontWeight, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}"
                  Foreground="{Binding Path=Foreground, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}"
                  HorizontalAlignment="{Binding Path=HorizontalAlignment, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  HorizontalContentAlignment="{Binding Path=HorizontalContentAlignment, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  Grid.Column="0" 
                  ItemsSource="{Binding Path=ItemsSource, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  Name="ChoicesPicker" 
                  SelectedIndex="{Binding Path=SelectedIndex, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  SelectedValue="{Binding Path=SelectedValue, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  SelectedValuePath="{Binding Path=SelectedValuePath, Mode=TwoWay,RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}" 
                  SelectionChanged="ChoicesPicker_SelectionChanged"
                  Style="{StaticResource FocusedStyle}"
                  TabIndex="{Binding Path=TabIndex, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}"
                  VerticalAlignment="Center"/>
        <RepeatButton Background="{DynamicResource ButtonBackground}" 
                      Click="SelectPreviousButton_Click"
                      Focusable="False"
                      Foreground="{DynamicResource ButtonForeground}" 
                      Grid.Column="1" 
                      IsTabStop="False"
                      Name="SelectPreviousButton">
            <Image Source="/CustomControls;component/Resources/VolumeUp.png" />
        </RepeatButton>
        <RepeatButton Background="{DynamicResource ButtonBackground}" 
                      Click="SelectNextButton_Click"
                      Focusable="False"
                      Foreground="{DynamicResource ButtonForeground}" 
                      Grid.Column="2" 
                      IsTabStop="False"
                      Name="SelectNextButton">
            <Image Source="/CustomControls;component/Resources/VolumeDown.png" />
        </RepeatButton>
    </Grid>
</UserControl>

I want the Background and Foreground brushes to change when the ComboBox gets the focus. The Style named "FocusedStyle" in the UserControl Resources is supposed to do this for me, but it's not working. The Background and ForeGround colors never change.

What is wrong with my code?

Tony

Answer 1

You can't set a property from a style if that property is set in the actual control because any property set in the control takes precedence.

Try this:

<UserControl.Resources>
    <Style x:Key="FocusedStyle" TargetType="{x:Type ComboBox}">
        <Style.Triggers>
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="Background" Value="{DynamicResource FocusedBackground}" />
                <Setter Property="Foreground" Value="{DynamicResource FocusedForeground}" />
            </Trigger>
            <Trigger Property="IsFocused" Value="False">
                <Setter Property="Background" Value="{DynamicResource UnFocusedBackground}" />
                <Setter Property="Foreground" Value="{DynamicResource UnFocusedForeground}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

Then you need to make a DynamicResource of the normal background.

Then remove the

    Background="{Binding Path=Background, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}"

and the

    Foreground="{Binding Path=Foreground, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type cs:TouchComboBox}}}"

from the Combobox.

This way the trigger will be able to set the value of the property because the property isnt being set by the control itself.