Geek asks and answers

LongListMultiSelector Aligning a CheckBox with a List Item

I have a LongListMultiSelector with list items of a larger font size. Due to this font change, I realized that the checkbox always does not match the actual list item. I tried to change the horizontal and vertical alignment at each level, and also adjusted the indentation and margin values. They change the text block inside the list item, but the flag is at the root point at the top, and this leads to a distortion of the view in the list.

In any case, so that the flags are centered vertically or control their addition? I understood there a recent list-style margin post , however, it seemed like it was uninteresting, without any direct contributions to my problem.

+5
source share
2 answers

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

Hope this helps 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>
+3
source

You can always try to check the box and text block inside the StackPanel together. From now on, you can adjust the 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>
0
source

More articles:


All Articles