How can I wrap a custom text?

Question

I have a listbox that uses datatemplates and one of the elements in the template is a textblock. Problem is that the words won't wrap, and I don't want to set a fixed size. Anybody that knows how to resolve this problem? It's driving me crazy!

                   <ListBox Grid.Row=" 1" HorizontalContentAlignment="Stretch" Background="#24221f" ItemsSource="{Binding Messages}" ScrollViewer.VerticalScrollBarVisibility="Visible" ClipToBounds="False" BorderBrush="{x:Null}">
                <ListBox.ItemTemplate>
                    <DataTemplate >
                        <Border BorderBrush="#24221f" BorderThickness="3" Width=" auto">
                            <DockPanel Background="{StaticResource blackBackground}" HorizontalAlignment="Stretch" Width="auto">
                                <Border BorderThickness="3" BorderBrush="Transparent">
                            <Image Source="{Binding IconImageUrl}" VerticalAlignment="top" Height="22" Width ="22" DockPanel.Dock="Left" />
                                </Border>
                                <Border BorderThickness="3" BorderBrush="LightGray" Height="auto" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" DockPanel.Dock="Left">
                            <Image Source="{Binding ProfileImageUrl}" VerticalAlignment="Top" HorizontalAlignment="Left" Height="48" Width ="48"  />
                                </Border>
                                <StackPanel Orientation="Vertical" DockPanel.Dock="Left" Margin="5,0,0,0">
                                    <Label Content="{Binding Path=Sender}" Foreground="#feb41c" FontFamily="Verdana" FontWeight="Bold" FontSize="14" />
                                    <TextBlock Width="100" Text="{Binding Path=ShortMessage}" Margin="10,0,0,0" Foreground="BlanchedAlmond" TextWrapping="Wrap" FontFamily="Verdana" />
                                    <Label Content="{Binding Path=Time}" Margin="10,0,0,0" Foreground="DarkGray" FontFamily="Verdana" FontStyle="Italic"/>
                            </StackPanel>
                        </DockPanel>
                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

Answer 1

just try with HorizontalContentAlignment property to "Stretch" of ListBoxItems using the Style

 <Style TargetType="{x:Type ListBoxItem}" >
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
 </Style>

and also disable the HorizontalScrollBar visibility

ScrollViewer.HorizontalScrollBarVisibility="Disabled" 

Update

  <Window.Resources>
    <SolidColorBrush x:Key="blackBackground" Color="Black"/>
    <Style TargetType="{x:Type ListBoxItem}" >
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>

</Window.Resources>
<Grid>
    <ListBox Grid.Row=" 1" HorizontalContentAlignment="Stretch" Background="#24221f"  ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
             ItemsSource="{Binding Messages}" ScrollViewer.VerticalScrollBarVisibility="Visible" ClipToBounds="False" BorderBrush="{x:Null}">
        <ListBox.ItemTemplate>
            <DataTemplate >
                <Border BorderBrush="#24221f" BorderThickness="3" Width=" auto">
                    <DockPanel Background="{StaticResource blackBackground}" HorizontalAlignment="Stretch" Width="auto">
                        <Border BorderThickness="3" BorderBrush="Transparent">
                            <Image Source="{Binding IconImageUrl}" VerticalAlignment="top" Height="22" Width ="22" DockPanel.Dock="Left" />
                        </Border>
                        <Border BorderThickness="3" BorderBrush="LightGray" Height="auto" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" DockPanel.Dock="Left">
                            <Image Source="{Binding ProfileImageUrl}" VerticalAlignment="Top" HorizontalAlignment="Left" Height="48" Width ="48"  />
                        </Border>
                        <StackPanel Orientation="Vertical" DockPanel.Dock="Left" Margin="5,0,0,0">
                            <Label Content="{Binding Path=Sender}" Foreground="#feb41c" FontFamily="Verdana" FontWeight="Bold" FontSize="14" />
                            <TextBlock  Text="{Binding Path=ShortMessage}" Margin="10,0,0,0" Foreground="BlanchedAlmond" TextWrapping="Wrap" FontFamily="Verdana" />
                            <Label Content="{Binding Path=Time}" Margin="10,0,0,0" Foreground="DarkGray" FontFamily="Verdana" FontStyle="Italic"/>
                        </StackPanel>
                    </DockPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

</Grid>

Answer 2

StackPanel is Evil :=) when i have strange behaviours in a xaml which include StackPanel, switching to a Grid with right parameters ( fixed sized, or stars or "Auto" ) often fix the issue. Note also that there is an error in your xaml since you set the DockPanel.Dock of your first image (IconImageUrl) whereas it is in the border that surrrounds it that you should be setting it. That may get the Layout to do strange things.

Answer 3

I think this thread answer's your question, see the accespted answer by "Nash" - Force TextBlock to wrap in WPF ListBox

( and remember to upvote the answer the the linked thread if it helps you :) )