Windows Store Metro APP如何适配屏幕大小

Posted 2023-04-13

【中文标题】Windows Store Metro APP如何适配屏幕大小

【英文标题】：Windows Store Metro APP how to adapt to screen size

【发布时间】：2015-01-29 11:43:18

【问题描述】：

我想知道如何让我的 Metro Windows 8 应用程序适应屏幕尺寸。 换句话说：有点响应式的设计。

通过 Visual Studio 2013 使用模拟器，我可以测试多个屏幕，但我的应用似乎根本无法正常运行。

我还使用模拟器查看了一些 Windows 8/8.1 内置应用程序的行为：它非常出色且干净。

我怎样才能做到这么多？

我已经为我的网格找到了部分答案：Windows 8 App Screen Layout

但这还不够。

这张照片显示了我正在尝试做的事情：

http://image.noelshack.com/fichiers/2014/49/1417438224-stack.png

无论屏幕解决方案是什么，我都需要保持该布局，最好是横向模式。

在 Windows Phone 中，它看起来就像一个魅力：不需要做任何事情。

感谢您的帮助！

【问题讨论】：

你的截图有什么问题？

Nothing :) 它只是显示了我想要实现的目标。无论屏幕大小如何，我都需要让我的应用程序显示此布局。例如，注册按钮必须始终位于右下角。登录部分总是在中心等...我该怎么做？？

【参考方案1】：

这是非常基本的 XAML 知识。

<Grid>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    </Grid.RowDefinitions>


// Grid.Row="1" Grid.Column="1" - your grid with Login/Password. Use VerticalAligment="Center", HorizontalAligment="Center" 

// Grid.Row="2" Grid.Column="2" - your register button. Use VerticalAligment="Bottom", HorizontalAligment="Right"

</Grid>

我个人建议您将“注册”按钮作为链接放在“登录”按钮下方。

【讨论】：

感谢您提供此解决方案。我会尝试使用它。我对 XAML 的了解有限，因此可能需要一些时间。顺便说一句，我需要所有这些行吗？我不能只和一个一起工作吗？谢谢！

还有其他设计是可能的。这个是最容易理解的。

啊，是的，谢谢，我开始明白了！我在哪里可以找到这样的其他设计？但是如果你的足够了，我会保留它。

XAML 类似于 html。您可以尝试两行一列。带有登录数据的网格应与中心/底部对齐（行 = 0）。行中的注册按钮 = 1 并与右/下对齐。行大小=0 大约是屏幕的 2/3。

优秀。我的应用程序现在采用了更好的形式。使用行和列大小很像 android 中的 GridLayout。谢谢！