Rich TextBlock in ListViewItem Text Wrapping

Question

I have a RichTextBlock in a ListViewItem in a ListView. I can't for the life of me findout why the text wrapping on the RichTextBlock won't apply. XAML:

<ScrollViewer x:Name="MessagesScroller" HorizontalScrollMode="Disabled">
            <ListView x:Name="Messages" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
        </ScrollViewer>

C#

ListViewItem listviewitem = new ListViewItem();
                    listviewitem.HorizontalContentAlignment = HorizontalAlignment.Stretch;
                    listviewitem.VerticalAlignment = VerticalAlignment.Stretch;
                    listviewitem.Tag = message.Id;
                    StackPanel stack = new StackPanel();
                    stack.Orientation = Orientation.Horizontal;
                    stack.VerticalAlignment = VerticalAlignment.Stretch;
                    Image Avatar = new Image();
                    Avatar.Height = 50;
                    Avatar.VerticalAlignment = VerticalAlignment.Top;
                    Avatar.Source = new BitmapImage(new Uri("https://cdn.discordapp.com/avatars/" + message.User.Id + "/" + message.User.Avatar + ".jpg"));
                    stack.Children.Add(Avatar);
                    StackPanel innerstack = new StackPanel();
                    innerstack.VerticalAlignment = VerticalAlignment.Stretch;
                    StackPanel MsgData = new StackPanel();
                    MsgData.Orientation = Orientation.Horizontal;
                    #region RichTextBlock
                    RichTextBlock user = new RichTextBlock();
                    user.TextWrapping = TextWrapping.WrapWholeWords;
                    Paragraph userPara = new Paragraph();
                    Run run1 = new Run();
                    run1.Text = message.User.Username;
                    userPara.Inlines.Add(run1);
                    user.Blocks.Add(userPara);
                    #endregion

                    MsgData.Children.Add(user);

                    #region RichTextBlock
                    RichTextBlock timestamp = new RichTextBlock();
                    Paragraph timePara = new Paragraph();
                    Run run2 = new Run();
                    run2.Text = message.Timestamp.Month.ToString() + "/" + message.Timestamp.Day + " at " + message.Timestamp.Hour.ToString() + ":";
                    if (message.Timestamp.Minute < 9)
                    {
                        run2.Text += "0";
                    }
                    run2.Text += message.Timestamp.Minute.ToString();
                    timestamp.Foreground = GetSolidColorBrush("#FF333333");
                    timePara.Inlines.Add(run2);
                    timestamp.Blocks.Add(timePara);
                    timestamp.Margin = new Thickness(5, 0, 0, 0);
                    #endregion

                    MsgData.Children.Add(timestamp);
                    innerstack.Children.Add(MsgData);

                    #region RichTextBlock
                    RichTextBlock txtblock = new RichTextBlock();
                    txtblock.TextWrapping = TextWrapping.WrapWholeWords;
                    Paragraph txtPara = new Paragraph();
                    Run run3 = new Run();
                    run3.Text = message.Content;
                    txtPara.Inlines.Add(run3);

                    txtblock.Blocks.Add(txtPara);

                    foreach (SharedModels.Embed embed in message.Embeds)
                    {
                        Paragraph paragraph = new Paragraph();
                        if (embed.title != null)
                        {
                            Run title = new Run();
                            title.Text = embed.title + "\n";
                            paragraph.Inlines.Add(title);
                        }
                        if (embed.Description != null)
                        {
                            Run desc = new Run();
                            desc.Text = embed.Description + "\n";
                            paragraph.Inlines.Add(desc);
                        }
                        if (embed.Thumbnail.Url != null)
                        {
                            InlineUIContainer container = new InlineUIContainer();
                            BitmapImage bi = new BitmapImage(new Uri(embed.Thumbnail.ProxyUrl));
                            Image image = new Image();
                            image.Height = 300;
                            image.Source = bi;
                            container.Child = image;
                            paragraph.Inlines.Add(container);
                        }
                        txtblock.Blocks.Add(paragraph);
                    }

                    foreach (SharedModels.Attachment attach in message.Attachments)
                    {
                        Paragraph paragraph = new Paragraph();
                        Run run = new Run();
                        run.Text = attach.Filename;
                        BitmapImage bi = new BitmapImage(new Uri(attach.Url));
                        Image image = new Image();
                        image.Height = 300;
                        image.Source = bi;
                        InlineUIContainer container = new InlineUIContainer();
                        container.Child = image;
                        paragraph.Inlines.Add(run);
                        paragraph.Inlines.Add(container);
                        txtblock.Blocks.Add(paragraph);
                    }
                    #endregion

                    innerstack.Children.Add(txtblock);
                    stack.Children.Add(innerstack);
                    listviewitem.Content = stack;

                    #region Flyout
                    Flyout flyout = new Flyout();
                    StackPanel flyoutcontent = new StackPanel();
                    flyoutcontent.Margin = new Thickness(-10);
                    /*Button AddRection = new Button()
                    {
                        Content = "Add Reaction",
                        HorizontalAlignment = HorizontalAlignment.Stretch
                    };
                    flyoutcontent.Children.Add(AddRection);
                    Button Pin = new Button()
                    {
                        Content = "Pin",
                        HorizontalAlignment = HorizontalAlignment.Stretch
                    };
                    flyoutcontent.Children.Add(Pin);*/
                    /*Button Edit = new Button()
                    {
                        Content = "Edit",
                        HorizontalAlignment = HorizontalAlignment.Stretch,
                        Tag = message.Id
                    };
                    Edit.Click += EditMessage;
                    flyoutcontent.Children.Add(Edit);*/
                    Button Delete = new Button()
                    {
                        Content = "Delete",
                        HorizontalAlignment = HorizontalAlignment.Stretch,
                        Tag = message.Id
                    };
                    Delete.Click += DeleteThisMessage;
                    flyoutcontent.Children.Add(Delete);
                    flyout.Content = flyoutcontent;
                    listviewitem.ContextFlyout = flyout;
                    listviewitem.RightTapped += OpenRightTapFlyout;
                    listviewitem.Holding += OpenHoldingFlyout;
                    #endregion

                    Messages.Items.Add(listviewitem);

