如何在 WinRT (Windows 10) C# 应用程序中向上推送网格的顶部内容？

Question

我想要类似的行为，就像我们点击 TextBox 时发生的那样。弹出键盘向上推动 TextBox。当我点击一个按钮时，隐藏的网格 (PushContainer) 应该会弹出，将内容向上推。我尝试了以下代码但没有成功。目前，列表视图一直向下显示到网格下方的底部。它只是在列表视图的顶部弹出。

<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>

如有任何帮助，我们将不胜感激。

Answer 1

要像软键盘一样向上滑动控件，请为 RenderTransform 设置动画以将其移动到顶部。只需更改对象的可见性并强制使用新布局，就会弹出而不是滑动。

这是一个快速示例。您还可以在 Xaml 中定义故事板等。出于演示目的，它由 AppBarToggleButton 控制，并将在没有的元素上创建 CompositeTransform。

有关详细信息，请参阅 MSDN 上的 Storyboarded animations。

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();
}

如何在 WinRT (Windows 10) C# 应用程序中向上推送网格的顶部内容？

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

c#

xaml

windows-runtime

windows-10