I try to create a list of button with two column using the listBox & uniformGrid, everything seem okay until I faced with this issue. The margin space of the button was show with lightblue color when click or hover. Please answer me if is there anyway to remove these effect.
Here 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>
CodePudding user response:
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.
CodePudding user response:
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.
Consequently, 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.
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.