none
TextBlock with ScrollViewer gets cut-off when text too long RRS feed

  • Question

  • I have a large amount of text in a textblock and I would like the scrollviewer to take effect when it reaches the limit of the grid.

    Currently the text gets cut-off at the bottom of the grid and the scrollview doesn't identify when to take effect.

            <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Vertical" >
                <ScrollViewer Margin="10,0,10,0">
                    <TextBlock Name="TBlock_Desc" TextWrapping="Wrap" />
                </ScrollViewer>
            </StackPanel>

    Sunday, April 21, 2013 1:36 AM

Answers

  • The below works if I use a GRID instead of a STACKPANEL.

    <Window x:Class="WpfApplication29.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="500" Width="900">
        
        <Grid ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition MinHeight="10" MaxHeight="80"></RowDefinition>
                    <RowDefinition MinHeight="10" MaxHeight="80"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*" MinHeight="20"></RowDefinition>
                </Grid.RowDefinitions>
    
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="2*" MinWidth="200"></ColumnDefinition>
                </Grid.ColumnDefinitions>
            
            <Grid ShowGridLines="True" Grid.Row="1" Grid.ColumnSpan="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="3*" ></RowDefinition>
                </Grid.RowDefinitions>
    
                <TextBlock Grid.Row="0" Text="Description"  Margin="0" FontSize="12" FontWeight="Bold" />
                <ScrollViewer Margin="10,0,10,0" Grid.Row="1" VerticalScrollBarVisibility="Auto"  >
                    <TextBlock Name="TBlock_Desc" TextWrapping="Wrap" Width="Auto" Text="A rainbow is an optical and meteorological phenomenon that is caused by reflection of light in water droplets in the Earth's atmosphere, resulting in a spectrum of light appearing in the sky. It takes the form of a multicoloured arc.
    Rainbows caused by sunlight always appear in the section of sky directly opposite the sun. In a primary rainbow, the arc shows red on the outer part and violet on the inner side. This rainbow is caused by light being refracted while entering a droplet of water, then reflected inside on the back of the droplet and refracted again when leaving it. In a double rainbow, a second arc is seen outside the primary arc, and has the order of its colours reversed, red facing toward the other one, in both rainbows. This second rainbow is caused by light reflecting twice inside water droplets." />
                </ScrollViewer>
            </Grid>
        </Grid>  
    </Window>
    

    • Marked as answer by X Seven Sunday, April 21, 2013 5:07 PM
    Sunday, April 21, 2013 3:28 AM

