Question

t may be a basic question. But I can’t figure it out after several hours research.
I have an item detail page. I want to add another grid in it whenever the scrollview reaches the right bottom. Right now I partially achieved this goal by adding a column in the xaml and toggle its visibility property.

<Grid x:Name="body" Style="{StaticResource LayoutRootStyle}">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Grid x:Name="dynamicGrid" Grid.Column="1" Grid.RowSpan="2" Visibility="Collapsed">
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="360"/>
            <RowDefinition Height="360"/>
        </Grid.RowDefinitions>
        <TextBlock .../>
        <GridView .../>
        <GridView .../>
    </Grid>

And in code behind

if (//Reach the right side)
{
    if (related.Visibility == Visibility.Collapsed)
    {
    related.Visibility = Windows.UI.Xaml.Visibility.Visible;
    }
}

if (// Move away from right border)
{
    related.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}

It works to some point. But the animation is jumpy. Sometime, the scrollviewer even refuse to go back to the beginning. I guess the problem is when I adding/removing ui control at runtime, the scrollviewer doesn’t handle it quite well.

I’m wondering is there a better way to achieve this feature? Any suggestion is welcomed.

Answer 1

You can add a child control in a grid by calling grid.Children.Add(newChildControl). You can also assign the child control to specific row/column/span by calling Grid.SetRow/Column/RowSpan/ColumnSpan.