0

I have a ListBox in which each item is a StackPanel. The StackPanel consist of an Image and a TextBlock below it:

<ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="10"> <Image> <Image.Source> <BitmapImage UriSource="{Binding Path=ImageFilePath}"/> </Image.Source> </Image> <TextBlock Text="Title" TextAlignment="Center"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate>

It looks like this:

enter image description here

When the user select an item, I get the default blue rectangle that surround the StackPanel:

enter image description here

Now, I want to make a different border for the selected-item, but I want it to surround only the image.

I know how to make a control template and put a custom border around the ContentPresenter, but this, of course, will surround the whole StackPanel, not only the Image.

I don’t know if making changes to the ContentPresenter is possible, and if it is a good idea at all. If there is other way to achieve the look I want, it will be fine as well.

Improve this question

1 Answer 1

Reset to default
1

Right, the ListBox's own ContentPresenter isn't helpful for what you're doing. You want to a) eliminate the ListBox's own selection visuals and b) replace them with something more suitable in the DataTemplate for your items.

The default selection visual is applied by the default template for ListBoxItem. So replace that template. Using a Style in the resources for your ListBox, apply your own control template to ListBoxItem. Not much to it, just present the content and don't provide a selection background. Then you handle the selection visuals with a trigger in your data template, where your image and your label are defined and you can apply changes to one and not the other. The below example works for me.

Note that there's some fiddling with the HorizontalAlignment on the Border element to make it cling to the Image element within it. Also, I wrote a quickie test viewmodel whose Items property is called Items; I assume this is not the name of the collection member you're using to populate your own ListBox. 

<ListBox Margin="8" ItemsSource="{Binding Items}" > <ListBox.Resources> <Style TargetType="{x:Type ListBoxItem}"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListBoxItem}"> <Grid> <ContentPresenter /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListBox.Resources> <ListBox.ItemTemplate> <DataTemplate> <Grid> <Border x:Name="HighlightBorder" BorderThickness="4" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" > <Border.Style> <Style TargetType="Border"> <!-- MUST set default BorderBrush via a style, if you set it at all. As an attribute on the Border tag, it would override the effects of the trigger below. --> <Setter Property="BorderBrush" Value="Transparent" /> </Style> </Border.Style> <Image Source="{Binding ImageFilePath}" /> </Border> </Grid> <DataTemplate.Triggers> <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True"> <Setter TargetName="HighlightBorder" Property="BorderBrush" Value="Orange" /> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Works like a charm. I also didn't have any problem setting the BorderBrush as an attribute. Thanks a lot.
@Boohoo That's interesting; in WPF if I put BorderBrush="Blue" on the Border, the border brush remained blue on the selected item. That's been my consistent experience in WPF; it bites me from time to time. Anyway, glad it worked for you. Cheers!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.