如何使水平对齐的元素在小屏幕上垂直对齐？

Question

在我的应用配置文件页面中，我水平显示了一些按钮，在 iPhone 7 中看起来不错，但在 iPhone 5 中看起来不太好，因为屏幕尺寸太小.我想让按钮的布局在小屏幕上垂直对齐。请看下面的示例代码。

`

<App Background="#eeef">
  <Fuse.iOS.StatusBarConfig ux:Name="statusBarConfig" Style="Dark"/>
    <StackPanel ux:Name="textPanel" Alignment="Center">
      <Text ux:Class="TitleText" Color="#000" TextAlignment="Center" Padding="2"/>
      <TitleText ux:Name="topText">This is a long text aligned horizontally</TitleText>
      <TitleText ux:Name="bottomText">This is a another long text</TitleText>
    </StackPanel>
</App>

`

这两个文本在所有屏幕中都是水平对齐的。如何让它在小屏幕上自动垂直对齐？

Answer 1

我们发现，您的问题实际上是关于更改 StackPanel 的堆叠方向，而不是关于对齐。

为此，您需要使用 WhileWindowSize 和 WhileWindowPortrait/WhileWindowLandscape 等触发器。在 Responsive layout docs.

中有很好的解释

这是一个示例应用程序，可以满足您的需求：

<App>
    <Text ux:Class="TitleText" Color="#000" TextAlignment="Center" Padding="2"/>
    <!-- create a new trigger shorthand for when we are running on a "big screen" -->
    <WhileWindowSize ux:Class="WhileBigScreen" GreaterThan="599,1" />

    <!-- by default (on small screens in portrait), stack things vertically -->
    <StackPanel ux:Name="textPanel" Alignment="Center">
        <TitleText ux:Name="topText">This is a long text aligned horizontally</TitleText>
        <TitleText ux:Name="bottomText">This is a another long text</TitleText>
    </StackPanel>

    <!-- when running on a big screen, stack things horizontally disregarding what the device orientation is -->
    <WhileBigScreen>
        <Change textPanel.Orientation="Horizontal" />
    </WhileBigScreen>
    <!-- when running on a small screen, only stack things horizontally when in landscape -->
    <WhileBigScreen Invert="true">
        <WhileWindowLandscape>
            <Change textPanel.Orientation="Horizontal" />
        </WhileWindowLandscape>
    </WhileBigScreen>
</App>

如何使水平对齐的元素在小屏幕上垂直对齐？

How to make horizontal aligned elements to vertical on small screens?

fusetools