Category / Section
How to use drag indicator view with DataTemplateSelector in Xamarin.Forms ListView (SfListView)
You can customize the drag indicator for each template by using DataTemplateSelector in Xamarin.Forms SfListView.
XAML
Define DragIndicatorView in the DataTemplate to customize the drag indicator.
<local:MyDataTemplateSelector x:Key="MessageTemplateSelector">
<local:MyDataTemplateSelector.IncomingDataTemplate>
<DataTemplate>
<Grid ColumnSpacing="2" Padding="0">
...
<Frame OutlineColor="Transparent" HasShadow="False" BackgroundColor="#03A9F4">
<StackLayout Orientation="Horizontal">
<sync:DragIndicatorView ListView="{x:Reference listView}" HorizontalOptions="Center" VerticalOptions="Start">
<Grid Padding="5">
<Image Source="dragcircle.png" HeightRequest="40" WidthRequest="30"/>
</Grid>
</sync:DragIndicatorView>
<Label TextColor="White" Text="{Binding Text}" LineBreakMode="WordWrap" VerticalOptions="Center"/>
</StackLayout>
</Frame>
<Label FontSize="Micro" Grid.Row="1" Text="{Binding MessagDateTime, StringFormat='{0:MM/dd/yyyy hh:mm tt}'}" TextColor="Gray" LineBreakMode="NoWrap"/>
</Grid>
</DataTemplate>
</local:MyDataTemplateSelector.IncomingDataTemplate>
<local:MyDataTemplateSelector.OutgoingDataTemplate>
<DataTemplate>
<Grid ColumnSpacing="2" Padding="0">
...
<Frame Grid.Row="0" OutlineColor="Transparent" HasShadow="False" Grid.Column="1" BackgroundColor="#FFFFFF">
<StackLayout Orientation="Horizontal">
<Label TextColor="Black" HorizontalTextAlignment="Start" Text="{Binding Text}" LineBreakMode="WordWrap" />
<sync:DragIndicatorView ListView="{x:Reference listView}" HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand">
<Grid Padding="3">
<Image Source="dragsquare.png" HeightRequest="30" WidthRequest="30"/>
</Grid>
</sync:DragIndicatorView>
</StackLayout>
</Frame>
<Label Grid.Row="1" FontSize="Micro" Grid.Column="1" HorizontalTextAlignment="End" Text="{Binding MessagDateTime, StringFormat='{0:MM/dd/yyyy hh:mm tt}'}" TextColor="Gray" LineBreakMode="NoWrap"/>
</Grid>
</DataTemplate>
</local:MyDataTemplateSelector.OutgoingDataTemplate>
</local:MyDataTemplateSelector>
XAML
Assign a custom DataTemplateSelector to the ItemTemplate of the SfListView. Set the DragStartMode to OnDragIndicator to enable drag and drop using DragIndicator,
<sync:SfListView x:Name="listView"
ItemTemplate="{StaticResource MessageTemplateSelector}"
ItemsSource="{Binding Messages}"
ItemSize="105"
SelectionMode="None"
BackgroundColor="#FFFAF0"
DragStartMode="OnDragIndicator"/>
