LongListMultiSelector Allineamento di CheckBox alla voce di elenco

Question

Possiedo un LongListMultiSelector con voci di elenco di dimensioni carattere maggiori. A causa di questo cambio di caratteri, mi sono reso conto che la casella di controllo è sempre fuori allineamento alla voce dell'elenco reale. Ho provato a cambiare l'allineamento orizzontale e verticale ad ogni livello e ho anche aggiustato i valori di padding e margin. Questi cambiano il blocco di testo all'interno dell'elemento dell'elenco, ma la casella di controllo rimane radicata nella parte superiore e dà un aspetto distorto all'elenco.

Esiste comunque la possibilità di avere le caselle di controllo centrate verticalmente o gestirne l'imbottitura? Mi sono reso conto che c'era lo recent post sui margini per lo stile della lista, tuttavia sembrava piuttosto coinvolto senza alcun input diretto al mio problema.

Answer 1

Si può sempre provare a mettere insieme la casella di controllo e il blocco di testo all'interno di uno StackPanel. Da quel punto puoi regolare l'allineamento della casella di controllo.

provare qualcosa di simile:

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

Answer 2

ho trovato la soluzione. È possibile modificare il margine per la griglia nel datatemplate come questo Margine = "0, -15,0,22" - nel mio caso il bordo superiore della casella di controllo sarà parallelo al bordo superiore del testo.

Spero che ti possa aiutare.

<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>