Listbox Data Template Text Overflow

Question

I am working on a data template for a list box. One of the data bound fields contains a long description and I don't know how to make sure that the text just wraps at the edge of the list box item. This is my xaml code...

<ListBox x:Name="lstTest" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <StackPanel Orientation="Vertical">
                    <Label Content="{Binding Path=Name}"></Label>
                    <TextBlock TextWrapping="Wrap"  Text="{Binding Path=Description}"></TextBlock>
                </StackPanel>
                <DockPanel LastChildFill="True">
                    <Label Content="{Binding Path=AuctionDate}"></Label>
                </DockPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Sample Item...

new AuctionItem
{
    RecordId = 1,
    Name = "Auction G",
    Description = "Morbi eu nisl sed magna vestibulum ultrices quis eu enim. Nunc semper libero at tellus tincidunt eu elementum turpis rhoncus. Mauris condimentum semper pulvinar. Integer vel ante ipsum, at pulvinar sapien. Donec vestibulum ultricies dui sed viverra. Sed a augue diam, et mollis libero. Phasellus eget rutrum nibh.",
    AuctionDate = DateTime.Now
}

What I am asking is this even the correct structure for what I am trying to achieve? I would like the date to be on the right side of the item. I would like the name to be at the top left and bellow the name I would like the description. I can make the description fixed size but I would like the listbox items to resize with the listbox correctly.

I would appreciate any help you can provide with this...

Thank You!

score 2 · Accepted Answer · edited Jul 20 '22 at 13:45

Your problem is with the StackPanel.

Remove it and replace it with a grid. It's been the source of grief for myself as well.

I did something like to this to mimic your situation and it works for me:

<Grid>
    <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
       <ListBox.ItemTemplate>
          <DataTemplate>
             <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding RecordID}" />
                <TextBlock Grid.Column="1" Text="{Binding Description}" TextWrapping="Wrap" />
                <TextBlock Grid.Colunm="2" Text="{Binding AuctionDate}" />
             </Grid>
          </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
<Grid>

See this answer. And this answer as well.

Good luck!

score 1 · Answer 2 · answered Jan 30 '12 at 22:16

1

You already have your textwrapping set so all that's left is a MaxWidth set so a quick;

MaxWidth="Numeric Value" should do it or a MaxWidth="{Binding YourTextBoxBlockName, Path=ActualWidth}"

if you want to get fancy with it and you should be golden. Hope this helps and best of luck!

answered Jan 30 '12 at 22:16

Chris W.

22,835
3
60
94

I need the TextBlock to re-size with with the ListBox... If I set a MaxWidth and the form gets maximized the contents will be too narrow. I tried this but it doesn't work MaxWidth={Binding Width, ElementName=lstTest}... – Lukasz Jan 31 '12 at 14:25
How about MaxWidth="{Binding ElementName=IstTest,Path=ActualWidth}" ? – Chris W. Jan 31 '12 at 17:42
That sort of works, it does make the TextBlock the width of the listbox but it pushes the AuctionDate field off so its no longer visible. Also when I maximize the window it works correctly but when I shrink the window it does not resize the item until I try to scroll? It seems like a workaround to me rather then a solution... But thank you for the help! – Lukasz Feb 01 '12 at 14:47

Listbox Data Template Text Overflow

2 Answers2