layout of listboxItem

Question

i am trying to make a ListBox that contains a string at right side of Item and one in left side i've tried this but those string become over each other.

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

(my first string should be multiline)

Answer 1

You can use Grid with two rows (where Height is set to Auto) and to text wrapping behaviour you must add ScrollViewer.HorizontalScrollBarVisibility="Disabled" property to 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>