Category / Section
How to use drag indicator view with DataTemplateSelector in Xamarin.Forms ListView (SfListView)
1 min read
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"/>
