Skip to content

Implement ItemTemplateSelector support on DragDropGridView.ItemsSource#6

Open
KarsaOrlong1981 wants to merge 4 commits intoroubachof:mainfrom
KarsaOrlong1981:DataTemplateSelectorSupport
Open

Implement ItemTemplateSelector support on DragDropGridView.ItemsSource#6
KarsaOrlong1981 wants to merge 4 commits intoroubachof:mainfrom
KarsaOrlong1981:DataTemplateSelectorSupport

Conversation

@KarsaOrlong1981
Copy link

@KarsaOrlong1981 KarsaOrlong1981 commented Dec 22, 2025

Fix Issue #4 :
DragDropGridView: DataTemplateSelector Support & Refactoring
• Added full support for ItemTemplateSelector
• Introduced a new BindableProperty and corresponding property for the DataTemplateSelector
• Enhanced handler detection for ScrollView and RefreshView to prevent Android.Runtime.JavaProxyThrowable
exceptions when custom handlers are used that do not derive from UntouchableRefreshViewHandler or UntouchableScrollViewHandler

Please double check:

I'm not sure about this "Dragging behind Items behavior":

dragtest.mp4

Usage:

xmlns:gridLayout="clr-namespace:Sharpnado.Maui.DragDropGridView;assembly=Sharpnado.Maui.DragDropGridView"

<ContentPage.Resources>

    <DataTemplate x:Key="Template1">
        <gridLayout:DragAndDropView>
            <Border BackgroundColor="Red"
                    HeightRequest="148"
                    Padding="0"
                    Margin="4"
                    StrokeThickness="0"
                    StrokeShape="RoundRectangle 4,4,4,4">
                <Label Text="{Binding Content}"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"
                       TextColor="White" />
            </Border>
        </gridLayout:DragAndDropView>
    </DataTemplate>

    <DataTemplate x:Key="Template2">
        <gridLayout:DragAndDropView>
            <Border BackgroundColor="Green"
                    HeightRequest="148"
                    Padding="0"
                    Margin="4"
                    StrokeThickness="0"
                    StrokeShape="RoundRectangle 4,4,4,4">
                <Label Text="{Binding Content}"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"
                       TextColor="White" />
            </Border>
        </gridLayout:DragAndDropView>
    </DataTemplate>

    <DataTemplate x:Key="Template3">
        <gridLayout:DragAndDropView>
            <Border BackgroundColor="Blue"
                    HeightRequest="148"
                    Padding="0"
                    Margin="4"
                    StrokeThickness="0"
                    StrokeShape="RoundRectangle 4,4,4,4">
                <Label Text="{Binding Content}"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"
                       TextColor="White" />
            </Border>
        </gridLayout:DragAndDropView>
    </DataTemplate>

    <DataTemplate x:Key="Template4">
        <gridLayout:DragAndDropView>
            <Border BackgroundColor="Yellow"
                    HeightRequest="148"
                    Padding="0"
                    Margin="4"
                    StrokeThickness="0"
                    StrokeShape="RoundRectangle 4,4,4,4">
                <Label Text="{Binding Content}"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"
                       TextColor="Black" />
            </Border>
        </gridLayout:DragAndDropView>
    </DataTemplate>

    <DataTemplate x:Key="Template5">
        <gridLayout:DragAndDropView>
            <Border BackgroundColor="Purple"
                    HeightRequest="148"
                    Padding="0"
                    Margin="4"
                    StrokeThickness="0"
                    StrokeShape="RoundRectangle 4,4,4,4">
                <Label Text="{Binding Content}"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"
                       TextColor="White" />
            </Border>
        </gridLayout:DragAndDropView>
    </DataTemplate>

    <local:WidgetTemplateSelector x:Key="WidgetSelector"
                                  Template1="{StaticResource Template1}"
                                  Template2="{StaticResource Template2}"
                                  Template3="{StaticResource Template3}"
                                  Template4="{StaticResource Template4}"
                                  Template5="{StaticResource Template5}" />
</ContentPage.Resources>
public class WidgetItem
{
    public string Type { get; set; }
    public string Content { get; set; }
}

public class WidgetTemplateSelector : DataTemplateSelector
{
    public DataTemplate Template1 { get; set; }
    public DataTemplate Template2 { get; set; }
    public DataTemplate Template3 { get; set; }
    public DataTemplate Template4 { get; set; }
    public DataTemplate Template5 { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var widget = item as WidgetItem;
        if (widget == null) return null;

        return widget.Type switch
        {
            "Type1" => Template1,
            "Type2" => Template2,
            "Type3" => Template3,
            "Type4" => Template4,
            "Type5" => Template5,
            _ => null
        };
    }
}
<ScrollView Background="White">
        <gridLayout:DragDropGridView
            ColumnCount="2"
            ColumnSpacing="4"
            DragAndDropTrigger="LongPress"
            IsDragAndDropEnabled="True"
            ItemTemplateSelector="{StaticResource WidgetSelector}"
            ItemsSource="{Binding OrderedWidgets}"
            RowSpacing="4" />
    </ScrollView>

The refactoring involved consolidating the property change handlers for ItemTemplate and ItemTemplateSelector into a single OnItemTemplateChanged(BindableObject, object, object) method. This was unnecessary to create a separate handler for ItemTemplateSelector, as the shared handler already handles both cases by reloading items and using GetTemplateForItem(object) to select the appropriate template (via selector if present, otherwise the direct template). This reduces code duplication and maintains the same functionality.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant