Wpf - can't make text wrap

Question

Hi,

I'm a newbee to WPF and I need your help - please. :)

I need an ItemsControl with only vertical scroll and if items don't fit they must wrap.

I've made a tiny sample of my code:

<Grid>       
    <ItemsControl Margin="64,73,65,76" BorderThickness="1" Name="lst" HorizontalContentAlignment="Stretch" Background="White" BorderBrush="#FFBABABA">
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type local:Song}">
            <Border x:Name="personsBorder" CornerRadius="3" Background="#FFD8ECFC" Margin="1,1,1,1" Padding="2,2,2,2">
                <StackPanel Orientation="Horizontal">
                    <Image Width="16" Height="16" Source="icon.png" />
                    <TextBlock x:Name="txtLyric" Text="{Binding Lyric}"  Padding="2,2" Foreground="Black" Height="Auto" TextTrimming="WordEllipsis" TextWrapping="WrapWithOverflow"  />
                </StackPanel>
            </Border>
        </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.Template>
            <ControlTemplate TargetType="{x:Type ItemsControl}">
                <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                    <ItemsPresenter></ItemsPresenter>
                </ScrollViewer>
            </ControlTemplate>
        </ItemsControl.Template>
    </ItemsControl>
</Grid>

Public Class Song
    Public Property Lyric As String
    Public Sub New(ByVal lyric As String)
        Me.Lyric = lyric
    End Sub
End Class


Class MainWindow
    Private Sub MainWindow_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        Dim l As New List(Of Song)
        l.Add(New Song("This is first line"))
        l.Add(New Song("The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog"))
        l.Add(New Song("This is third line"))
        Me.lst.ItemsSource = l
    End Sub
End Class

Any idea why my items aren't wrapping?

Thanks a million!!!

Mojo

Answer 1

Contents of the Textblock can be wrapped using property "TextWrapping" like you have done. Instead of using a Stackpanel, try using a Dockpanel/grid.

Answer 2

just try this

 <Grid>
        <ItemsControl Margin="64,73,65,76" BorderThickness="1" Name="lst" HorizontalContentAlignment="Stretch" Background="White" BorderBrush="#FFBABABA">
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="{x:Type local:Song}">
                    <Border x:Name="personsBorder" CornerRadius="3" Background="#FFD8ECFC" Margin="1,1,1,1" Padding="2,2,2,2">
                        <Grid>        
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                                <ColumnDefinition></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <!--<Image Width="16" Height="16" Source="icon.png" />-->
                            <Rectangle Fill="Red" Height="16" Width="16"></Rectangle>
                            <TextBlock Grid.Column="1"  x:Name="txtLyric" Text="{Binding Lyric}"  Padding="2,2" Foreground="Black" Height="Auto" TextTrimming="WordEllipsis" TextWrapping="WrapWithOverflow"  />
                       </Grid>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.Template>
                <ControlTemplate TargetType="{x:Type ItemsControl}">
                    <ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                        <ItemsPresenter></ItemsPresenter>
                    </ScrollViewer>
                </ControlTemplate>
            </ItemsControl.Template>
        </ItemsControl>
    </Grid>