Xaml Scrollviewer not showing the full Grid content

Question

I made a product page but the scrollviewer does not show everything that is in that grid. I have a feeling that is has something to do with my row definitions I hope someone can help me XAML:

<Page
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="729.552">
<Page.Resources>

</Page.Resources>

<Grid x:Name="LayoutRoot" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData2.xaml}" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Grid.ChildrenTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </Grid.ChildrenTransitions>

    <!--TODO: Content should be placed within the following grid-->
    <Grid x:Name="ContentPanel" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Pivot x:Name="ProductHub" HorizontalAlignment="Left" VerticalAlignment="Top">
            <PivotItem x:Name="ProductPivot" Header="Item" DataContext="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Top" Height="680">
                <ScrollViewer Width="336" Height="670" HorizontalAlignment="Left" VerticalAlignment="Top" >
                    <Grid x:Name="ContentGrid" Height="auto" Margin="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" MinHeight="278"/>
                            <RowDefinition Height="30*"/>
                            <RowDefinition Height="auto" MinHeight="251"/>
                            <RowDefinition Height="77*"/>
                            <RowDefinition Height="34*"/>
                        </Grid.RowDefinitions>
                        <TextBlock x:Name="TBlockTitle" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="{Binding result.item.title}" VerticalAlignment="Top" Height="20" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData.xaml}"/>
                        <Image x:Name="ImageProduct" HorizontalAlignment="Left" Height="160" Margin="10,49,0,0" VerticalAlignment="Top" Width="316" Stretch="Fill" Source="{Binding result.item.images.Item330}" Tapped="ImgProduct_Click" />
                        <TextBlock x:Name="BtnFavorite" HorizontalAlignment="Left" Margin="10,214,0,0" TextWrapping="Wrap" Text="&#xE006;" VerticalAlignment="Top" FontFamily="Segoe MDL2 Assets" FontSize="20" Height="20" Width="20" />
                        <TextBlock x:Name="TBlockHiddenSEO" HorizontalAlignment="Left" Margin="298,10,-6,0" TextWrapping="Wrap" Text="{Binding result.item.seo_name}" VerticalAlignment="Top" Opacity="0" Height="40" Width="44"/>
                        <TextBlock x:Name="textBlockCurrency" HorizontalAlignment="Left" Margin="192,218,0,0" TextWrapping="Wrap" Text="{Binding result.item.currency_symbol}" VerticalAlignment="Top" Height="20" Width="8"/>
                        <TextBlock x:Name="textBlockPrice" HorizontalAlignment="Left" Margin="205,218,0,0" TextWrapping="Wrap" Text="{Binding result.item.price}" VerticalAlignment="Top" Height="20" Width="28"/>
                        <TextBlock x:Name="textBlockLookAmmount" HorizontalAlignment="Left" Margin="10,258,0,0" TextWrapping="Wrap" Text="{Binding result.item.views}" VerticalAlignment="Top" Height="20" Width="16" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData.xaml}"/>
                        <TextBlock x:Name="textBlockWatchedText" HorizontalAlignment="Left" Margin="31,258,0,0" TextWrapping="Wrap" Text="x bekeken sinds" VerticalAlignment="Top" Height="20" Width="105"/>
                        <TextBlock x:Name="textBlockDate" HorizontalAlignment="Left" Margin="141,258,0,0" TextWrapping="Wrap" Text="{Binding result.item.placed}" VerticalAlignment="Top" Height="20" Width="81" d:DataContext="{d:DesignData /SampleData/RootObjectSampleData.xaml}"/>
                        <StackPanel x:Name="StPanelUser" Grid.Row="1" Margin="0,10,0,20"/>
                        <TextBlock x:Name="textBlockDescription" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="{Binding result.item.description}" VerticalAlignment="Top" Width="316" Grid.Row="1"/>
                        <TextBlock x:Name="textBlockShipping" HorizontalAlignment="Left" Margin="10,1,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Shipping" VerticalAlignment="Top" Height="20" Width="59"/>
                        <TextBlock x:Name="textBlockState" HorizontalAlignment="Left" Margin="10,26,0,0" Grid.Row="2" TextWrapping="Wrap" Text="State" VerticalAlignment="Top" Height="20" Width="59"/>
                    </Grid>
                </ScrollViewer>
            </PivotItem>

        </Pivot>

    </Grid>
    <ProgressRing HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="ProgressRing"/>
</Grid>

Thank you

Answer 1

I'm pretty sure, that the parent element of your scrollviewer has a smaller height than the scrollviewer itself - the height of the scrollviewer sets the height of the control, not the heigh of the content...

As consequence, if the scrollviewer is 200px greater than the parent control - the last 200px of the scrollviewer are cut off

Answer 2

Remove Height="670" in the ScrollViewer. If you set the height for a ScrollViewer, then it displays the controls that fits in the given height

 <ScrollViewer Width="336"  HorizontalAlignment="Left" VerticalAlignment="Top" >
   ....
   ....
 </ScrollViewer>

.

