Question

I have a Silverlight application that displays a list of items in a ListBox. Each item represents a different ‘page’ of my application so I have a style that is applied to the ItemContainerStyle property that looks like this:

<Style x:Key="navigationItemContainerStyle" TargetType="ListBoxItem">
    <Setter Property="Margin" Value="5,3"/>
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid Cursor="Hand">
                    <VisualStateManager.VisualStateGroups>
                        <!-- code omitted --!> 
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="contentBorder"
                            Background="{StaticResource navigationHighlightBrush}" 
                            CornerRadius="3"
                            Opacity="0"/>
                    <ContentControl x:Name="content"
                                    Margin="10,5"
                                    Content="{Binding}" 
                                    Foreground="DarkGray"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The style is very simple. It simply displays the Border when the ListBoxItem‘s visual state is equal to ‘Selected’. Notice that the content is hosted by a ContentControl as I want to be able to change the Foreground property when the item is in the ‘Selected’ state.

This works brilliantly as can be seen by the screenshot below:

Now I want the selected item to invoke navigation so the idea I had was to create a DataTemplate that sets the content of each item to a HyperLinkButton:

<DataTemplate x:Key="navigationListBoxItemTemplate">
    <HyperlinkButton Content="{Binding}" 
                     Background="Transparent"/>
</DataTemplate>

Now this doesn’t work as the ItemTemplate hosts it’s content in a ContentControl rather than a ContentPresenter so I have had to update the ListBoxItem template to use a ContentPresenter instead.

<ContentPresenter x:Name="content" Margin="10,5"/>

I now get the following result:

When I click on the HyperLinkButton the ListBoxItem is now no longer selected (I can click just outside the HyperLinkButton and the ListBoxItem becomes selected). What I really want is for the ListBoxItem to become selected when the HyperLinkButton is clicked. The HyperLinkButton has no concept of selection so I cannot bind to the ListBoxItem‘s IsSelected property.

Note: The actual navigation works perfectly, the problem is purely with the appearance of the ListBoxItems.

So my questions are:

1. Can I make it so that when the HyperLinkButton is clicked, the ListBoxItem becomes selected like the first image?
2. I will also need some way of changing the foreground of the HyperLinkButton when it is selected as this is no longer done in the items template due to me swapping the ContentControl fro a ContentPresenter.

Note: I could probably solve this problem by binding the SelectedItem property of the ListBox to my viewModel and handling the navigation there negating the requirement to have a HyperLinkButton hosted by each ListBoxItem but I am interested in knowing if it is possible using styles and templates to achieve my desired result.

Update

I have tried a couple of things to try and resolve this but so far have been unsuccessful. The first thing I tried was applying a new style to the HyperLinkButton control in my DataTemplate which essentially removes all of the default look and feel from the control but my application still behaves in the way described above.

The second thing I tried was setting the IsHitTestVisible property to false. This allows me to click ‘through’ the HyperLinkbutton and select the ListBoxItem but this means that the navigation is now no longer invoked.

Answer 1

The ListBoxItem is not selected because the Button (whatever type it is) marks the MouseLeftButtonDown event as Handled. Therefore the required event does not bubble up to the parent ListBoxItem.

Evidently, your ListBoxItem is getting focus from the click (I assume that is the border in your final image), so this must happen regardless.

Under the covers, the ListBoxItem will have a standard LeftMouseButtonDown event handler set up to deal with Selection, and it must have a call to AddHandler to deal with setting focus.

---

You can achieve something similar by adding your own handler for the event, like so:

 listboxitem.AddHandler(UIElement.MouseLeftButtonDownEvent, new System.Windows.Input.MouseButtonEventHandler(MyMouseLeftButtonDownEventHandler), true);

The final parameter instructs the handler to handle handled events…

Attaching this handler I leave to you, but using a behavior is probably the most straight forward. You could event derive a type from Button and have it walk up the Visual Tree to find and select the ListBoxItem… The possibilities are endless.