LongListMultiSelector Aligning CheckBox with list item

Question

I have a LongListMultiSelector with list items of a larger font-size. Due to this font change, I realized the check-box is always out of alignment to the actual list item. I've tried changing the horizontal and vertical alignment at every level and also adjusted padding and margin values. These change the text-block inside the list item but the check-box stays rooted to the top, and it gives a distorted look to the list.

Is there anyway to have the check-boxes centered vertically or manage its padding? I realized there recent post about margins to the list style, however it seemed rather involved without any straight input to my problem.

Answer 1

I found the solution. You can change margin for grid in datatemplate like this Margin="0,-15,0,22" - in my case top edge of checkbox will be parallel to the top edge of the text.

Hope it will help you.

<toolkit:LongListMultiSelector x:Name="SelectedPlayListLLS" ItemsSource="{Binding PlayListTracsObservationCollection}" LayoutMode="List" toolkit:TiltEffect.IsTiltEnabled="True">               <toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Grid Background="Transparent" Margin="0,-15,0,22">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="36" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Image  x:Name="image" 
            Width="36" 
            Height="36" 
            Source="{Binding Image}" VerticalAlignment="Top" Margin="0,15,0,0"/>
    <StackPanel Grid.Column="1">
        <TextBlock Text="{Binding Title}" 
            TextTrimming="WordEllipsis"
            Margin="12,0,0,0"/>
        <TextBlock Text="{Binding Name}"  
            TextTrimming="WordEllipsis" 
            Margin="12,0,0,0" Foreground="#99FFFFFF"/>
    </StackPanel>
    </Grid>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>   
</toolkit:LongListMultiSelector>