RichTextBlock grow automatically in xaml

Question

Dear Team,

                 I am developing a Quiz Application with  RichTextBlock control,it contains huge data (more than 250 words), and i am having other controls also. i don't want scroll the RichTextBlock. i have to Scroll the Page like old method (vertical scrolling)

 eg.

Q1. Question goes here......

..................................

..................................

.................................

option A : .......................

option B: ........................

option c: .......................

option d:.......................

Thanks

Answer 1

Dear team,

                 i have made my RickTextBlock to grow with out displaying the Scroll bar. but i am not able to make the page to scroll vertical. plz help.

is there is any trick. to do like that.

i tried to put the whole grid inside the scroll viewer like

<ScrollViewer x:Name="Chat" Grid.Row="1"                        
                           VerticalScrollBarVisibility="Visible"
                          HorizontalScrollBarVisibility="Visible"
                           Height="700"
                           VerticalScrollMode="Enabled"  >

            <Grid  Grid.Column="0" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Visible"  ScrollViewer.HorizontalScrollBarVisibility="Visible">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/> 
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
       
        .
.
.
.
.
.
..
</grid>
</scrollviewer>

Answer 2

Dear Team,

                 please inform me. it is possible or not. because i waiting for the answer

Thanks

Answer 3

Hi Mann,

Yes, you can use ScrollView control and set the height of every RowDefinition. Set heigh of RichTextBlock RowDefinition to auto, others set to an appropriate value, like 20. Code look like the following.

<Page
    x:Class="App32.MainPage"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:local="using:App32"
    xmlns:d=http://schemas.microsoft.com/expression/blend/2008
    xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006
    mc:Ignorable="d">
    <ScrollViewer>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="20"/>
                <RowDefinition Height="20"/>
                <RowDefinition Height="20"/>
                <RowDefinition Height="20"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0"  FontSize="300" TextWrapping="Wrap" Text="  I am developing a Quiz Application with  RichTextBlock control,it contains huge data (more than 250 words), and i am having other controls also. i don't want scroll the RichTextBlock. i have to Scroll the Page like old method (vertical scrolling)"></TextBlock>
            <RadioButton Grid.Row="1" Content="A" ></RadioButton>
            <RadioButton Grid.Row="2" Content="B"></RadioButton>
            <RadioButton Grid.Row="3" Content="C"></RadioButton>
            <RadioButton Grid.Row="4" Content="D"></RadioButton>
        </Grid>
    </ScrollViewer>
</Page>

Use your RichTextBlock to replace my TextBlock, you will see the example works as expect.

If you still have questions, please post more information about your scenario.

Regards,

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 4

Thanks herro wong

but still i am facing the issue

the above is the result the xaml code is

<ScrollViewer x:Name="Chat" Grid.Row="1"                        
                           VerticalScrollBarVisibility="Visible"
                          HorizontalScrollBarVisibility="Visible"
                           Height="700"
                           VerticalScrollMode="Enabled"  >

            <Grid  Grid.Column="0" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Visible"  ScrollViewer.HorizontalScrollBarVisibility="Visible">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/> 
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
       
           <ScrollViewer x:Name="scrollViewerChat"                         
                           VerticalScrollBarVisibility="Auto"
                          HorizontalScrollBarVisibility="Auto"
                           VerticalScrollMode="Enabled"  >
            <RichTextBlock Name="rtbQuestion" Grid.Row="0" Grid.Column="0" Margin="60,15,0,0"  HorizontalAlignment="Left" VerticalAlignment="Top" Width="800" FontSize="14" ScrollViewer.VerticalScrollBarVisibility="Auto"  ScrollViewer.HorizontalScrollBarVisibility="Auto" />
        </ScrollViewer>
        <TextBlock Grid.Row="1" Grid.Column="0"  Margin="60,15,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="a)" FontSize="16"/>
                <RadioButton Grid.Row="1" Grid.Column="0"   Margin="80,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="rad_answer_a"/>
        <RichTextBlock Name="answer_a" Grid.Row="1" Grid.Column="0"  Margin="120,15,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="770" FontSize="14" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" />

        <TextBlock Grid.Row="2" Grid.Column="0"  Margin="60,15,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="b)" FontSize="16"/>
                <RadioButton Grid.Row="2" Grid.Column="0"   Margin="80,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="rad_answer_b"/>

        <RichTextBlock Name="answer_b" Grid.Row="2" Grid.Column="0" Margin="120,15,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="770" FontSize="14" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" />

        <TextBlock Grid.Row="3" Grid.Column="0"  Margin="60,15,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="c)" FontSize="16"/>
                <RadioButton Grid.Row="3" Grid.Column="0"   Margin="80,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="rad_answer_c"/>
        <RichTextBlock Name="answer_c" Grid.Row="3" Grid.Column="0" Margin="120,15,0,0"  HorizontalAlignment="Left" VerticalAlignment="Top" Width="770" FontSize="14" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" />

        <TextBlock Grid.Row="4" Grid.Column="0"  Margin="60,15,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="d)" FontSize="16"/>
                <RadioButton Grid.Row="4" Grid.Column="0"   Margin="80,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="rad_answer_d"/>
        <RichTextBlock Name="answer_d" Grid.Row="4" Grid.Column="0" HorizontalAlignment="Left" Margin="120,15,0,0" VerticalAlignment="Top" Width="770" FontSize="14" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" />

        <TextBlock Grid.Row="5" Grid.Column="0"  Margin="60,15,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Text="e)" FontSize="16"/>
        <RadioButton Grid.Row="5" Grid.Column="0"   Margin="80,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Name="rad_answer_e"/>
        <RichTextBlock Name="answer_e" Grid.Row="5" Grid.Column="0" HorizontalAlignment="Left" Margin="120,15,0,0" VerticalAlignment="Top" Width="770" FontSize="14" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" />

            <Button Content="Mark as Answer" Grid.Row="6" Grid.Column="0"    Margin="60,15,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="14" Click="btnMarkasAnswer"/>
            <Button Content="Clear Answer" Grid.Row="6" Grid.Column="0"    Margin="250,15,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="14" Click="btnclearAnswer"/>
        </Grid> 
        </ScrollViewer>

