listboxItem的布局

Question

我正在尝试制作一个ListBox，在项目的右侧包含一个字符串，在左侧包含一个字符串。我试过了，但这些字符串相互重叠。

<ListBox Name="ChaptersList" Height="200" Margin="10,10,10,0" VerticalAlignment="Top" SelectionChanged="ChaptersList_SelectionChanged" MouseDoubleClick="ChaptersList_MouseDoubleClick" RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated">
    <ListBox.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </ListBox.RenderTransform>

    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Label Content="{Binding Path=Title}" VerticalAlignment="Center" Margin="5"/>
                <Label Content="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

(我的第一个字符串应该是多行)

Answer 1

您可以对两行使用Grid (其中Height设置为Auto)，并且必须将ScrollViewer.HorizontalScrollBarVisibility="Disabled"属性添加到ListBox中才能实现文本换行。

<ListBox Name="ChaptersList" 
                 Height="250" Margin="10,10,10,0" VerticalAlignment="Top"  RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                 >
            <ListBox.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </ListBox.RenderTransform>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{Binding Path=Title}" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="5"/>
                        <TextBlock Grid.Row="1" Text="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Answer 2

使用StackPanel：

    <ListBox Name="ChaptersList" Height="200" Margin="10,10,10,0" VerticalAlignment="Top" SelectionChanged="ChaptersList_SelectionChanged" MouseDoubleClick="ChaptersList_MouseDoubleClick" RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated">
        <ListBox.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </ListBox.RenderTransform>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                        <Label Content="{Binding Path=Title}" VerticalAlignment="Center" Margin="5"/>
                        <Label Content="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Answer 3

编辑:我找到了一个简单的解决方案:使用表达式混合结束编辑模板。它为你提供了一个调整布局的设计者。