How to create a custom listview with a specific listview item style?

Hi everybody, I am trying to implement a custom image gallery. It has a very distinct design though, It supports drag and drop reordering. Each item has a button on the left and a thumbnail. The drag and drop should happen only when we drag the thumbnail. I tried a lot of ways but none of them seem to work properly. The design of the list view is as the image below. 

the first item in the list view looks like this. a button and a thumbnail and the last item looks the same but instead of a thumbnail it has an icon. When the add button is clicked a open file dialog appears and we can insert a thumbnail and dropped on to the add button which is on the left and right of the thumbnail. When the add button at the end is clicked it adds a thumbnail at the end. How do i implement something like this ? Any help is much appreciated. 

This is the code that i have for the list view item container.

<Style TargetType="ListViewItem" x:Key="ContainerStyle" ><Setter Property="KeyboardNavigation.IsTabStop" Value="False"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ListViewItem}"><StackPanel Orientation="Horizontal"><Button x:Name="AddButton"
                                        Style="{StaticResource SeparatorButtonStyle}"
                                        Tag="{TemplateBinding Tag}" AllowDrop="True"
                                        HorizontalAlignment="Left"
                                        Click="AddBtn_Clicked" VerticalAlignment="Center" Margin="10,0,10,0"/><Border x:Name="Bd" BorderBrush="Transparent" BorderThickness="5" Background="{TemplateBinding Background}" Margin="10,10,10,15"  SnapsToDevicePixels="true"><ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /></Border></StackPanel><ControlTemplate.Triggers><Trigger Property="IsSelected" Value="true"><Setter Property="Background" TargetName="Bd" Value="#098ae4" /></Trigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Background" TargetName="Bd" Value="#098ae4" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Setter Property="IsSelected" Value="False" /></Style>

The datatemplate looks like this..

<DataTemplate DataType="{x:Type local:ThumbData}"><Border BorderThickness="3,3,3,3" x:Name="thumbnailborder"  PreviewMouseMove="MouseOverImage" MouseLeave="thumbnailborder_MouseLeave_1"  AllowDrop="True" Tag="{Binding ThumbNumber}" DataContext="{Binding}" Width="150" PreviewMouseDown="Page_PreviewMouseDown" PreviewStylusDown="Page_PreviewStylusDown"><StackPanel x:Name="border" Background="LightGray"><Border><Grid><Border x:Name="transpBk" Height="{Binding ActualHeight, ElementName=thumbImage}" Width="{Binding ActualWidth, ElementName=thumbImage}"  VerticalAlignment="Center"  HorizontalAlignment="Center" /><Image x:Name="thumbImage"  Source="{Binding ImageSource}" VerticalAlignment="Center"  HorizontalAlignment="Center"  Stretch="Uniform"  Width="150" Height="100" /></Grid></Border><Border Width="150" Height="20" x:Name="ThumbnailNumberPanel"><Border Background="{Binding PColor}" Opacity="0.8" Width="150"  HorizontalAlignment="Center" Height="20"><TextBlock Text="{Binding ThumbNumber}"  TextWrapping="NoWrap" TextTrimming="WordEllipsis"  VerticalAlignment="Center"
                                                       HorizontalAlignment="Center"  FontFamily="Segoe UI" Foreground="White" FontSize="11" TextAlignment="Center"
                                                       Width="150" Margin="0" PreviewMouseDown="Page_PreviewMouseDown" PreviewStylusDown="Page_PreviewStylusDown"/></Border></Border></StackPanel></Border></DataTemplate>

Thanks and Regards, JohnnyWalker.