WPF: Change ListBoxItem Background property for MouseOver programmatically

Question

My app creates a ListBox with c# code. I have managed to to set the background of my ListBox [white]. And managed to set some style attributes to the ListBoxItem (BackgroundProperty & MarginProperty).

For the MouseOver I defined a Trigger - and managed to set the BorderThicknessProperty & MarginProperty. see this article

But could not change the IsMouseOver background BackgroundProperty. I have tried to do like this:

triggerIsMouseOver.Setters.Add(new Setter(ListBoxItem.BackgroundProperty, Brushes.Purple)); // Does not work

I have this simple XAML:

<Grid Background="Black">
   <StackPanel x:Name="myStackPanel" Margin="10"></StackPanel>
</Grid>

And my code is like this:

List<string> ItemsList = new List<string>();

for (int i = 0; i < 5; i++)
{
    ItemsList.Add("ListBoxItem: " + i.ToString());
}

Trigger triggerIsMouseOver = new Trigger
{
    Property = ListBoxItem.IsMouseOverProperty,
    Value = true
};
            
triggerIsMouseOver.Setters.Add(new Setter(ListBoxItem.BorderThicknessProperty, new Thickness(2)));
triggerIsMouseOver.Setters.Add(new Setter(ListBoxItem.MarginProperty, new Thickness(1)));

// Does not work
triggerIsMouseOver.Setters.Add(new Setter(ListBoxItem.BackgroundProperty, Brushes.Purple)); 

Style styleListBoxItem = new Style
{
    TargetType = typeof(ListBoxItem),
};
styleListBoxItem.Triggers.Add(triggerIsMouseOver);
styleListBoxItem.Setters.Add(new Setter(ListBoxItem.BackgroundProperty, Brushes.Orange));
styleListBoxItem.Setters.Add(new Setter(ListBoxItem.MarginProperty, new Thickness(2)));

ListBox listBox = new ListBox
{
    ItemsSource = ItemsList,
    ItemContainerStyle = styleListBoxItem,
    Background = Brushes.White
};
            
myStackPanel.Children.Add(listBox);

You need to redefine the control template. Here is explanation: stackoverflow.com/questions/21972818/… — Konstantin Borisov
– Konstantin Borisov, Commented Aug 30, 2020 at 18:18
@KonstantinBorisov - thanks. Already seen that topic, but could not figure out how this issue should look like on Code Behind. — Yeshurun Kubi
– Yeshurun Kubi, Commented Aug 30, 2020 at 18:33
Note: Creating in WPF controls in C# is a hard way. Much easier to do it in xaml. Also all styles can be applied there natively. I suggest to learn xaml. — aepot
– aepot, Commented Aug 30, 2020 at 21:30
Consider this example to learn about what approach is popular among professionals in WPF - MVVM programming pattern. — aepot
– aepot, Commented Aug 30, 2020 at 22:17
The solution is to override the ListBox.Template by writing a new ControlTemplate. Don't use C# to create templates. You'll get no Intellisense support, since you have to write a plain string object, which is then parsed into a ControlTemplate object. Note that in order to create this string you'll have to write XAML code as well. You basically would use C# to create a string that must conform to XAML without the help of Intellisense. So you only lose when using C# to accomplish your task. Overriding the default brushes would help with a DataGrid but not ListBox. — BionicCode
– BionicCode, Commented Aug 31, 2020 at 8:27

Yeshurun Kubi · Accepted Answer · 2020-09-01 00:34:35Z

1

The style is invalid because: The default template for the ListboxItem contains a built-in Ismouseover trigger, which changes the effect of the template element. Causes the Ismouseover you set to be invalid. So, you need to define a control template like this. As follows:

<controltemplate targettype="listboxitem">
    <Border x:Name="Bd"
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}" 
        Background="{TemplateBinding Background}" 
        Padding="{TemplateBinding Padding}" 
        SnapsToDevicePixels="true">
        <ContentPresenter 
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
</controltemplate>

edited Sep 1, 2020 at 0:34

Yeshurun Kubi

1461 silver badge13 bronze badges

answered Aug 31, 2020 at 10:05

i code

1266 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

WPF: Change ListBoxItem Background property for MouseOver programmatically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related