TextBlock dans ListViewItem n'enveloppez

Question

Actuellement dans mon application UWP J'ai un ListViewItem personnalisé à utiliser comme modèle pour un message reçu par un service:

<ListViewItem 
x:Class="App.Controls.MessageItem" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
...> 

<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"> 
    <Image Margin="5" VerticalAlignment="Top" Name="Picture" /> 
    <StackPanel VerticalAlignment="Center"> 
     <TextBlock Name="Foo" FontWeight="Bold" /> 
     <TextBlock Name="Bar" TextWrapping="Wrap" /> 
     <StackPanel Name="Things" /> 
    </StackPanel> 
</StackPanel> 

Lorsque des données vient de la service, j'appelle:

MessageList.Items.Add(new MessageItem(message)); 

(. où le constructeur remplit automatiquement Foo et Bar avec les données du message)

Toutefois, le texte dans le MessageItem ne s'enroule pas et est simplement tronqué, même si TextWrapping sur Bar est défini sur TextWrapping.Wrap.

Emballage ne fonctionne pas:

Sur un autre ListView où je me sers MessageItem, une barre de défilement horizontale apparaît (mais pas sur le MessageItems ListView). Je voudrais voir l'emballage travail, car il est assez intégré (car les messages peuvent être très longs).

Merci!

Answer 1

Le premier paramètre d'orientation de Horizontal permet à votre TextBlock de s'étendre à l'infini. Je suggère de le changer en

ListView Name="MyContainer"> 
<ListViewItem> 
    <Grid HorizontalAlignment="Stretch" > 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="auto"/> 
      <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
     <Image Margin="5" VerticalAlignment="Top" Name="Picture" /> 
     <StackPanel VerticalAlignment="Stretch" Grid.Column="1"> 
      <TextBlock Name="Foo" FontWeight="Bold" HorizontalAlignment="Left"/> 
      <TextBlock Name="Bar" TextWrapping="Wrap" HorizontalAlignment="Left"/> 
      <StackPanel Name="Things" /> 
     </StackPanel> 
    </StackPanel> 
</ListViewItem> 
</ListView> 

Answer 2

La raison pour laquelle cela se produit est que la largeur du TextBlock n'est limitée par rien. Le moyen le plus simple que je peux penser de la fixer est de limiter la largeur du StackPanel qui contient le TextBlock à la largeur du ListView.

Par exemple:

<ListView Name="MyContainer"> 
    <ListViewItem> 
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" > 
      <Image Margin="5" VerticalAlignment="Top" Name="Picture" /> 
      <StackPanel VerticalAlignment="Center" Width="{Binding ElementName=MyContainer, Path=ActualWidth}"> 
       <TextBlock Name="Foo" FontWeight="Bold"/> 
       <TextBlock Name="Bar" TextWrapping="Wrap" /> 
       <StackPanel Name="Things" /> 
      </StackPanel> 
     </StackPanel> 
    </ListViewItem> 
</ListView> 

Notez que j'ai nommé ListView et que je suis lié à la largeur de la StackPanel à elle.