<Window x:Class="minimizeApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid >     
        <ScrollViewer Width="336"  HorizontalAlignment="Left" VerticalAlignment="Top" >
            <Grid x:Name="ContentGrid" Height="auto" Margin="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" MinHeight="278"/>
                    <RowDefinition Height="30*"/>
                    <RowDefinition Height="auto" MinHeight="251"/>
                    <RowDefinition Height="77*"/>
                    <RowDefinition Height="34*"/>
                </Grid.RowDefinitions>
                <TextBlock x:Name="TBlockTitle" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="title" VerticalAlignment="Top" Height="20" />
                <Image x:Name="ImageProduct" HorizontalAlignment="Left" Height="160" Margin="10,49,0,0" VerticalAlignment="Top" Width="316" Stretch="Fill" Source="Images/graph1.jpg"  />
                <TextBlock x:Name="BtnFavorite" HorizontalAlignment="Left" Margin="10,214,0,0" TextWrapping="Wrap" Text="&#xE006;" VerticalAlignment="Top" FontFamily="Segoe MDL2 Assets" FontSize="20" Height="20" Width="20" />
                <TextBlock x:Name="TBlockHiddenSEO" HorizontalAlignment="Left" Margin="298,10,-6,0" TextWrapping="Wrap" Text="name" VerticalAlignment="Top" Opacity="0" Height="40" Width="44"/>
                <TextBlock x:Name="textBlockCurrency" HorizontalAlignment="Left" Margin="192,218,0,0" TextWrapping="Wrap" Text="currency" VerticalAlignment="Top" Height="20" Width="8"/>
                <TextBlock x:Name="textBlockPrice" HorizontalAlignment="Left" Margin="205,218,0,0" TextWrapping="Wrap" Text="price" VerticalAlignment="Top" Height="20" Width="28"/>
                <TextBlock x:Name="textBlockLookAmmount" HorizontalAlignment="Left" Margin="10,258,0,0" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="16" />
                <TextBlock x:Name="textBlockWatchedText" HorizontalAlignment="Left" Margin="31,258,0,0" TextWrapping="Wrap" Text="x bekeken sinds" VerticalAlignment="Top" Height="20" Width="105"/>
                <TextBlock x:Name="textBlockDate" HorizontalAlignment="Left" Margin="141,258,0,0" TextWrapping="Wrap" Text="placed" VerticalAlignment="Top" Height="20" Width="81" />
                <StackPanel x:Name="StPanelUser" Grid.Row="1" Margin="0,10,0,20"/>
                <TextBlock x:Name="textBlockDescription" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="description" VerticalAlignment="Top" Width="316" Grid.Row="1"/>
                <TextBlock x:Name="textBlockShipping" HorizontalAlignment="Left" Margin="10,1,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Shipping" VerticalAlignment="Top" Height="20" Width="59"/>
                <TextBlock x:Name="textBlockState" HorizontalAlignment="Left" Margin="10,26,0,0" Grid.Row="2" TextWrapping="Wrap" Text="State" VerticalAlignment="Top" Height="20" Width="59"/>
                <TextBlock x:Name="textBlockpayment" HorizontalAlignment="Left" Margin="10,51,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Payment" VerticalAlignment="Top" Height="20" Width="72"/>
                <TextBlock x:Name="textBlockType" HorizontalAlignment="Left" Margin="10,76,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Type" VerticalAlignment="Top" Height="20" Width="59"/>
                <TextBlock x:Name="textBlockRole" HorizontalAlignment="Left" Margin="10,101,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Role" VerticalAlignment="Top" Height="20" Width="59"/>
                <TextBlock x:Name="textBlockShipping_FillIn" HorizontalAlignment="Left" Margin="141,1,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
                <TextBlock x:Name="textBlockState_FillIn" HorizontalAlignment="Left" Margin="141,26,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
                <TextBlock x:Name="textBlockpayment_FillIn" HorizontalAlignment="Left" Margin="141,51,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
                <TextBlock x:Name="textBlockType_FillIn" HorizontalAlignment="Left" Margin="141,76,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
                <TextBlock x:Name="textBlockRole_FillIn" HorizontalAlignment="Left" Margin="141,101,0,0" Grid.Row="2" TextWrapping="Wrap" Text="1323" VerticalAlignment="Top" Height="20" Width="0"/>
                <TextBlock x:Name="textBlockAdvertiser" HorizontalAlignment="Left" Margin="10,149,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Adverteerder" VerticalAlignment="Top" Height="20" Width="87"/>
                <TextBlock x:Name="textBlockLocation" HorizontalAlignment="Left" Margin="10,174,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Locatie" VerticalAlignment="Top" Height="20" Width="87"/>
                <TextBlock x:Name="textBlockPhone" HorizontalAlignment="Left" Margin="10,231,0,0" Grid.Row="2" TextWrapping="Wrap" Text="Telefoon" VerticalAlignment="Top" Height="20" Width="87"/>
                <TextBlock x:Name="textBlockAdvertiser_FillIn" HorizontalAlignment="Left" Margin="141,149,0,0" Grid.Row="2" TextWrapping="Wrap" Text="name" VerticalAlignment="Top" Height="20"  Width="37"/>
                <TextBlock x:Name="textBlockLocation_FillIn" HorizontalAlignment="Left" Margin="141,174,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20"  Width="8"/>
                <TextBlock x:Name="textBlockProvince_FillIn" HorizontalAlignment="Left" Margin="141,199,0,0" Grid.Row="2" TextWrapping="Wrap" Text="123" VerticalAlignment="Top" Height="20" Width="0"/>
                <TextBlock x:Name="textBlockPhone_FillIn" HorizontalAlignment="Left" Margin="141,231,0,0" Grid.Row="2" TextWrapping="Wrap" Text="phone" VerticalAlignment="Top" Height="20"/>
            </Grid>
        </ScrollViewer>
    </Grid>
</Window>