Как сделать горизонтальные выровненные элементы вертикальными на маленьких экранах?

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, Это хорошо объяснено в Адаптивном макете документов.

Вот пример приложения, которое делает то, что вы искали:

<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>