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

HorizontalItemSpacing not working as expected

1 Answer 92 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 16 Jan 2019, 12:37 PM

This is a screenshot of my ListView:

https://www.dropbox.com/s/zlqfr3tociidfix/RadListViewSpacing.png?dl=0

This is using a ListViewLinearLayout with Orientation=Horizontal and HorizontalItemSpacing=6.  I am using Telerik.UI.for.Xamarin v2018.3.1122.3 and this is in UWP (I have not tested iOS or Android yet).

There are a few problems here:  

Firstly the spacing is double what it should be.  It's easiest to see on the central selected item.  Here there is 3 pixels of grey, then 6 pixels of white and the 3 more pixels of grey for 12 pixels of spacing.  Note that if I change HorizontalItemSpacing both the grey and white sections scale with it (if I set it to 0, there is no gap at all between the items).  There is also clearly spacing on the left of the leftmost item.  I guess the spacing is being applied on each side of each item.  This is different to how spacing works on any of the standard Xamarin.Forms controls (it applies between items only, not that the beginning and end) so is highly unintuitive.  It also means you cannot line anything up with the left of the ListView and having spacing between items which is highly annoying.

The second issue is the grey sections.  I assume this comes from ItemStyle.BackgroundColor but in this case you can see that the SelectedItemStyle.BackgroundColor (the blue bit) does not cover the same space.  These are the 2 styles I'm using for ItemStyle and SelectedItemStyle:

<listView:ListViewItemStyle x:Key="TileItemStyle"
    BorderLocation="Left"
    BorderWidth="2"
    BorderColor="{StaticResource AppIndigo}"
    BackgroundColor="{StaticResource AppGrey}"/>
<listView:ListViewItemStyle x:Key="SelectedTileItemStyle"
    BorderLocation="None"
    BorderWidth="0"
    BackgroundColor="{StaticResource AppBlue}"/>

(note the reason the left border is still present on the selected item in the screenshot is that it's present in the ItemTemplate too and I forgot to remove it!).

 

I'm really just trying to get a handle on what behaviour is intended,what, if anything, is a bug, and if there are any workarounds to these issues?

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 17 Jan 2019, 11:13 AM
Hi Rob,

Thank you for the provided image.

I have tested the described scenario and I reproduce the issue with the RadListView item spacing on UWP. It seems that the ItemSpacing is not respected correctly when layout is used. I have logged an issue on your behalf in our Feedback portal and you could follow the item on the provided link below: 

https://feedback.telerik.com/xamarin/1383515-listview-uwp-itemspacing-is-not-respected-correctly 

Currently, I could not suggest any suitable workaround on this. Please find your Telerik point updated for this report. 

Let me know if you have any additional questions or concerns.

Regards,
Didi
Progress 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
Tags
ListView
Asked by
Rob
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or