layout of listboxItem

Question

J'essaie de créer un ListBox qui contient une chaîne à droite de Item et une autre à gauche que j'ai essayé, mais ces chaînes se superposent.

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

(ma première chaîne doit être multiligne)

Answer 1

Vous pouvez utiliser Grid avec deux lignes (où Height est-il réglé à Auto) et texte comportement enveloppant vous doit ajouter ScrollViewer.HorizontalScrollBarVisibility="Disabled" propriété à 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

Utilisation 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

EDIT: J'ai trouvé une solution facile: en utilisant Expression Blend end edit Template. il vous donne un concepteur pour ajuster les dispositions.