Image shifting while displaying border around listbox item wpf

Question

I am using a listbox to display images. When a listbox item is selected it displays a border around the image. Instead of displaying border around the image it shifts the image towards right.

Listbox style:

<Style TargetType="{x:Type ListBox}">
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Path=UriSource}" 
                        Stretch="Fill"
                        Width="639" Height="530">
                     </Image>
                 </StackPanel>
             </DataTemplate>
         </Setter.Value>
     </Setter>
     <Setter Property="ItemsPanel">
         <Setter.Value>
             <ItemsPanelTemplate>
                 <WrapPanel />
             </ItemsPanelTemplate>
          </Setter.Value>
      </Setter>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" 
          Value="Disabled"/>
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" 
          Value="Disabled"/>

       <Setter Property="HorizontalContentAlignment" 
           Value="Left"/>
       <Setter Property="VerticalContentAlignment" 
           Value="Center" />
</Style>

List box item style:

<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
   <Setter Property="Padding" Value="0,0,0,0"/>
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="{x:Type ListBoxItem}">
                   <Border x:Name="Bd"
                      SnapsToDevicePixels="True"
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="0"
                      Padding="{TemplateBinding Padding}">
                <ContentPresenter  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource BorderColor}"/>
                            <Setter Property="BorderThickness" TargetName="Bd" Value="12" />
                            <Setter Property="Width" Value="639"  />
                            <Setter Property="Height" Value="530"  />
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="Selector.IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource BorderColor}"/>
                            <Setter Property="BorderThickness" TargetName="Bd" Value="12" />
                            <Setter Property="Width" Value="639" />
                            <Setter Property="Height" Value="530" />
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Lucas Trzesniewski Lucas Trzesniewski · Accepted Answer · 2016-01-16T23:41:09

This is because in your ListBoxItem style, you're changing the border's thickness, from 0 in the normal case, to 12 when the item is selected. This shifts the content by 12pt.

You have several of possible solutions here, here are two possibilities:

Always use a 12pt border, but use a Transparent or {x:Null} brush in the unselected state
Use a 12 margin on your ContentPresenter, and set it to 0 in the triggers

Image shifting while displaying border around listbox item wpf

2 Answers