Space between items in LongListMultiSelector

Question

In my LongListMultiSelector, how can I set a vertical space between items such that it will not be covered by selection rectangle? Just adding a Margin like in XAML

Answer 1

This is a very important question on a fundamental XAML concept: ItemsControl databinding. All ItemsControls in C# have the ability to take data classes (known as "Items") and convert them to visual UIElements (known as "Containers"). For example ListBox can take Items from its ItemSource, create new ListBoxItems and set each item as the DataContext for its container. That's basically how databinding works for all ItemsControls.

Why is that interesting? Because LongListMultiSelector is yet another ItemsControl and it generates LongListMultiSelectorItems. Both in the case of ListBoxItem and LongListMultiSelectorItem the instantiated DataTemplate is nested inside the ItemTemplate which is only a part of the Container. However you can't control the properties of the container from inside the DataTemplate. Which is why nothing you're doing here seems to work.

The solution: change properties on the Containers themselves using the ItemContainerStyle.

1) Open up blend in a project that has the following C# and XAML code:

this.DataContext = "foo bar baz".Split(' ');

2) Select the LongListMultiSelector. On the top menu choose "Object --> Edit Additional Style --> Edit ItemContainerSyle --> Create Empty" and hit "OK".

3) Since LongListMultiSelectorItem changes its ItemContainerStyle between Grid and List you'll need to manually replace all the elements in your style with all the setters in one of the following styles. For example I copied over all the setters from LongListMultiSelectorItemListStyle into my new LongListMultiSelectorItemStyle1.

4) make sure to fix XMLNS references like toolkit and primitives.

5) Now you can edit the style. From the top menu go to "Object --> Edit Additional Styles --> Edit ItemContainerStyle --> Edit current".

6) Set the ItemContainerStyle Margin from "0" to "0, 0, 50, 0".

When we run our LongListMultiSelector with the modified ItemContainerStyle we can see the following space between items:

It's important to remember that ItemContainerStyle is a very powerful weapon in our arsenal. We can use ItemContainerStyle to edit containers' style and even their templates.