xaml - 手机和平板电脑的不同布局（1 | 2 列）

Question

我试图根据热门设备手机或平板电脑在运行时使用不同的布局。

我想在平板电脑上使用 2 列布局，并在手机上保持单列布局。

在桌面设备上，我还希望有一些控件可以跨越 2 列，而在手机设备上，布局应该是单列，我的意思是要显示许多元素（3/4 整页高度......）。

预期布局：

Answer 1

您可以利用 来实现它OnIdiom，这是 xaml 中的一个示例：（还要注意ColumnDefinitionsand的新简化语法RowDefinitions）

<Grid RowDefinitions="*,*,*,*,*,*,*,auto"
      ColumnDefinitions="50*,50*">

<BoxView BackgroundColor="Red"
             Grid.Row="0"
             Grid.Column="0"
             Grid.ColumnSpan="2"/>

    <BoxView BackgroundColor="YellowGreen"
             Grid.Row="1"
             Grid.Column="0"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="Aqua"
             Grid.Row="{OnIdiom Phone=2,
                                Tablet=1}"
             Grid.Column="{OnIdiom Phone=0,
                                   Tablet=1}"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="Bisque"
             Grid.Row="{OnIdiom Phone=3,
                                Tablet=2}"
             Grid.Column="0"
             Grid.ColumnSpan="2"/>

    <BoxView BackgroundColor="Purple"
             Grid.Row="{OnIdiom Phone=4,
                                Tablet=3}"
             Grid.Column="0"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="Blue"
             Grid.Row="{OnIdiom Phone=4,
                                Tablet=3}"
             Grid.Column="{OnIdiom Phone=0,
                                   Tablet=1}"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="DimGray"
             Grid.Row="{OnIdiom Phone=6,
                                Tablet=4}"
             Grid.Column="0"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="HotPink"
             Grid.Row="{OnIdiom Phone=7,
                                Tablet=4}"
             Grid.Column="{OnIdiom Phone=0,
                                   Tablet=1}"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>
</Grid>

电话

药片