Question

I have a WPF Tab Control. Inside of it is a Listbox filled with some items. (There is only one item represented in the picture):

The item has an orange gradient.

And here is the same item once I select it with the mouse:

My area of interest is the little left side sliver of Blue coloring that I have circled in red. I realize that this is the product of me selecting the item, and it shades the entire item blue to signify this. However you will notice that this sliver of blue is not located in any of the edges except the left side.

My question is this: How can I stretch the left side of my listbox item such that this blue sliver is gone, and the orange from the listbox item fills that area? I have played with margins and padding on everything I can think of, but to no avail.

Any hints, comments, and suggestions are much appreciated! 🙂

EDIT: As requested, the Xaml for the ItemTemplate.

The ItemTemplate uses a DataTemplate that is a static Resource. The DataTemplate looks like this:

    <DataTemplate x:Key="MyDataTemplate">
        <UserControl MouseDoubleClick="MouseDoubleClick_Event">
            <DockPanel Background="<the orange gradient>" LastChildFill="True">
                <Image Name="AnImage" Height="20" Width="20" Source=" Binding Path=ImagePath}"/>
                <Label Width="Auto">
                    <TextBlock Text="{Binding Path=TheName}" />
                </Label>
            </DockPanel>
        </UserControl>
    </DataTemplate>

Answer 1

I have found a solution to this. If I simply set a negative left margin on my ListBox, it moves the ListBoxItems over that amount and the sliver disappears. Thanks to everyone for your interest!