Search code examples
wpfxamlword-wrap

WPF XAML ListView - Make TextBlock Text wrap


I have a ListView with ListView.ItemTemplate like this

<ListView
    x:Name="myList" 
    BorderBrush="Transparent"
    ItemsSource="{Binding MyItems}" 
    SelectedIndex="0"
    ScrollViewer.CanContentScroll="True"
    ScrollViewer.VerticalScrollBarVisibility="Auto">

    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="0" />
        </Style>
    </ListView.ItemContainerStyle>

    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Margin="5,5,5,5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200"/> <--THIS WILL FORCE WRAPPING
                    <ColumnDefinition Width="50"/>
                </Grid.ColumnDefinitions>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <TextBlock Text="{Binding FilePath}" 
                               Grid.Row="0" Margin="3,3,3,3" 
                               Style="{StaticResource MyFilePathTextLabel}" 
                               TextWrapping="WrapWithOverflow"/>   <-- THIS WILL NOT WRAP TEXT
                    <StackPanel Orientation="Horizontal" Grid.Row="1" Margin="3,3,3,3">
                        <TextBlock Text="Lab location: "/>
                        <TextBlock Text="{Binding LabLocation}" 
                                   Style="{StaticResource MyLabLocationTextLabel}"/>
                    </StackPanel>
                    ...
                    ...
        </DataTemplate>
    </ListView.ItemTemplate>
    ...
    ...
</ListView>

This will show ListView items like this:

----------------------------------
C:/samples/folderA/myfile1.txt     <-- NO WRAP AS IT FITS
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/folderA/folderB/fold
erC/folderD/folderE/folderF/myf
ile2.txt                           <-- WRAP SINCE NOT FITTING
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/folderA/folderB/myfi
le3.txt                            <-- WRAP SINCE NOT FITTING
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/folderA/folderB/fold
erC/folderD/folderE/folderF/fol
derG/folderH/folderI/folderJ/fo
lderK/myfile4.txt                  <-- WRAP SINCE NOT FITTING
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/myfile5.txt             <-- NO WRAP AS IT FITS
Lab location: Chemistry Lab 301
----------------------------------

Above, each item show file location as wrapped if it does not fit the width of the ListView.

UPDATE: Updated XAML

UPDATE 2: Setting the column Width of grid container to hardcoded value of will force wrapping (see above commented line). But since form is resizable, the grid and ListView is also resizable. Therefore, I can not hardcode width. It needs to wrap according to the current size of the form.


Solution

  • Set the HorizontalContentAlignement="Stretch" on the ListView object itself to tell it to stretch it's Content horizontally to fit available space, and set the HorizontalScrollBarVisiblilty to Disabled to make sure horizontal scrolling is disabled.

    <ListView x:Name="myList" ...
              HorizontalContentAlignment="Stretch"
              ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    

    enter image description here