How to hide hover and click event of UniformGrid?

Question

I try to create a list of buttons with two columns using a ListBox and UniformGrid. Everything seemed to be okay until I faced the following issue. The margin space of the button was shown with light blue color when I click it or hover over it. How to remove this effect?

This is my code:

<ListBox Width="1000" Grid.Row="1" VerticalAlignment="Top" VerticalContentAlignment="Top" Name="uniformGrid1" Margin="50" ItemsSource="{Binding SomeItemsList}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="2" Background="Transparent"   Name="uniformGrid1"></UniformGrid>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Button Margin="50" Height="70" Click="keyword_Click" Width="250"
         Foreground="Black" FontSize="16" FontFamily="Helvetica Neue" FontWeight="Bold"
        BorderBrush="SlateGray" Content="{Binding Name}">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0.073" />
                        <GradientStop Color="White" Offset="1" />
                        <GradientStop Color="#FFE9E9F9" Offset="0.571" />
                        <GradientStop Color="#FFD7D7EC" Offset="0.243" />
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

score 0 · Answer 1 · answered Nov 30 '21 at 10:22

The problem here is that the ListBox has a selection, and selected items get highlighted. You need to disable this highlighting to get the desired result, for example by setting ListBox.ItemContainerStyle as described in this answer. This will remove the (lightblue) selection color.

thatguy · Accepted Answer · 2021-11-30T11:08:54.600

Each item in the ItemsSource is wrapped in a ListBoxItem inside the ListBox. A ListBox is a control derived from Selector, which is a base type for items controls that allow selection of items.

Represents a control that allows a user to select items from among its child elements.

What you specified as DataTemplate will be placed in a ListBoxItem at runtime, which is the container for the content. This container has a default style and control template that defines its appearance and visual states. What you see is the MouseOver state and the Selected state. You can change this by extracting the default style for ListBoxItem and adapting it or by writing your own.

How to create a template for a control (WPF.NET)

However, it seems that your intention is different. What you probably wanted was to simply display buttons in a UniformGrid depending on a bound collection, without any selection. You can achieve this by using an ItemsControl instead. It does not offer any selection capabilities, but lets you bind a collection with the UniformGrid as items panel.

<ItemsControl Width="1000" Grid.Row="1" VerticalAlignment="Top" VerticalContentAlignment="Top" Margin="50" ItemsSource="{Binding SomeItemsList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="2" Background="Transparent" Name="uniformGrid1"></UniformGrid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Margin="50" Height="70" Click="keyword_Click" Width="250"
         Foreground="Black" FontSize="16" FontFamily="Helvetica Neue" FontWeight="Bold"
        BorderBrush="SlateGray" Content="{Binding Name}">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0.073" />
                        <GradientStop Color="White" Offset="1" />
                        <GradientStop Color="#FFE9E9F9" Offset="0.571" />
                        <GradientStop Color="#FFD7D7EC" Offset="0.243" />
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Please note that I have removed one of two Name="uniformGrid1" as duplicate names lead to a compilation error. If your content exceeds the viewport and you need scrollbars, you have to add a ScrollViewer, since this is built into the ListBox, but not the ItemsControl.

<ScrollViewer HorizontalScrollBarVisibility="Auto"
              VerticalScrollBarVisibility="Auto">
   <ItemsControl  Width="1000" Grid.Row="1" VerticalAlignment="Top" VerticalContentAlignment="Top" Margin="50" ItemsSource="{Binding SomeItemsList}">
      <!-- ...other code. -->
   </ItemsControl>
</ScrollViewer>

How to hide hover and click event of UniformGrid?

2 Answers2