Question

I have a problem with my combobox I’m trying to customize. It is in a UserControl, and i want its BorderBrush property to change from Transparent to White when the mouse is over it (fade in/out would be bonus).

But I can’t seem to get the proper Trigger syntax to do so… now I feel confused and I’m probably missing something obvious here.

Here is the combobox in question:

<ComboBox x:Name="comboEmiCategories" ItemsSource="{Binding}" Background="Transparent" Height="15px" Width="30px" BorderBrush="Transparent" Padding="-2">
                    <ComboBox.Resources>
                        <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">0</sys:Double>
                    </ComboBox.Resources>
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding}" Stretch="UniformToFill" Height="15px" Width="30px" Margin="0" />
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                    <ComboBox.Template>
                        <ControlTemplate>
                            <ControlTemplate.Triggers>
                                <Trigger Property="ComboBox.IsMouseOver" Value="True">
                                    <Setter Property="ComboBox.BorderBrush" Value="White" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </ComboBox.Template>
                </ComboBox>

The trigger isn’t working, even worse actually, if i don’t comment out the whole ComboBox.Template part, the control disappears.

The main goal would be to have a ComboBox that stacks images and allows the user to select one out of a list, with nothing else than those images shown.

Thanks.

EDIT:
Mario’s solution of putting it within a style works, but is it the only way to do this?

Answer 1

Try to place the below xaml within the Resources section of your window/usercontrol.

<Style x:Name="cbStyle" TargetType="ComboBox">
   <Setter Property="BorderBrush" Value="Transparent" />
   <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="BorderBrush" Value="White" />
      </Trigger>
   </Style.Triggers>
</Style>

Of course you must refer this style in the ComboBox element. Also cut anything within the ControlTemplate, which is useless.

EDIT: your ComboBox section should look as follows:

<ComboBox x:Name="comboEmiCategories" ItemsSource="{Binding}" Height="15px" Width="30px" Style="{StaticResource cbStyle}" Padding="-2">
                    <ComboBox.Resources>
                        <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">0</sys:Double>
                    </ComboBox.Resources>
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding}" Stretch="UniformToFill" Height="15px" Width="30px" Margin="0" />
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>

Also put the Style declatarion in your UserControl.