All replies

  • Propably becaue the TextBlock does not try to increase in size when the text increases:

    Width="Auto" TextWrapping="True" 

    Or use TextBlock, as it has built in Scrollbars.


    Let's talk about MVVM: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/b1a8bf14-4acd-4d77-9df8-bdb95b02dbe2

    Sunday, April 21, 2013 1:51 AM
  • It's the StackPanel which is the problem, it will just stretch to fit the content. You can either remove it or move the ScrollViewer to wrap the StackPanel.

    <ScrollViewer Grid.Row="1" Grid.ColumnSpan="2" Margin="10,0,10,0">
        <TextBlock Name="TBlock_Desc" TextWrapping="Wrap" />
    </ScrollViewer

    or..

    <ScrollViewer Grid.Row="1" Grid.ColumnSpan="2" Margin="10,0,10,0">
        <StackPanel Orientation="Vertical" >
            <TextBlock Name="TBlock_Desc" TextWrapping="Wrap" />           
        </StackPanel>
    </ScrollViewer>

    Sunday, April 21, 2013 2:34 AM
  • I forgot to mention that there is an additional textBlock in the gridrow above the mentioned textblock (eg. see "Description" in the pic).  Therefore, I can't put the whole gridrow in the scrollviewer.  I only want the writting below the word "Description" in the scrollviewer.


    Here's my full code:

    <Window x:Class="WpfApplication29.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="500" Width="900">
        
        <Grid ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition MinHeight="10" MaxHeight="80"></RowDefinition>
                    <RowDefinition MinHeight="10" MaxHeight="80"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*" MinHeight="20"></RowDefinition>
                </Grid.RowDefinitions>
    
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="2*" MinWidth="200"></ColumnDefinition>
                </Grid.ColumnDefinitions>
    
                <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Vertical" Height="Auto" >
                    <TextBlock Text="Description"  Margin="0" FontSize="12" FontWeight="Bold" />
                <ScrollViewer Margin="10,0,10,0" >
                        <TextBlock Name="TBlock_Desc" TextWrapping="Wrap" Width="Auto" Text="A rainbow is an optical and meteorological phenomenon that is caused by reflection of light in water droplets in the Earth's atmosphere, resulting in a spectrum of light appearing in the sky. It takes the form of a multicoloured arc.
    Rainbows caused by sunlight always appear in the section of sky directly opposite the sun. In a primary rainbow, the arc shows red on the outer part and violet on the inner side. This rainbow is caused by light being refracted while entering a droplet of water, then reflected inside on the back of the droplet and refracted again when leaving it. In a double rainbow, a second arc is seen outside the primary arc, and has the order of its colours reversed, red facing toward the other one, in both rainbows. This second rainbow is caused by light reflecting twice inside water droplets." />
                    </ScrollViewer>
                </StackPanel>
        </Grid> 
    </Window>


    • Edited by X Seven Sunday, April 21, 2013 3:17 AM
    Sunday, April 21, 2013 3:17 AM
  • The below works if I use a GRID instead of a STACKPANEL.

    <Window x:Class="WpfApplication29.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="500" Width="900">
        
        <Grid ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition MinHeight="10" MaxHeight="80"></RowDefinition>
                    <RowDefinition MinHeight="10" MaxHeight="80"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*" MinHeight="20"></RowDefinition>
                </Grid.RowDefinitions>
    
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="2*" MinWidth="200"></ColumnDefinition>
                </Grid.ColumnDefinitions>
            
            <Grid ShowGridLines="True" Grid.Row="1" Grid.ColumnSpan="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="3*" ></RowDefinition>
                </Grid.RowDefinitions>
    
                <TextBlock Grid.Row="0" Text="Description"  Margin="0" FontSize="12" FontWeight="Bold" />
                <ScrollViewer Margin="10,0,10,0" Grid.Row="1" VerticalScrollBarVisibility="Auto"  >
                    <TextBlock Name="TBlock_Desc" TextWrapping="Wrap" Width="Auto" Text="A rainbow is an optical and meteorological phenomenon that is caused by reflection of light in water droplets in the Earth's atmosphere, resulting in a spectrum of light appearing in the sky. It takes the form of a multicoloured arc.
    Rainbows caused by sunlight always appear in the section of sky directly opposite the sun. In a primary rainbow, the arc shows red on the outer part and violet on the inner side. This rainbow is caused by light being refracted while entering a droplet of water, then reflected inside on the back of the droplet and refracted again when leaving it. In a double rainbow, a second arc is seen outside the primary arc, and has the order of its colours reversed, red facing toward the other one, in both rainbows. This second rainbow is caused by light reflecting twice inside water droplets." />
                </ScrollViewer>
            </Grid>
        </Grid>  
    </Window>
    

    • Marked as answer by X Seven Sunday, April 21, 2013 5:07 PM
    Sunday, April 21, 2013 3:28 AM
  • That's probably the best way of doing it. You could set the max height on the ScrollViewer but that wouldn't be flexible if the window gets resized.
    Sunday, April 21, 2013 4:00 AM
  • Having a similar issue. Possible solution can be found here: http://stackoverflow.com/questions/9113151/putting-large-text-in-texblock-and-scrollviewer

    The odd thing is, that it only occurs on a real device, the Emulator does not clip too long text which makes testing/debugging harder ....


    Programming is a kind of art but not all programmers are artists.

    Monday, June 23, 2014 6:30 PM