垂直滚动 - 在可见区域下方添加内容并设计 UI - Windows Phone 8.1 XAML C#

Question

我想向页面添加可垂直滚动的内容。

我使用 5 个 300 像素的网格高度拆分了垂直 space，并添加了滚动查看器，效果很好。

问题是 Visual Studio 在 XAML 可视化编辑器中只显示 2 个网格高度，剩下的 3 个到底部，什么都看不见。

但是，如果使用 XAML 代码将项目指定给剩余的网格，它们就位。

如何在可视化编辑器中查看它们并设计我的 UI？

谢谢。

Answer 1

可能有更好的方法，但我会在下面post我的解决方法。

在您的 <Page> 中指定最大设计高度，如下所示：

<Page
    x:Class="YOUR_CLASS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YOUR_CLASS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    d:DesignHeight="2000">

关键是：d:DesignHeight="your_height"

然后你可以强制它绘制"hidden"内容，但是它看起来有点丑。

例如：

<Grid>
    <ScrollViewer>
    <Grid Height="2000">
        <Grid.RowDefinitions>
            <RowDefinition Height="200*"/>
            <RowDefinition Height="200*"/>
            <RowDefinition Height="200*"/>
            <RowDefinition Height="200*"/>
            <RowDefinition Height="200*"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="4" Background="Red">
            <Border Background="Red" Height="200" Width="200" ></Border>
        </Grid>
    </Grid>
    </ScrollViewer>
</Grid>

将导致

垂直滚动 - 在可见区域下方添加内容并设计 UI - Windows Phone 8.1 XAML C#

Vertical Scrolling - Add content below visible area and Design UI - Windows Phone 8.1 XAML C#

c#

xaml

visual-studio-2013

windows-phone-8.1