This is a migrated thread and some comments may be shown as answers.

Row Separators

3 Answers 139 Views
This is a migrated thread and some comments may be shown as answers.
Christopher
Top achievements
Rank 2
Christopher asked on 15 Oct 2015, 02:17 AM

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?

3 Answers, 1 is accepted

Sort by
0
Pavel R. Pavlov
Telerik team
answered on 19 Oct 2015, 06:55 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Christopher
Top achievements
Rank 2
answered on 26 Oct 2015, 09:58 PM

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>

0
Pavel R. Pavlov
Telerik team
answered on 29 Oct 2015, 08:25 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Christopher
Top achievements
Rank 2
Answers by
Pavel R. Pavlov
Telerik team
Christopher
Top achievements
Rank 2
Share this question
or