listboxItem의 레이아웃

Question

ListBox은 Item의 오른쪽에 문자열을 포함하고 왼쪽에는 하나를 시도했지만이 문자열은 서로 위에있게됩니다.

<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

당신은 (Height이 Auto로 설정) 및 포장 행동을 텍스트로 두 행 Grid을 사용할 수 있습니다 에 ScrollViewer.HorizontalScrollBarVisibility="Disabled" 속성을 추가해야합니다.

<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

편집 : Expression Blend 최종 편집 템플릿을 사용하여 쉽게 해결책을 발견했습니다. 레이아웃을 조정할 디자이너를 제공합니다.