LongListMultiSelector 将复选框与列表项对齐答案

【问题标题】：LongListMultiSelector Aligning CheckBox with list itemLongListMultiSelector 将复选框与列表项对齐
【发布时间】：2013-02-25 20:33:58
【问题描述】：

我有一个带有较大字体大小的列表项的 LongListMultiSelector。由于这种字体更改，我意识到复选框总是与实际列表项不对齐。我尝试在每个级别更改水平和垂直对齐方式，并调整填充和边距值。这些更改了列表项内的文本块，但复选框保持在顶部，并且它使列表看起来扭曲。

是否有让复选框垂直居中或管理其填充？我在recent post 那里意识到列表样式的边距，但是它似乎相当复杂，没有任何直接输入我的问题。

【问题讨论】：

标签： windows-phone-8 silverlight-toolkit

【解决方案1】：

我找到了解决方案。您可以像这样在数据模板中更改网格的边距 Margin="0,-15,0,22" - 在我的情况下，复选框的顶部边缘将平行于文本的顶部边缘。

希望对您有所帮助。

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

【讨论】：

【解决方案2】：

您总是可以尝试将复选框和文本块放在 StackPanel 中。从那时起，您可以调整复选框的对齐方式。

试试这样的：

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

【讨论】：