CODEWITHSUNDEEP
c#xamlwindows-runtimewindows-10
Heshan
Heshan

Reputation: 985

How to push top content of the grid upwards in a WinRT (Windows 10) C# app?

I want a similar behavior like what happens when we tap on a TextBox. The keyboard pops up pushing the TextBox upwards. When I tap a button, the hidden Grid (PushContainer) should pop up pushing the content up. I've tried the following code with no luck. Currently, list view goes all the way down to the bottom underneath the Grid. It just pops up on top of the list view.

<Grid x:Name="MainGrid" Background="#FF97C5C5">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <ListView x:Name="lstView" ItemTemplate="{StaticResource StatusTemplate}" Background="#FFC91010">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
    <Grid x:Name="PushContainer" Visibility="Collapsed" Grid.RowSpan="1" Grid.Row="1"  Height="300"/>
</Grid>

Any help would be appreciated.

Upvotes: 0

Views: 139

Answers (1)

Rob Caplan - MSFT
Rob Caplan - MSFT

Reputation: 21919

To slide a control up like the soft keyboard does animate a RenderTransform to shift it to the top. Just changing the Visibility on an object and forcing a new layout will pop rather than slide.

Here's a quick sample. You could also define the storyboard, etc. in Xaml. For demonstration purposes it's controlled by an AppBarToggleButton and will create a CompositeTransform on an element which doesn't have one.

For more information see Storyboarded animations on MSDN.

private void AppBarToggleButton_Checked(object sender, RoutedEventArgs e)
{
    // Almost (but not quite) to the top of the page
    SlideVertical(MainGrid,-1 * ActualHeight + 100);
}

private void AppBarToggleButton_Unchecked(object sender, RoutedEventArgs e)
{
    SlideVertical(MainGrid,0);
}

private void SlideVertical(UIElement target, double endPos)
{
    Storyboard sb = new Storyboard();
    DoubleAnimation da = new DoubleAnimation();

    // Over how long to perform the animation. 
    Duration dur = TimeSpan.FromMilliseconds(100);
    da.Duration = dur;
    sb.Duration = dur;

    // From current location to endPos
    var ct = target.RenderTransform as CompositeTransform;
    if (ct == null)
    {

        // Give up if we had some other type of transform
        if (target.RenderTransform != null)
            return;
        // That way we don't step on a non-CompositeTransform
        // RenderTransform if one already exists.
        // That would be bad.
        ct = new CompositeTransform();
        target.RenderTransform = ct;
    }
    double startPos = ct.TranslateY;

    da.From = startPos;
    da.To = endPos;
    sb.Children.Add(da);

    // Choose the element to slide
    Storyboard.SetTarget(da, target);
    // Animate the target's CompositeTransform.TranslateY
    Storyboard.SetTargetProperty(da, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");

    sb.Begin();
}

Upvotes: 1

Related Questions