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>
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.
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. 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>