XAML Listbox item no highlights

Question

I have a ListBox and within that ListBox you can select the items. For some reason there is no visual representation of this, and I would like to add one, if possible. I don't even see the default blue. Just nothing.

Project: WPF, using XAML, C# and MVVM (MVVM Light). Visual Studio 2010.

The first thing is to look at the ListBox itself:

<ListBox ItemsSource="{Binding NodeListViewModel.NodeList, Source={StaticResource Locator}}" Background="Transparent" Name="LbNodes">
            <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                    <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Width="1400" Height="1200"/>
                </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Canvas.Left" Value="{Binding CanvasLeft}"/>
                <Setter Property="Canvas.Top" Value="{Binding CanvasTop}"/>
                <EventSetter Event="PreviewMouseLeftButtonDown" Handler="lb_PreviewMouseLeftButtonDown" />
                </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                    <Canvas Background="Black">
                        <Thumb Name="myThumb" Template="{StaticResource NodeVisualTemplate}">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="DragDelta">
                                        <cmd:EventToCommand Command="{Binding NodeListViewModel.DragDeltaCommand, Source={StaticResource Locator}}" PassEventArgsToCommand="True"/>
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Thumb>
                    </Canvas>
                </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

So it's a ListBox with a data template which contains a Canvas which contains a Thumb. The 'NodeVisualTemplate' is as follows:

<ControlTemplate x:Key="NodeVisualTemplate">
            <Border BorderThickness="2" BorderBrush="LightBlue" Margin="2" CornerRadius="5,5,5,5">
                <StackPanel>
                    <TextBlock Text="Test" Background="AntiqueWhite"/>
                    <TextBlock Text="{Binding Path=NodeText}" Background="Aqua"/>
                    <StackPanel Orientation="Horizontal">
                        <TextBox Text="Type here" MinWidth="50"/>
                        <Image Source="{StaticResource ImgFolder}" Margin="0,0,5,0" Width="32" Height="32"/>
                    </StackPanel>
                </StackPanel>
            </Border>
        </ControlTemplate>

The problem, as I mentioned earlier, is that, when one selects an item, there is no visual highlighted state.

Question 1: is the item really selected?

I think so. The code behind contains this:

private void lb_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        ListBoxItem lbi = sender as ListBoxItem;
        LbNodes.SelectedItem = lbi.DataContext;

        //MessageBox.Show("Selected node name: " + ((lbi.DataContext) as NodeViewModel).NodeText);
    }

The MessageBox is a little test that allows me to check that the selection code is running and that the correct item is selected. It is.

Question 2: did you try something like this:

<Style x:Key="myListboxStyle">
<Style.Resources>
    <!-- Background of selected item when focussed -->
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />                
    <!-- Background of selected item when not focussed -->
    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" />
</Style.Resources>

Why yes I did. I then added Style="{StaticResource myListboxStyle}" to my ListBox, but no change.

Question 3: did you try doing it via the ItemContainerStyle?

Sure did brother. The ItemContainerStyle changed from what I showed at the top to this:

<ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Canvas.Left" Value="{Binding CanvasLeft}"/>
                <Setter Property="Canvas.Top" Value="{Binding CanvasTop}"/>
                <EventSetter Event="PreviewMouseLeftButtonDown" Handler="lb_PreviewMouseLeftButtonDown" />


                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True" >
                            <Setter Property="Background" Value="Red" />
                        </Trigger>
                    </Style.Triggers>
                    <Style.Resources>
                        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"/>
                    </Style.Resources>
                </Style>
        </ListBox.ItemContainerStyle>

No change. Still not seeing any highlights.

Question 4: what does it look like?

Like this:

Don't worry about the lines - they're not related (I don't think anyway). But on the off change they are related, I have two ListBoxes. The first is the lines, which uses the same data as the Thumbs. One sits atop the other (Thumbs one on top).

Thanks for your time.

TheFaithfulLearner TheFaithfulLearner · Accepted Answer · 2017-07-02T16:55:33

The problem here is that (and I've encountered this before, so clearly I didn't learn that well) is that a Canvas seems to default to a very small size. So the Canvas which contains the thumb is tiny, even though the node itself can be seen clearly.

XAML Listbox item no highlights

1 Answers