question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add support for CollectionView

See original GitHub issue

I decided to add item to discuss challenges and approaches to implement CollectionView. I can see two issues straight away - supporting ItemsSource property and ItemTemplate property.

Supporting ItemsSource property was discussed in https://github.com/xamarin/MobileBlazorBindings/issues/249, and I think same approach with wrapping in delegate should work here as well. The only thing - I’m not sure whether we should do anything about notifying about updates.

Supporting DataTemplate properties will probably be trickier. Unlike original Xamarin control, I suggest to make CollectionView in MBB generic where T is item type, and to make ItemTemplate property of RenderFragment<T> type. Smth like this

public class CollectionView<T> : ...
{
	[Parameter] public IEnumerable<T> ItemsSource {get; set;}
	[Parameter] public RenderFragment<T> ItemTemplate {get; set;}
...
}

So that it could be used like that:

<CollectionView ItemsSource="_models">
    <ItemTemplate>
        <Label Text="@context.Name" />
    </ItemTemplate>
</CollectionView>

@code {
    List<MyModel> _models;
}

Now we need render those items, and pass to Xamarin’s ColectionView.

Currently there is no way to render components as root elements, we can only render it as child component (e.g. for Application or ContentPage). Is there an easy way to allow that? Otherwise I suppose we can create “fake” container element, which we’ll simply use to render elements to, and then grab them from it.

As for passing to CollectionView, I suppose we can inherit from DataTemplateSelector, smth like this:

public class RenderFragmentDataTemplateSelector<T>: DataTemplateSelector
{
	public RenderFragmentDataTemplateSelector(RenderFragment<T> fragment)


	protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
	{
		return _renderer.RenderFragment(fragment((T)item));
	}
}

Any thoughts?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:13 (13 by maintainers)

github_iconTop GitHub Comments

1reaction
Eiloncommented, Dec 15, 2020

Yeah I think what @Dreamescaper is saying is the crux of the problem because Blazor doesn’t expose any binding metadata (to an outside observer such as MBB), whereas in Xamarin.Forms you must provide only metadata.

0reactions
Dreamescapercommented, Apr 2, 2021

If anyone would like to test suggested CollectionView approach until #346 is merged, I’ve published Microsoft.MobileBlazorBindings and Microsoft.MobileBlazorBindings.Core packages (0.6.69-preview-collectionview) to temporary myget source: https://www.myget.org/F/dreamescaper/api/v3/index.json

Read more comments on GitHub >

github_iconTop Results From Across the Web

Supporting Drag and Drop in Collection Views
For data that must be retrieved using an NSItemProvider object, insert a placeholder into the collection view until you are able to retrieve...
Read more >
UICollectionView | Apple Developer Documentation
An object that manages an ordered collection of data items and presents them using customizable layouts.
Read more >
How to make both header and footer in collection view with ...
Click on that object, select the Identity Inspector and change the class of that object to "MyHeaderFooterClass". Step 5: - Support that new ......
Read more >
Xamarin.Forms CollectionView Data
A CollectionView is populated with data by setting its ItemsSource property to any collection that implements IEnumerable.
Read more >
Get started with UICollectionView | by Irem Karaoglu - Medium
Tutorial. 1- Create an Xcode project with Storyboard. 2- Open main.storyboard file and add a UICollectionView component to the canvas.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found