Custom Cell

[Martin]

Hi

Can you please provide a sample of how to implement a custom cell in RadListView? Along the lines of https://developer.xamarin.com/guides/cross-platform/xamarin-forms/user-interface/listview/customizing-cell-appearance/#Custom_Cells

Thanks

Martin

[Martin]

OK I think I have found the solution in ItemSpacing.xaml of the SDKBrowser solution: telerikDataControls:RadListView.ItemTemplate

I have tried to implement this in my own project, but I get the following error:

Argument cannot be null.
Parameter name: obj

Can I send you the code?

[Ves]

Hi Martin,

Please, do send us the code. You can simply paste the relevant portion of XAML here, or if you think it's more complicated and we would need the entire project, you can open a formal support ticket, where you can attach it. In addition, the support ticket is private, so nobody else will be able to see your code.

Best regards,
Ves
Telerik

[Martin]

Hi

This is the code that uses a DataTemplate:

 ```
<?xml version="1.0" encoding="UTF-8"?>
<toolkit:BaseView xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
xmlns:local="clr-namespace:Proto;assembly=Proto"
xmlns:toolkit="clr-namespace:XLabs.Forms.Mvvm;assembly=XLabs.Forms"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
x:Class="Proto.RadFeedPage">
<toolkit:BaseView.Content>
<telerikDataControls:RadListView x:Name="feedListView" ItemsSource="{Binding Feed}" BackgroundColor="#55FFFFFF">
     <telerikDataControls:RadListView.ItemTemplate>
       <DataTemplate>
         <local:RadPostViewCell></local:RadPostViewCell>
       </DataTemplate>
     </telerikDataControls:RadListView.ItemTemplate>
     <telerikDataControls:RadListView.LayoutDefinition>
       <telerikListView:ListViewGridLayout HorizontalItemSpacing="10" VerticalItemSpacing="10">
         <telerikListView:ListViewGridLayout.ItemLength>
           <OnPlatform x:TypeArguments="x:Double" iOS="70" Android="90" WinPhone="-1" />
         </telerikListView:ListViewGridLayout.ItemLength>
       </telerikListView:ListViewGridLayout>
     </telerikDataControls:RadListView.LayoutDefinition>
   </telerikDataControls:RadListView>
</toolkit:BaseView.Content>
</toolkit:BaseView>
```

And this is the cell:

```
<?xml version="1.0" encoding="UTF-8"?>
<telerikListView:ListViewTemplateCell xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
xmlns:local="clr-namespace:Proto;assembly=Proto"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
x:Class="Proto.RadPostViewCell">
<telerikListView:ListViewTemplateCell.BindingContext>
    <local:PostViewModel/>
  </telerikListView:ListViewTemplateCell.BindingContext>
<telerikListView:ListViewTemplateCell.View>
<StackLayout Orientation="Horizontal" BackgroundColor="White" Padding="10" Spacing="20">
        <Image Source="{Binding ImageSource}" />
            <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                <Label Text="{Binding Title}" FontSize="Medium" TextColor="#34495e"/>
                <Label Text="{Binding Detail}" FontSize="Small" TextColor="#000000"/>
            </StackLayout>
        </StackLayout>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
```

 

[Ves]

Hi Martin,

I can confirm that I also experienced issues when trying to use xaml from another file. This does not seem to be directly caused  by RadListView, as the same issue appears when trying to customize regular xamarin forms ListView cell in the same manner. Luckily, the workaround is simple -- put the custom cell xaml inline and it will work as expected.

Note, that the issue of not recognizing a type in xaml would still appear for the BindingContext. However, you should actually remove the BindingContext from the template. It is not needed, as the binding context of each cell would be the corresponding object from the ItemsSource:

<telerikDataControls:RadListView x:Name="feedListView" ItemsSource="{Binding}" BackgroundColor="#55FFFFFF">
    <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
            <telerikListView:ListViewTemplateCell >
                <telerikListView:ListViewTemplateCell.View>
                    <StackLayout Orientation="Horizontal" BackgroundColor="White" Padding="10" Spacing="20">
                        <Image Source="{Binding ImageSource}" />
                        <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                            <Label Text="{Binding Title}" FontSize="Medium" TextColor="#34495e"/>
                            <Label Text="{Binding Detail}" FontSize="Small" TextColor="#000000"/>
                        </StackLayout>
                    </StackLayout>
                </telerikListView:ListViewTemplateCell.View>
            </telerikListView:ListViewTemplateCell>
        </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>

Best regards,
Ves
Telerik

[Martin]

Hi

 

Am still getting this error, using the following code:

   

var commentsListView = new RadListView {
    ItemTemplate = new DataTemplate (() => {
        var commentLabel = new Label ();
        titleLabel.SetBinding<PostItemCommentViewModel> (Label.TextProperty, vm => vm.OwnerFullName);

        return new ViewCell {
            View = new StackLayout {
                Padding = new Thickness (0, 5),
                Orientation = StackOrientation.Horizontal,
                Children = {
                    commentLabel
                }
            }
        };
    })
};

commentsListView.SetBinding<T> (RadListView.ItemsSourceProperty, vm => vm.PostItemViewModel.Comments, BindingMode.OneWay);

 

Please note: I am using Telerik.UI for Xamarin Q2 2015; is this perhaps fixed in Q3?

[Ves]

Hi Martin,

When using Telerik RadListView, the DataTemplate should contain Telerik.XamarinForms.DataControls.ListView.ListViewTemplateCell. Your code uses Xamarin.Forms.ViewCell. Please use it like this:

var commentsListView = new RadListView {
    ItemTemplate = new DataTemplate (() => {
        var commentLabel = new Label ();
        titleLabel.SetBinding<PostItemCommentViewModel> (Label.TextProperty, vm => vm.OwnerFullName);

        return new Telerik.XamarinForms.DataControls.ListView.ListViewTemplateCell {
            View = new StackLayout {
                Padding = new Thickness (0, 5),
                Orientation = StackOrientation.Horizontal,
                Children = {
                    commentLabel
                }
            }
        };
    })
};

You can find an example in SDKBrowser solution, distributed with the suite. You can find it in this folder:

%PROGRAMFILES(x86)%\Telerik\UI for Xamarin Q3 2015\Examples\XamarinForms

Best regards,
Ves
Telerik