MojoDK
MojoDK

Reputation: 4528

Wpf - can't make text wrap

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?

Upvotes: 2

Views: 1381

Answers (2)

Kishore Kumar
Kishore Kumar

Reputation: 21863

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>

Upvotes: 1

jimplode
jimplode

Reputation: 3502

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

Upvotes: 1

Related Questions