xaml - 具有状态和转换的全景式 XAML 布局

Question

在我的应用程序中，我希望有一个如图所示的页面布局：

它有两个内容块（描绘为普通和阴影矩形）和两个状态。在正常（第一种）状态下，普通块占据所有屏幕并且完全可见，而阴影隐藏在屏幕后面。在第二种状态下，阴影块是完全可见的，并且一小部分普通块在屏幕上，其余部分是隐藏的。

我也希望从一种状态到另一种状态有一个很好的过渡。我知道我可能需要为此使用 ViewStates。我不明白我应该使用什么 XAML 控件来表示内容块。那么问题来了：哪些 XAML 控件可以让我尽可能优雅简洁地表达这种布局？

Answer 1

有 2 行的网格怎么样。一个数据透视控件，第一行的每个数据透视项目中有 2 个状态，第二行的固定内容。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Red">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <phone:Pivot Margin="0,-24,0,0">
        <phone:PivotItem Background="Blue">
            <StackPanel>
                <TextBlock Text="Transition content 1" />
            </StackPanel>
        </phone:PivotItem>
        <phone:PivotItem Background="Brown">
            <StackPanel>
                <TextBlock Text="Transition content 2" />
            </StackPanel>
        </phone:PivotItem>
    </phone:Pivot>

    <StackPanel Grid.Row="1" Margin="12,0,12,0">
        <TextBlock Text="Fixed content" />
    </StackPanel>
</Grid>

在顶部框上滑动将作为标准枢轴动画进行动画处理。

如果您不希望用户能够轻弹而是以编程方式控制这两种状态，那么您可以简单地添加IsHitTestVisible="False"根枢轴控件，然后设置SelectedIndex枢轴上的 以在状态之间切换。