Question

I’m trying to format my ListBoxItem template to include a image. I can add an image to the ListBoxItem but i’m not too sure on how i would go about setting the value for that image.

Template for ListBoxItem:

        <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Name="Border" Padding="2" SnapsToDevicePixels="true">
                        <StackPanel Orientation="Horizontal" >
                            <Image Source="{Binding Path=Source}" Height="16" Width="16" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <ContentPresenter Name="ContentPresenter" HorizontalAlignment="Stretch" Width="Auto" />
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource ListBoxItem_BackgroundBrush_Selected}"/>
                            <Setter TargetName="ContentPresenter" Property="TextElement.FontWeight" Value="Bold"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{StaticResource TabItem_BackgroundBrush_Disabled}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Example ListBox code:

   <ListBox Name="listBox_LibAll" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
       <ListBoxItem Content="Item 1" />
       <ListBoxItem Content="Item 2" />
       <ListBoxItem Content="Item 3" />                                
   </ListBox>

Output:

If you look at the picture you will note that there is a place for the image, i just dont know how to set its value. I was thinking i could somehow attach the "Source" property to the ListBoxItem

Answer 1

You can do a RelativeSource binding to the Tag or some attached property.

Source="{Binding Tag, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"

<ListBoxItem Tag="SomePath" />

Source="{Binding (ns:AttachedProperties.Source), RelativeSource={RelativeSource AncestorType=ListBoxItem}}"

<ListBoxItem ns:AttachedProperties.Source="SomePath" />

You could also use dynamic resources as shown here.

The cleanest solution however would be to make the content complex, i.e. make the ListBoxItem host a UserControl or custom control for example which actually has a proper property for the image. You should usually not override the control template of ListBoxItems either but rather use the ItemTemplate of the ListBox to data template the data.