Scrollviewer not scrolling without height

Question

I am writing a Windows Phone 8.1 app (WINRT).

I have implemented a scrollviewer in page. It contains a stackpanel having richtextblock with long texts, and a button.

But the problem is that this scrollviewer is not scrolling at all. If i am manually setting a height to this scrollviewer it is scrolling but it looks ugly on higher resolutions. How to make this scrollviewer work without having manual height to it.

<ScrollViewer Name="WhyJoin_User_Content_Scroll"
                              Margin="0,10,0,10" 
                              VerticalScrollBarVisibility="Auto"
                              >
<StackPanel Orientation="Vertical">
    <RichTextBlock Name="WhyJoin_User_Content_RichTextBlock"
                    FontWeight="Light"
                    Margin="20,10,20,0" 
                    Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
                    FontSize="19"
                    TextWrapping="Wrap"
                     TextAlignment="Justify">
        <RichTextBlock.Blocks>
            <Paragraph>
                <Paragraph.Inlines>
                    <Run Text=" Text Text Text Text Text Text Text Text ">
                    </Paragraph.Inlines>
                </Paragraph>
                <Paragraph>
                    <Paragraph.Inlines>
                        <Run Text=" Text Text Text Text Text Text Text Text ">
                        </Paragraph.Inlines>
                    </Paragraph>
                    <Paragraph>
                        <Paragraph.Inlines>
                            <Run Text=" Text Text Text Text Text Text Text Text "></Run>
                        </Paragraph.Inlines>
                    </Paragraph>
                    <Paragraph>
                        <Paragraph.Inlines>
                            <Run Text=" Text Text Text Text Text Text Text Text "></Run>
                        </Paragraph.Inlines>
                    </Paragraph>
                    <Paragraph>
                        <Paragraph.Inlines>
                            <Run Text="i: Practice work hours of experts"></Run>
                        </Paragraph.Inlines>
                    </Paragraph>
                    <Paragraph>
                        <Paragraph.Inlines>
                            <Run Text="ii: Address, Phone numbers etc."></Run>
                        </Paragraph.Inlines>
                    </Paragraph>
                    <Paragraph>
                        <Paragraph.Inlines>
                            <Run Text="iii: Appointment requests"></Run>
                        </Paragraph.Inlines>
                    </Paragraph>
                    <Paragraph>
                        <Paragraph.Inlines>
                            <Run Text=" Text Text Text Text Text Text Text Text "></Run>
                        </Paragraph.Inlines>
                    </Paragraph>
                </RichTextBlock.Blocks>
            </RichTextBlock>
            <Button 
                        x:Name="ButtonWhyJoin_User_Register"    
                        BorderThickness="0"
                        Width="150"   
                        Height="70"
                            Margin="0,10,0,0"
                            HorizontalAlignment="Center"

                        Click="ButtonWhyJoin_User_Register_Click"
                        FontWeight="ExtraLight"
                        Background="{StaticResource DefaultTheme_DarkBlueColor}" 
                        BorderBrush="{x:Null}" 
                        Style="{StaticResource ButtonStyleYesNo}"  
                        Foreground="{StaticResource DefaultTheme_BackgroundColor}"/>
        </StackPanel>
    </ScrollViewer>

Answer 1

The easiest way to solve your problem is to bind the height and/or width of the scroll viewer to the ContentRoot. This is easiest done in Blend, by doing this whatever the screen resolution you will automatically achieve the desired height.

http://pho.to/8kh1T

This is what the XAML would look like

<ScrollViewer HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" Width="175" Height="{Binding ActualHeight, ElementName=ContentRoot}"/>