i cannot fix the height because the size of the question and the option will change.  (sorry the design it is not good.. still in development :-)  )

Answer 5

Hi Mann,

Per my understanding, there is no need to nested two grid control in ScrollViewer. The question and the options are changing, so we could define two RowDefinitions to hold them. Set the height property of them both to “auto” and also set the appropriate MinHeight of them.

Another question is you have said the options will change according the question, so I think you should use a control like listbox to hold them.

Code look like the following.

In XAML.

<Page

    x:Class="App34.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App34"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <ScrollViewer x:Name="Chat" Grid.Row="1"  VerticalScrollMode="Enabled" >

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition MinHeight="700" Height="auto"></RowDefinition>

                <RowDefinition MinHeight="200" Height="auto"></RowDefinition>

            </Grid.RowDefinitions>

            <RichTextBlock Grid.Row="0" TextWrapping="Wrap" FontFamily="Segoe UI" FontSize="40" Foreground="{StaticResource ApplicationForegroundThemeBrush}">

                <Paragraph>The space between lines of text is controlled by the pair of properties LineStackingStrategy and LineHeight. These properties are conveniently exposed on TextBlock and RichTextBlock.

                    <LineBreak/>

                </Paragraph>

                <Paragraph>Each TextBlock below applies LineHeight to its text layout slightly differently dependent on the value set in LineStackingStrategy. Play around with the line height slider to see how the methods of LineStackingStrategy differ from each other</Paragraph>

                <Paragraph>This is fine when there are only a few value in the parameter, but when many values have been selected, the fact that the textbox grows automatically to accommodate the contents means that this textbox can become quite large.</Paragraph>

                <Paragraph>Is there any way to either limit the number of values of a parameter when displaying in this way, or of setting a maximum size for an automatically grow textbox?</Paragraph>

                <Paragraph>i am sorry but this is against UX / UI design principles. we never ever automatically grow / resize the Window. you can however use list controls to automatically expand / collapse based on:

•if they are currently highlighted / focused

•if they have some data / child controls

for e.g. take a look at the Expander WPF control

                </Paragraph>

                <Paragraph>It should grow automatically, and judging by your pictures it seems like it actually does (?), as you have set the SizeToContent property of the window to Height. Note that the SizeToContent property is automatically reset to Manual if a user resizes the window by using the resize grip or dragging the border though.

It's probably something in your XAML that makes the Button appear on top of the ListBox. Try to set the height of the last RowDefintion to Auto or the same height as the Button (29):

                </Paragraph>

                <Paragraph>

                    <InlineUIContainer>

                        <Image Source="Assets/1.png" Height="200" Width="200"/>

                    </InlineUIContainer>

                    Mauris auctor tincidunt auctor.

                </Paragraph>

            </RichTextBlock>

            <ListBox Grid.Row="1" x:Name="options">

                <ListBox.ItemTemplate>

                    <DataTemplate>

                        <StackPanel Orientation="Horizontal">

                            <RadioButton Content="{Binding Path=Title}"></RadioButton>

                        </StackPanel>

                    </DataTemplate>

                </ListBox.ItemTemplate>

            </ListBox>

        </Grid>

    </ScrollViewer>

</Page>

In XAML.cs

namespace App34

{

    /// <summary>

    /// An empty page that can be used on its own or navigated to within a Frame.

    /// </summary>

    public sealed partial class MainPage : Page

    {

        private System.Collections.ObjectModel.ObservableCollection<Option> list = new System.Collections.ObjectModel.ObservableCollection<Option>();

        public MainPage()

        {

            this.InitializeComponent();

            list.Add(new Option() { Title = "A) aaaaaaaaaaaaaaa" });

            list.Add(new Option() { Title = "B) bbbbbbbbbbbbbbbbbbbb" });

            list.Add(new Option() { Title = "C) cccccccccccccccc" });

            list.Add(new Option() { Title = "D) dddddddddddddd" });

            options.ItemsSource = list;

        }

    }

    public class Option

    {

        public string Title { get; set; }

        public bool ChooseFlag { get; set; }

    }

}

Hope can help you.

Regards,

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 6

Dear herrow wong,

               sorry.. the problem is .. some time the options also have images :-(   ... This is Indian Government Exam Template..  so i cannot change on my own.

Thanks              

Answer 7

Hi Mann,

Yes, I know your scenario. Sometimes, the options of the question contains pictures. Some are not. So the data template should choose the data template at runtime according the data source. (In this case the data source is the options of a question).

We can use DataTemplateSelector class to achieve this goal. Bryan has posted an article talking about this topic. You can have a look. And a code example from MSDN. https://code.msdn.microsoft.com/windowsapps/The-DataTemplateSelector-93e46ad7/view/SourceCode.

If you still have questions, please feel free to post on this forum.

Regards,

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

Answer 8

Dear Herro wong 

    i change the code in

<ScrollViewer x:Name="Chat" Grid.Row="1"                        
                           VerticalScrollBarVisibility="Visible"
                          HorizontalScrollBarVisibility="Visible"
                           Height="500"
                           VerticalScrollMode="Enabled"  >

 and i got the scroll bar :-)

Thanks