CODEWITHSUNDEEP
wpflistview
Aaron C
Aaron C

Reputation: 3313

How do I wrap content in a WPF ListView?

I have a very simple WPF ListView that I'm using to list blocks of text. I'd like it to scroll vertically, but the text should wrap so that there is no horizontal scroll. All the examples I've seen are overly convoluted DataGridView nesting solutions. This seems like such a simple use-case, however. Here is my current code:

<ListView  
        Height="Auto"
        Width="Auto"
        Margin="0"
        Name="mLogListView" 
        FontWeight="Bold"
        FontSize="16"
        SelectionMode="Single"
        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
        HorizontalContentAlignment="Stretch"/>

I've tried setting the ScrollViewer.HorizontalScrollBarVisibility and HorizontalContentAlignment properties but the text simply runs off the end of the control and doesn't wrap.

Each item is added to the ListView.Items collection and is a ListViewItem object. The text is set to the item's Content property.

Here is the code responsible for adding text times to the list:

ListViewItem item = new ListViewItem();            
item.Content = "Item text is set here, but refuses to wrap in list view!";
mLogListView.Items.Add(item);

Thank you.

Upvotes: 9

Views: 23810

Answers (2)

peter70
peter70

Reputation: 1123

I wanted to view images in a ListView, it displays by default only one column. To prevent this, you can insert the following code:

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Margin="0" />
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

Now displays ListView, instead of one column, just one line :-( To prevent this, you can insert this line of code:

ScrollViewer.HorizontalScrollBarVisibility="Disabled"

So it could look something like this:

<ListView ItemsSource="{Binding YourItemsSource...}"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border ... and so on ...

I hope, it can help someone ;-)

Upvotes: 6

Klaus78
Klaus78

Reputation: 11926

This should be what you need 

<ListView Margin="12,23,309,191"
        Name="mLogListView" 
        FontWeight="Bold"
        FontSize="16"
        SelectionMode="Single"
        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
        HorizontalContentAlignment="Stretch" >
<!-- here set the itemTemplate to a TextBlock that can wraps-->
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Path=.}" TextWrapping="Wrap"></TextBlock>
            </DataTemplate>
        </ListView.ItemTemplate>
</ListView>

Note the syntax Text="{Binding Path=.}" that is equivalent to Text="{Binding}". This is called empty binding syntax.

In this case Text is bound to the entire ListViewItem object. The empty binding syntax is useful when you want to bind to the entire object item instead of just to single property of the item.

This is convenient for the example because the source object (the ListViewItem) is of type string and you simply want to bind to the string itself.

For more information see msdn at section Specifying the Path to the Value

Upvotes: 22

Related Questions