我怎样才能使通用 windows 应用响应式 UI 像新闻应用

Question

我想做一个响应式 UI 设计，类似于 Windows 10 中新闻和邮件应用程序中使用的设计。很难解释让我们看一下屏幕截图。

在 "Interests" 页面中，如果我像在移动设备中那样调整 window 的大小，它只会显示页面的左侧部分。

点击后"My Interest"

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

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

我想做类似这样的做法。有模板吗？我可以轻松制作吗？

Answer 1

您要查找的字词是 Adaptive UI。并没有真正的模板来为您完成所有工作（例如，您仍然必须完成主要的布局工作，否则所有应用程序看起来都一样）。

您将使用 VisualStateTriggers 和 RelativePanel 控件来布局您的控件并根据某些 cut-off 点（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。

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

Answer 2

巴特给出的答案是正确的，因为实现这一目标需要技术。但是有一个模板/示例可用，称为 Master - Detail layout 可以满足您的需要。

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

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

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

我怎样才能使通用 windows 应用响应式 UI 像新闻应用

How can I make universal windows application responsive UI like News app

navigation

xaml

win-universal-app