Question

我想制作一个与Windows 10中的新闻和邮件应用程序类似的响应式UI设计。很难解释让我们看一下截图。

在“兴趣”页面中，如果我像移动设备一样调整窗口大小，它只会显示页面的左侧部分。

点击“我的兴趣”后

它显示了页面的右侧部分。

并且如果我想回去，它遵循这条路线。但它实际上只有一页有两个不同的部分。

我想与此方法类似。是否有模板可以轻松制作？

Answer 1

您正在寻找的术语是Adaptive UI。没有真正的模板可以为你做所有的工作（因为，你仍然需要做主要的布局工作，否则所有的应用程序看起来都一样）。

您将使用VisualStateTriggers和RelativePanel控件来布局控件并根据某些截止点（320-548-1020像素宽度或任意数量的更改）更改布局选择），就像下面链接的实验室中的部分样本一样。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="VisualStateMin320">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="320"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Metadata.(Grid.Column)" Value="0" />
                    <Setter Target="Metadata.(Grid.Row)" Value="1" />
                    <Setter Target="Metadata.(Grid.ColumnSpan)" Value="2" />
                    <Setter Target="Metadata.(Grid.RowSpan)" Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="VisualStateMin548">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="548"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Metadata.(Grid.Column)" Value="0" />
                    <Setter Target="Metadata.(Grid.Row)" Value="1" />
                    <Setter Target="Metadata.(Grid.ColumnSpan)" Value="2" />
                    <Setter Target="Metadata.(Grid.RowSpan)" Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="VisualStateMin1024">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1024"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Metadata.(Grid.Column)" Value="1" />
                    <Setter Target="Metadata.(Grid.Row)" Value="0" />
                    <Setter Target="Metadata.(Grid.ColumnSpan)" Value="1" />
                    <Setter Target="Metadata.(Grid.RowSpan)" Value="2" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    ....

</Grid>

开始使用的一个好处是关注Channel 9 video。

还有一个很棒的动手实验室（实验2）可以从GitHub的演示者那里获得。

Answer 2

巴特给出的答案在这个意义上是正确的，需要采用这些技术来实现这一目标。但是有一个模板/示例可用，称为Master - Detail布局，可以满足您的需要。

一般使用，如果有足够的地方，在左侧显示列表，在右侧显示列表中所选项目的详细信息。如果屏幕太小，请在1页上显示列表，并在下一页显示所选项目的详细信息。

请参阅此处的代码参考：https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlMasterDetail

此处设计参考：https://msdn.microsoft.com/en-us/library/windows/apps/dn997765.aspx

如何制作通用Windows应用程序响应式UI，如新闻应用程序

2 个答案: