CODEWITHSUNDEEP
c#xamluwp
Reflectron
Reflectron

Reputation: 3

TextBlock in ListViewItem won't wrap

Currently in my UWP app I have a custom ListViewItem to use as a template for a message received by a 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>

When data comes in from the service, I call:

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

(where the constructor automatically fills in Foo and Bar with the data from the message.)

However, the text in the MessageItem does not wrap and just gets cut off, even though TextWrapping on Bar is set to TextWrapping.Wrap .

Wrapping not working :

WrapingNotWorking

On another ListView where I am using MessageItem, a horizontal scrollbar appears (but not on the MessageItems ListView). I'd like to see the wrapping work, since it's pretty integral (as messages can get very long).

Thank you!

Upvotes: 0

Views: 175

Answers (2)

Lindsay
Lindsay

Reputation: 595

Your first StackPanel's orientation setting of Horizontal is allowing your TextBlock to extend infinitely. I would suggest changing it to

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>

Upvotes: 0

DinoM
DinoM

Reputation: 134

The reason that this is happening is that the width of the TextBlock isn't bounded by anything. The easiest way I can think of fixing it is to limit the width of the StackPanel that contains the TextBlock to the width of the ListView.

For example:

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

Note that I've named the ListView and that I've bound the width of the StackPanel to it.

Upvotes: 2

Related Questions