Maximus
Maximus

Reputation: 3448

Remove blue border of ListboxItem when MouseOver

I have been trying to remove blue box when mouse is over item in Listbox and I ran out of ideas, perhaps you will come out with any. Thank you in advance.enter image description here

simple Listbox

<ListBox ItemsSource="{Binding Mylist}" />

Unfortunately, solution below does not work

<ListBox ItemsSource="{Binding lista}" >
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
                </Style.Resources>
            </Style>
        </ListBox.ItemContainerStyle>

    </ListBox>

enter image description here

Upvotes: 1

Views: 2416

Answers (3)

Maximus
Maximus

Reputation: 3448

New problem came out, I acquired listbox without blue border

 <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter
                          x:Name="contentPresenter"
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

but I have set ItemContainerStyle like this

 <Style TargetType="ListBoxItem" x:Key="ContainerStyle">
        <Setter Property="ContentTemplate" Value="{StaticResource not_mouseover}"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="ContentTemplate" Value="{StaticResource mouseover}"/>
            </Trigger>

        </Style.Triggers>
    </Style>
    <ListBox ItemsSource="{Binding lista}" ItemContainerStyle="{StaticResource ContainerStyle}">

and in this case it turns out that it does not work(I mean blue border turns up as previously). If I set ItemTemplate to any of specified DateTemplate it works fine, but here not. Do you happen to know why? I sorted this out. Just one style for ListboxItem

<Style x:Key="item_template" TargetType="ListBoxItem">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Template" Value="{StaticResource control_mouseover}"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Template" Value="{StaticResource control_not_mouseover}"/>
            </Trigger>
        </Style.Triggers>           
    </Style>
</Window.Resources>
    <ListBox ItemsSource="{Binding lista}" ItemContainerStyle="{StaticResource item_template}"> 
    </ListBox>

and declared ControlTemplate in order to remove blue borders

<ControlTemplate x:Key="control_not_mouseover" TargetType="ListBoxItem">
        <ContentPresenter
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{StaticResource not_mouseover}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"/>
    </ControlTemplate>
    <ControlTemplate x:Key="control_mouseover" TargetType="ListBoxItem">
            <ContentPresenter
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{StaticResource mouseover}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"/>
        </ControlTemplate>

Maybe someone will take advantage of this.

Upvotes: 0

trinaldi
trinaldi

Reputation: 2950

Styles with no x:Key are meant to work in all TargetType controls.
For example:

 <Style TargetType="Button">
        <Setter Property="Background" Value="Green" />
 </Style>

Will work every time you set a new Button control. So, if you insert a Button without specifying a style like this: <Button/> it will have a green Background, as specified above.

On the other hand:

 <Style TargetType="Button" x:Key="myButton">
        <Setter Property="Background" Value="Green" />
 </Style>

Will only work for Button controls that specifies the Style template.
i.e: <Button Style="{StaticResource myButton}" /> -> This Button will have a green background and all other Buttons will have the default background color.

My advice is: always set a x:Key in your styles so you can set them later. In your scenario, put the x:Key="ContainerStyle" at the first code and remove the Style declared later. It should work.

Upvotes: 0

trinaldi
trinaldi

Reputation: 2950

This behavior is dictated by the Control template.

If you're familiar with XAML, right click the ListBox, go to Edit Template -> Edit Copy... Check for Border tags.

In order to help you, check this link as well:ListBox Styles and Templates

Upvotes: 1

Related Questions