Row Separators

4 posts, 0 answers
  1. Christopher
    Christopher avatar
    7 posts
    Member since:
    Sep 2014

    Posted 14 Oct 2015 Link to this post

    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?

  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1183 posts

    Posted 19 Oct 2015 Link to this post

    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
  3. DevCraft banner
  4. Christopher
    Christopher avatar
    7 posts
    Member since:
    Sep 2014

    Posted 26 Oct 2015 in reply to Pavel R. Pavlov Link to this post

    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>

  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1183 posts

    Posted 29 Oct 2015 Link to this post

    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
Back to Top
DevCraft banner