Space between items in LongListMultiSelector - xaml

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 below will have that margin covered by rectangle.
<toolkit:LongListMultiSelector ItemsSource="{Binding Items}">
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="Some Text" Margin="0,0,0,50" />
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
Picture that displayes how it behaves when I try to select an item. (pay attention to blue rectangle)
Here is an example of a standard Mail app where items have some space but selection rectangle does not cover it. (this is what I want)

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(' ');
<Toolkit:LongListMultiSelector ItemsSource="{Binding}">
<Toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</Toolkit:LongListMultiSelector.ItemTemplate>
</Toolkit:LongListMultiSelector>
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 <Setter /> 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.
<Style x:Key="LongListMultiSelectorItemGridStyle" TargetType="controls:LongListMultiSelectorItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:LongListMultiSelectorItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectionTriangle">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectionCheck">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="HasSelectionStates">
<VisualState x:Name="Opened">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectionRectangle">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="OuterCover">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Closed"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="1" >
<ContentControl x:Name="ContentContainer"
Margin="3"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
/>
<Rectangle x:Name="SelectionRectangle" Visibility="Collapsed"
Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="2"/>
<Polyline x:Name="SelectionTriangle" Visibility="Collapsed"
HorizontalAlignment="Right" VerticalAlignment="Top"
Points="50,0 50,50 0,0"
Fill="{StaticResource PhoneAccentBrush}"
/>
<Polyline x:Name="SelectionCheck" Visibility="Collapsed"
Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top"
Points="40,0 43,3 28,18 18,8 21,5 28,12"
Fill="{StaticResource PhoneForegroundBrush}"
/>
<Grid x:Name="OuterCover" IsHitTestVisible="True" Visibility="Collapsed" Background="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LongListMultiSelectorItemListStyle" TargetType="controls:LongListMultiSelectorItem">
<Style.Setters>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:LongListMultiSelectorItem">
<Grid MinHeight="52">
<Grid.Resources>
<ExponentialEase EasingMode="EaseIn" Exponent="8" x:Key="ExponentialEaseIn"/>
<QuadraticEase EasingMode="EaseOut" x:Key="QuadraticEaseOut"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionEnabledStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="ClosedToExposed"
From="Closed" To="Exposed"
GeneratedDuration="0:0:0.30">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="1.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ExposedToClosed"
From="Exposed" To="Closed"
GeneratedDuration="0:0:0.30">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="0.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ExposedToOpened"
From="Exposed" To="Opened"
GeneratedDuration="0:0:0.30">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-58" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="24" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="86" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.30" Value="0.0" EasingFunction="{StaticResource QuadraticEaseOut}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="OuterHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="InnerHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ClosedToOpened"
From="Closed" To="Opened"
GeneratedDuration="0:0:0.15">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-58" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="24" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="86" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="OuterHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="InnerHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="OpenedToClosed"
From="Opened" To="Closed"
GeneratedDuration="0:0:0.15">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="-58" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="86" EasingFunction="{StaticResource ExponentialEaseIn}"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="24" EasingFunction="{StaticResource ExponentialEaseIn}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0.15" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualStateGroup.States>
<VisualState x:Name="Closed"/>
<VisualState x:Name="Exposed">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel"
Duration="0" To="1.0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Opened">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="SelectBox"
Duration="0" To="0"/>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="Presenter"
Duration="0" To="86"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectBox">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="OuterCover">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OuterHintPanel"
Duration="0" To="0.0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="OuterHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)"
Storyboard.TargetName="InnerHintPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup.States>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Stretch" primitives:ClipToBounds.IsEnabled="True">
<ContentPresenter x:Name="Presenter">
<ContentPresenter.RenderTransform>
<CompositeTransform TranslateX="24"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
<Rectangle x:Name="InnerHintPanel" Grid.Column="0" Width="24"
Height="{TemplateBinding HintPanelHeight}"
HorizontalAlignment="Left"
Fill="Transparent"
StrokeThickness="0">
<Rectangle.RenderTransform>
<CompositeTransform TranslateX="24"/>
</Rectangle.RenderTransform>
</Rectangle>
<ContentControl x:Name="InfoPresenter" Grid.Column="1"
VerticalAlignment="Top"
Content="{TemplateBinding ContentInfo}"
ContentTemplate="{TemplateBinding ContentInfoTemplate}"/>
</Grid>
<Rectangle x:Name="OuterHintPanel" Width="24"
HorizontalAlignment="Left"
Height="{TemplateBinding HintPanelHeight}"
Fill="{TemplateBinding Background}"
StrokeThickness="0" Opacity="0.0"/>
<Grid x:Name="OuterCover" IsHitTestVisible="True"
Visibility="Collapsed" Background="Transparent"/>
<Canvas HorizontalAlignment="Left">
<CheckBox x:Name="SelectBox" VerticalAlignment="Top" Margin="12,-20,5,0" Visibility="Collapsed"
IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}">
<CheckBox.RenderTransform>
<CompositeTransform TranslateX="-58"/>
</CheckBox.RenderTransform>
</CheckBox>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
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.

Answer 2

I had the same error with Primitives. To fix it I added this reference:
xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit"