How to stretch height of the frame according to the content page ?

Question

Hi friends,

I'm using "Frame" as a container for other pages. When I try to place the "Page" inside the "Frame", then the height of the "Page" varies according to the "Frame" height and "Page" gets fitted insied the "Frame". The bottom stack Panel "Grid.row=2" is fixed at the bottom of the browser. What I want is that the "Frame" height should vary according to the "Page" height and if the "Page" size is more. Then the browser's scroll bar should gets activated and I should be able to scroll down the "Page". But size of the bottom stack panel "Grid.row=2" should be fixed.

Master Page :

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
	xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" mc:Ignorable="d"
	x:Class="ATI_Virtual_Classroom.MainPage"
	Width="Auto" Height="Auto">

	<toolkit:BubbleCremeTheme>
		<Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
        	<RowDefinition Height="100" />
        	<RowDefinition Height="*" />
        	<RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
        	<ColumnDefinition Width="214" />
        	<ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Row="0" Grid.ColumnSpan="2" Orientation="Vertical" Width="Auto" Height="100" VerticalAlignment="Top">
        	<Grid Width="Auto">
        		<StackPanel Grid.Column="0" Width="200" HorizontalAlignment="Left">
        			<TextBlock Margin="15,15,15,15">Logo</TextBlock>    		
				</StackPanel>
				<StackPanel Width="Auto" Height="100" VerticalAlignment="Top">
					<Grid>
						<StackPanel Grid.Row="0" Margin="0,0,0,22">
							<TextBox x:Name="txtsearch" Width="250" Height="25" />
            				<Button x:Name="btnsearch" Width="100" Height="25" Content="Search" />
						</StackPanel>
						<StackPanel HorizontalAlignment="Center" Orientation="Horizontal" VerticalAlignment="Bottom">
							<Button x:Name="btnregister" Click="LinkClick" Tag="/Pages/Registration.xaml" Content="Register" Width="150"></Button>
							<Button x:Name="btnhome" Click="LinkClick" Tag="/Pages/Index.xaml" Content="Home" Width="150"></Button>
							<TextBlock>RSS Feeds</TextBlock>
						</StackPanel>
					</Grid>
				</StackPanel>    	
			</Grid>
        </StackPanel>
        <StackPanel Grid.Row="1" Height="Auto" Grid.Column="0" HorizontalAlignment="Stretch">
        	<Grid Margin="10,10,10,0" Height="150" Width="Auto">
				<Border BorderBrush="#FF66603A" CornerRadius="20" BorderThickness="2">
					<Border.Background>
						<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
							<GradientStop Color="#FFF7F8E2" Offset="1"/>
							<GradientStop Color="#FFDFE2BB"/>
						</LinearGradientBrush>
					</Border.Background>
					<TextBlock HorizontalAlignment="Center">Login Status</TextBlock>
				</Border>
			</Grid>
			<Grid Margin="10,10,10,0" Height="200" Width="Auto">
				<Border BorderBrush="#FF66603A" CornerRadius="20" BorderThickness="2">
					<Border.Background>
						<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
							<GradientStop Color="#FFF7F8E2" Offset="1"/>
							<GradientStop Color="#FFDFE2BB"/>
						</LinearGradientBrush>
					</Border.Background>
					<TextBlock HorizontalAlignment="Center">Recent Posts</TextBlock>
				</Border>
			</Grid>
			<Grid Margin="10,10,10,0" Height="150" Width="Auto">
				<Border BorderBrush="#FF66603A" CornerRadius="20" BorderThickness="2">
					<Border.Background>
						<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
							<GradientStop Color="#FFF7F8E2" Offset="1"/>
							<GradientStop Color="#FFDFE2BB"/>
						</LinearGradientBrush>
					</Border.Background>
					<TextBlock HorizontalAlignment="Center">Sign Up For News Letters</TextBlock>
				</Border>
			</Grid>
        </StackPanel>
        <StackPanel Grid.Row="1" Height="Auto" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
           <sdk:Frame x:Name="ContentFrame" Width="1150" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                   Background="White" Source="/ATI Virtual Classroom;component/Pages/Index.xaml" />
        </StackPanel>
        <StackPanel Grid.Row="2" Grid.ColumnSpan="2" Height="100" VerticalAlignment="Bottom">
            <TextBlock Height="76" HorizontalAlignment="Center" VerticalAlignment="Bottom"><Run Text="Copyright" /></TextBlock>
        </StackPanel>
		</Grid>
	</toolkit:BubbleCremeTheme>	
</UserControl>

Registration Page :

<sdk:Page	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"	xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
	mc:Ignorable="d"
	x:Class="ATI_Virtual_Classroom.Registration" 
	Title="Registration Page"
	d:DesignWidth="640" d:DesignHeight="900" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
	
	
	<toolkit:BubbleCremeTheme d:LayoutOverrides="Width, Height" Background="White">
		<Grid x:Name="LayoutRoot" Background="White">
                <!--All the controls-->
                </Grid>
	</toolkit:BubbleCremeTheme>
</sdk:Page>

Answer 1

Hi,

I have trired to force ScrollBar in various way witht no success.

By the way, you have too much stack panel. You need stack panel if you want to stack more than one control. You do not need a stack panel if only one control in it. For example, you have a stackpanel on one textBock, remove that stackPanel.

I tried to simplified your XAML like this:

        <Grid x:Name="LayoutRoot" Width="1201">
            <Grid.RowDefinitions>
                <RowDefinition Height="100" />
                <RowDefinition Height="*" />
                <RowDefinition Height="100" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="214" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Row="0" Grid.ColumnSpan="2" Orientation="Vertical" Width="Auto" Height="100" VerticalAlignment="Top">
                <Grid Width="Auto">
                        <TextBlock Margin="15,15,15,15">Logo</TextBlock>
                    <StackPanel Width="Auto" Height="100" VerticalAlignment="Top">
                                <TextBox x:Name="txtsearch" Width="250" Height="25" />
                                <Button x:Name="btnsearch" Width="100" Height="25" Content="Search" />
                            <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" VerticalAlignment="Bottom" Margin="0,20,0,0">
                                <Button x:Name="btnregister" Click="LinkClick" Tag="/Pages/Registration.xaml" Content="Register" Width="150"></Button>
                                <Button x:Name="btnhome" Click="LinkClick" Tag="/Pages/Index.xaml" Content="Home" Width="150"></Button>
                                <TextBlock>RSS Feeds</TextBlock>
                            </StackPanel>
                    </StackPanel>
                </Grid>
            </StackPanel>
            <StackPanel Grid.Row="1" Height="Auto" Grid.Column="0" HorizontalAlignment="Stretch">
                    <Border 
                        Margin="10,10,10,0" Height="150" Width="Auto"
                        BorderBrush="#FF66603A" CornerRadius="20" BorderThickness="2" >
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="#FFF7F8E2" Offset="1"/>
                            <GradientStop Color="#FFDFE2BB"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <TextBlock HorizontalAlignment="Center">Login Status</TextBlock>
                </Border>
                <Border 
                    Margin="10,10,10,0" Height="200" Width="Auto"
                    BorderBrush="#FF66603A" CornerRadius="20" BorderThickness="2">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="#FFF7F8E2" Offset="1"/>
                            <GradientStop Color="#FFDFE2BB"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <TextBlock HorizontalAlignment="Center">Recent Posts</TextBlock>
                </Border>
                <Border 
                    Margin="10,10,10,0" Height="150" Width="Auto"
                    BorderBrush="#FF66603A" CornerRadius="20" BorderThickness="2">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="#FFF7F8E2" Offset="1"/>
                            <GradientStop Color="#FFDFE2BB"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <TextBlock HorizontalAlignment="Center">Sign Up For News Letters</TextBlock>
                </Border>
            </StackPanel>
        <!--<sdk:Frame Grid.Row="1" Grid.Column="1" Grid.RowSpan="1" Grid.ColumnSpan="1"
                    x:Name="ContentFrame" 
                    Background="White" Source="/SilverlightApplication1;component/Pages/Index.xaml" 
                           HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>-->
        <Border Grid.Row="1" Grid.Column="1" Grid.RowSpan="1" Grid.ColumnSpan="1" 
                >
                <sdk:Frame 
                    x:Name="ContentFrame"
                    Background="White" Source="/SilverlightApplication1;component/Pages/Index.xaml" 
                           />
            </Border>
        <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Height="76" HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="Copyright" />
        </Grid>

Have fun 

Answer 2

Hi 22990atinesh,

Please set the second row's height to auto instead of *

   <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="100" />
        </Grid.RowDefinitions>

 In addition, you also need to add a ScrollViewer control outside LayoutRoot Grid.

 

Best Regards,

Answer 3

Thanks Shi Ding,

It worked.