CODEWITHSUNDEEP
windows-phone-8silverlight-toolkit
Poken1151
Poken1151

Reputation: 580

LongListMultiSelector Aligning CheckBox with list item

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.

Upvotes: 5

Views: 1083

Answers (2)

Nosov Pavel
Nosov Pavel

Reputation: 1571

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>

Upvotes: 3

Strifex
Strifex

Reputation: 862

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>

Upvotes: 0

Related Questions