CODEWITHSUNDEEP
wpfxamllistbox
Tomasz
Tomasz

Reputation: 2061

WPF ListBoxItem MouseOver border change

I'm fighting with styling ListBox control in WPF.

I would like to change BorderBrush property of item if my mouse is over a ListBoxItem.

My ListBox is a part of custom control, but here's some code:

<ListBox x:Name="suggestionListBox"
            SelectionChanged="suggestionListBox_SelectionChanged"
            MouseUp="SuggestionListBox_OnMouseDown"
            Background="{Binding ElementName=Control, Path=Background}"
            ItemTemplate="{Binding ItemTemplate, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type controls:AutoCompleteComboBox}}}"
            Width="{Binding ElementName=Control, Path=ActualWidth}"
            HorizontalContentAlignment="Stretch">


    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Margin" Value="0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="BorderThickness" Value="1"></Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="BorderBrush" Value="Yellow" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="Green" />
                </Trigger>
            </Style.Triggers>


        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

And I'm adding ItemTemplate like this:

<DataTemplate>

        <StackPanel>
            <Label Content="{Binding FullName}" />
        </StackPanel>

</DataTemplate>

Basically, there is border inside ListBoxItem, which I cannot access, and which changes when IsMouseOver is set to true.

How to change color of that border when Mouse is over or not?

Upvotes: 0

Views: 3551

Answers (3)

Jayasri
Jayasri

Reputation: 235

Try This one 

<Border Name="ListboxBorderr" Grid.Column="1" CornerRadius="0,3,3,0">
  <Border.Style> 
    <Style> 
      <Setter Property="Border.Background" Value="Blue"/>

      <Style.Triggers> 
        <Trigger Property="Border.IsMouseOver" Value="True"> 
          <Setter Property="Border.Background" Value="Green" />
        </Trigger> 
      </Style.Triggers> 
    </Style> 
  </Border.Style> 
</Border>

Upvotes: 4

Tomasz
Tomasz

Reputation: 2061

Thanks to Jayasri I came to this:

<DataTemplate>
    <Border CornerRadius="0,3,3,0">
        <Border.Style>
            <Style TargetType="Border">
                <Setter Property="Border.Background" Value="#0093DD"/>
                <Style.Triggers>
                    <Trigger Property="Border.IsMouseOver" Value="True">
                        <Setter Property="Border.Background" Value="#70116b" />
                        <Setter Property="Label.Foreground" Value="White" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>

    <StackPanel>
            <Label Content="{Binding FullName}" >
                <Label.Style>
                    <Style TargetType="Label">
                        <Style.Triggers>
                            <Trigger Property="Border.IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="White"></Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Label.Style>
                </Label>
        </StackPanel>
    </Border>
</DataTemplate>

Upvotes: 0

Ben
Ben

Reputation: 935

You could either try to set the System.Colors for the ListBox and overwrite the existing defaults (like HighlightBrushColor) or, if you using VisualStudio, right click your ListBox -> Edit Template -> Edit a copy and modify this template to your desires. Especially when you want to add more customized behaviour to your ListBox.

Upvotes: 0

Related Questions