I have uprooted my entire program to use StackPanels instead but that didn't help

Answer 1

You used StackPanel for your layout and set the Orientation property to Horizontal for the StackPanel. StackPanel is size to its children. So it seems like the reason is that you don't set the Width property for the RichTextBlock. The width of RichTextBlock size to its content, StackPanelsize toRichTextBlock`, it may not wrap.

You may have several ways to resolve this:

• Set width property for the RichTextBlock.

  RichTextBlock txtblock = new RichTextBlock();
  txtblock.Width = 300;
  txtblock.TextWrapping = TextWrapping.WrapWholeWords;
  

• Remove the orientation property for the StackPanel if you don't need such a layout.

   //stack.Orientation = Orientation.Horizontal;
  

• Or you may use a Grid instead. Grid may better help you define the layout. You may define the image and RichTextBlock layout as followings.

  <Grid>
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
          <ColumnDefinition></ColumnDefinition>
          <ColumnDefinition></ColumnDefinition>
      </Grid.ColumnDefinitions>
      <Image Source="Assets/caffe1.jpg" Height="100" Grid.Row="0" Grid.Column="0"></Image>
      <RichTextBlock TextWrapping="WrapWholeWords" Grid.Row="0" Grid.Column="1">
          <Paragraph>
              <Run FontStyle="Italic">sample text todemonstrate some properties.demonstrate some properties.demonstrate some properties.demonstrate some properties.
                          demonstrate some properties.demonstrate some properties.demonstrate some properties.demonstrate some properties.demonstrate some properties.
              </Run> 
          </Paragraph>
      </RichTextBlock>
  </Grid>