Row Separators

[Christopher]

Hi There,

How do I add row separators to a listview? I have tried to use the following in the listview:

<telerik:RadListView.LayoutDefinition>
<telerikListView:ListViewLinearLayout HorizontalItemSpacing="0" VerticalItemSpacing="3"​ Orientation="Vertical" />
</telerik:RadListView.LayoutDefinition>

The issue with this is that you must have a dark background set on the Listview and every 3rd line separator is slightly larger than the others. How can I get a true separator between rows on Android and IOS with custom cells?

[Pavel R. Pavlov]

Hello Christopher,

I believe that you need to use the style properties exposed by the RadListView control. There are three different styles applied to the items in three different states.  You can try using the following code:

<telerikDataControls:RadListView.SelectedItemStyle>
  <listView:ListViewItemStyle BorderWidth="2" BorderLocation="Bottom" BorderColor="#014F80" BackgroundColor="Transparent" />
</telerikDataControls:RadListView.SelectedItemStyle>
<telerikDataControls:RadListView.ItemStyle>
  <listView:ListViewItemStyle BorderWidth="2" BorderLocation="Bottom" BorderColor="Transparent" BackgroundColor="Transparent" />
</telerikDataControls:RadListView.ItemStyle>
<telerikDataControls:RadListView.PressedItemStyle>
  <listView:ListViewItemStyle BorderWidth="2" BorderLocation="Bottom" BorderColor="Transparent" BackgroundColor="Transparent" />
</telerikDataControls:RadListView.PressedItemStyle>

Where the listView namespace is defined like this:

xmlns:listView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"

I hope this information will fit your scenario. Do not hesitate to contact us again if you need any further information.

Regards,
Pavel R. Pavlov
Telerik

[Christopher]

Hi Pavel,

Thanks for your reply. I have implemented the lines but they don't appear at the bottom of the row. They seem to cut the row in half.

 

<ListView
    x:Name="lstInbox">
  <telerik:RadListView.ItemStyle>
    <telerikListView:ListViewItemStyle
      BorderWidth="2"
      BorderLocation="Bottom"
      BorderColor="#dfdfdf"
      BackgroundColor="Transparent" />
  </telerik:RadListView.ItemStyle>
  <telerik:RadListView.SelectedItemStyle>
    <telerikListView:ListViewItemStyle
      BorderWidth="2"
      BorderLocation="Bottom"
      BorderColor="#dfdfdf"
      BackgroundColor="#dfdfdf" />
  </telerik:RadListView.SelectedItemStyle>
  <telerik:RadListView.PressedItemStyle>
    <telerikListView:ListViewItemStyle
      BorderWidth="2"
      BorderLocation="Bottom"
      BorderColor="#dfdfdf"
      BackgroundColor="#dfdfdf" />
  </telerik:RadListView.PressedItemStyle>
  <telerik:RadListView.ItemTemplate>
    <DataTemplate>
      <telerikListView:ListViewTemplateCell>
        <telerikListView:ListViewTemplateCell.View>
          <Grid
              ColumnSpacing="0">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="0" />
              <ColumnDefinition Width="13*" />
              <ColumnDefinition Width="7*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <ContentView
                Grid.Row="0"
                Grid.Column="0"
                Grid.RowSpan="2"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand"
                BackgroundColor="{Binding TypeColor}">
            </ContentView>
            <ContentView
              Grid.Row="0"
              Grid.Column="1"
              Padding="6,6,6,0"
              HorizontalOptions="Fill"
              VerticalOptions="Center">
              <Label
                Text="{Binding Title}"
                TextColor="{Binding Source={x:Static resources:ResourcesManager.ColorResources}, Path=InboxItemPageTextColor}"
                FontSize="{Binding Source={x:Static resources:ResourcesManager.SizeResources}, Path=InboxPageTitleTextSize}"
                FontAttributes="Bold"
                LineBreakMode="TailTruncation" />
              </ContentView>
            <ContentView
              Grid.Row="0"
              Grid.Column="2"
              Padding="6,6,6,0"
              HorizontalOptions="Fill"
              VerticalOptions="Center">
            <Label
              XAlign="End"
              YAlign="Center"
              Text="{Binding MessageDate}"
              TextColor="{Binding Source={x:Static resources:ResourcesManager.ColorResources}, Path=InboxItemPageDateTextColor}"
              FontSize="{Binding Source={x:Static resources:ResourcesManager.SizeResources}, Path=InboxPageDateTextSize}"/>
            </ContentView>
            <ContentView
              Grid.Row="1"
              Grid.Column="1"
              Grid.ColumnSpan="2"
              VerticalOptions="Fill"
              HorizontalOptions="Fill"
              Padding="6,0,6,6">
              <controls:ExtendedLabel
                Text="{Binding Message}"
                TextColor="{Binding Source={x:Static resources:ResourcesManager.ColorResources}, Path=InboxItemPageTextColor}"
                FontSize="{Binding Source={x:Static resources:ResourcesManager.SizeResources}, Path=InboxPageDetailTextSize}"
                NumberOfLines="2"/>
            </ContentView>
          </Grid>
        </telerikListView:ListViewTemplateCell.View >
      </telerikListView:ListViewTemplateCell>
    </DataTemplate>
  </telerik:RadListView.ItemTemplate>
</controls:AgDNA_ListView>

[Pavel R. Pavlov]

Hello Christopher,

I am confused a little. The firs line of the provided code suggests that you are not using the RadListView component of the UI for Xamarin suite. The last row also suggests the same and this makes me think that your application does not utilize our UI component(s). 

I also notice that the ItemTemplate set to that ListView is pretty heavy. I suggest simplifying it for debugging purposes. Also I can see there is a column defined with width set to 0. I cannot understand what its purpose is. Since you are the first one reporting issue regarding the different styles of the RadListView (suggesting you are using our UI component) I would ask you to simplify and debug the ItemTemplate. Make sure every binding and layout option property are correctly set and applied.

Regards,
Pavel R. Pavlov
Telerik