Windows 手机上的响应式设计

Question

我对应用程序开发还很陌生。我苦苦挣扎的一件事是确保我的应用在不同屏幕尺寸的设备上看起来相同。

这是我使用的逻辑：

    public MainPage()
    {
        this.InitializeComponent();
        placeUI();
    }

placeUI() 方法是我测量屏幕宽度和高度的方法。例如，如果我需要将我的组件从左侧放置 10%，我只需将其在坐标上的 x 位置乘以 0.1。

我的问题是 - 它是使 UI 响应不同屏幕尺寸的标准方法还是有更简单的方法？谢谢！

Answer 1

请参阅 Define page layouts with XAML 了解用于响应式设计的多种技术。该页面针对通用 Windows 应用程序 (Windows 10)，但除了 RelativePanel 和 AdaptiveTriggers 之外，所有内容也适用于 Windows Phone 8.1 运行时应用程序。

如果您只想要一个轻度响应式设计，例如将项目放置在距边缘 10% 的恒定位置的示例，那么您可以在网格控件中设置布局，并将列设置为占 Window:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="9*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="1">This is 10% from the left</TextBlock>
</Grid>

虽然这对于单个项目来说似乎很多，但对于具有多个元素的典型布局来说通常效果很好。

对于具有更多控件的更繁忙的设计，您可能希望根据屏幕大小移动它们。 50% 的宽屏幕对于给定的文本块可能足够，而 50% 的窄屏幕对于相同的文本可能太小了。该应用程序可能希望从宽屏幕上的水平布局切换到窄屏幕上的垂直布局。该应用程序可以使用视觉状态来移动控件或完全切换控件（例如，用于宽屏幕的 GridView 和用于窄屏幕的 ListView，两者都绑定到相同的底层数据）。

Windows 手机上的响应式设计

Responsive design on Windows phones

windows

windows-phone-8.1