Animating list box selected item

Dear all,

Initially, I have a list box of items define as below :

Items are define with a visible picture as shown above and with a white border which is not visible here as its width is set to 0 at this stage. The idea is that when I click on a select item, I am animated the border width of the selected item in order that it shows internal content of selected item. Effect is looks like a fan.

Lets imagine that click on item 2, what I would like to get is that the left side of item 2 gets stick to left of item 1 while expending the border and Item 3 left side should remain close to the expended border.

By trying to doing so here is what I get :

As you can see, the Item which has been click display correctly the expended white border but at the same time the Left position of item 2 does not remains close to Item 1.

Here is the used layout of an item inside the main listbox:

<Grid><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="Auto" /><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><!-- Card vertical label color --><Rectangle Grid.Column="0" Grid.RowSpan="2" Fill="{Binding Color,UpdateSourceTrigger=PropertyChanged}" Width="10" Margin="0,0,5,0"/><!-- picture side scene--><Image x:Name="photo1" Grid.Column="1" Grid.RowSpan="2"  Source="{Binding ImagesProperty,UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource imgRenderTransformStyle}" Width="250" Height="180"  Stretch="UniformToFill" Opacity="1"/><!-- Card bottom label --><Border Background="{DynamicResource AppNameArea}" Grid.Column="1" Grid.Row="1" MinHeight="40"  VerticalAlignment="Bottom" Opacity="0.8" Width="250"><Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition Width="40"/></Grid.ColumnDefinitions><TextBlock Grid.Column="0" Text="{Binding Name,UpdateSourceTrigger=PropertyChanged}" 
                       TextWrapping="Wrap" HorizontalAlignment="Left"
                       VerticalAlignment="Center" 
                       Padding="5" 
                       Foreground="White" FontSize="12" FontFamily="Segoe UI" TextAlignment="Left" /><Border Grid.Column="1" Background="White"><TextBlock Grid.Column="1" Text="{Binding ProductItemsCount,UpdateSourceTrigger=PropertyChanged}" 
                       TextWrapping="Wrap" HorizontalAlignment="Center"
                       VerticalAlignment="Center" 
                       Padding="5" 
                       Foreground="{DynamicResource AppNameArea}" FontSize="12" FontFamily="Segoe UI" TextAlignment="Left" /></Border></Grid></Border><!--Content control to diplay product belonging to selected categoriy --><Border x:Name="_ItemsPhotoControl" Grid.Column="2" Grid.RowSpan="2" Width="0"/></Grid>

Any idea what could be wrong ?

regards