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.

score 3 · Answer 1 · answered Aug 01 '13 at 15:05

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>

score 0 · Answer 2 · answered Apr 24 '13 at 16:07

You could always try putting the checkbox and textblock inside a StackPanel together. From that point you can adjust alignment of the checkbox.

Try something like this:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
       <CheckBox VerticalAlignment="Top" IsChecked="{Binding Selected}" />
       <TextBlock Text="{Binding DisplayName}" FontSize="40"/>
</StackPanel>

LongListMultiSelector Aligning CheckBox with list item

2 Answers2