How to get TextBlock to Wrap or scroll inside FlowDocumentScrollViewer

Question

I have the following XAML inside a 4 Row by 2 column grid. The Grid.ColumnDefinitions have both ColumnDefinition Width's set to *.

    <FlowDocumentScrollViewer Style="{StaticResource myFlowDoc}"
                              Grid.Row="4"
                              Grid.Column="1"  >
        <FlowDocument >
            <Paragraph  LineHeight="12" >
                <ItemsControl ItemsSource="{Binding ReceivedData, Mode=OneWay}" />
                <TextBlock TextWrapping="Wrap" Text="{Binding /, Mode=OneWay}" />
            </Paragraph>
        </FlowDocument>
    </FlowDocumentScrollViewer>

The data comes from an ObservaleCollection<string> and looks fine and scrolls vertically correctly. However, when one item doesn't fit horizontally in a TextBlock, the text block will not wrap and the FlowDocumentScrollViewer will not show scroll bars. The only way to see the text is to expand the window Horizontally. Does anyone know what I'm doing wrong and why the TextWrapping setting isn't honored?

In case it matters here is the style myFlowDoc

        <Style x:Key="myFlowDoc">
        <Setter Property="Control.Padding"
                Value="0" />
        <Setter Property="FlowDocumentScrollViewer.IsToolBarVisible"
                Value="True" />
        <Setter Property="Control.MinHeight"
                Value="150" />
        <Setter Property="Control.BorderBrush"
                Value="SteelBlue" />
        <Setter Property="Control.BorderThickness"
                Value="2" />
        <Setter Property="Control.VerticalAlignment"
                Value="Stretch" />
    </Style>

[EDIT 1] Here is the full screen with an error message that should wrap. Below this image I have one showing just the message detail area with the window wider so you can see the entire message. I also put the entire xaml for the user control at https://gist.github.com/1036178#

[EDIT 2.1] @Navid's suggestion led me to the answer indirectly. Removing the "/" and wrapping things in a data template seemed to do the trick. Here's the new XAML

<DataTemplate x:Key="StringCollection">
   <TextBlock TextWrapping="Wrap" Text="{Binding}" TextAlignment="Left"/>
</DataTemplate>
<!--... now down in the ItemsControl-->
<ItemsControl ItemsSource="{Binding ReceivedData, Mode=OneWay}"
          ItemTemplate="{StaticResource StringCollection}" />

Screenshot of window with text that doesn't fit but doesn't wrap Once the window is wider you can see the whole message

I wasn't sure what the best way to sens a screenshot was so I just edited the original post, I have a shot with the window at "normal" width and then one of just the detail message area where I've made the window wide enough so you can see the entire message. I also put up a link to the complete xaml file. — Tod, Jun 20 '11 at 18:17

Navid Rahmani · Accepted Answer · 2011-06-21T00:08:44.287

2

use this

<ItemsControl ItemsSource="{Binding ReceivedData, Mode=OneWay}">     
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock TextWrapping="Wrap" Text="{Binding /, Mode=OneWay}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

edited Jun 21 '11 at 00:08

answered Jun 20 '11 at 18:59

Navid Rahmani

7,848
9
39
57

I just tried it but unfortunately, I get an "Items collection must be empty before using ItemsSource." InvalidOperationException right in the App OnStartup override. That is, the call stack shows just the OnStartup call and the fault is thrown on window.Show(). I'll look around and see if I can discover more about what is causing this exception. – Tod Jun 20 '11 at 23:40
OK - Between you, SO and Pro WPF n C# 2008 I figure it out. I can't put the TextBlock directly inside the ItemsControl because that conflicts with the fact that ItemsSource wants to control the content. However I can put a DataTemplate in there and that did the trick. I'll put the modified code in the original question. A 1K Thanks to you for showing me the light. – Tod Jun 21 '11 at 00:02
Turns out it was just the OneWay binding syntax. I went back to my original code and just removed the "/, Mode=OneWay" and now it works. This odd syntax with the slash is the only syntax I could ever get to work with the Mode value. – Tod Jun 21 '11 at 00:19

score 0 · Answer 2 · answered Jul 24 '20 at 10:11

You can introduce a scrollbar by utilizing the ListView as

<Section Name="Gallery">
                <Paragraph>
                    <ListView ItemsSource="{Binding GalleryCards}"
                              BorderBrush="Transparent"
                              HorizontalAlignment="Center"
                              ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                              Padding="10"
                              Width="{Binding ElementName=Viewer, Path=RenderSize.Width, Converter={StaticResource DocumentSizeConverter}, ConverterParameter=80, UpdateSourceTrigger=PropertyChanged}">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ContentControl s:View.Model="{Binding .}"/>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel HorizontalAlignment="Center" />
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                    </ListView>
                </Paragraph>
            </Section>

How to get TextBlock to Wrap or scroll inside FlowDocumentScrollViewer

2 Answers2