美文网首页Xamarin.Forms
了解 Xamarin.Forms 创建移动应用程序的基础知识 2

了解 Xamarin.Forms 创建移动应用程序的基础知识 2

作者: 鼠标与键盘的故事 | 来源:发表于2020-03-09 13:28 被阅读0次

    简介

    演示如何在 Grid 中布局。

    1. 在 XAML 中创建 Xamarin.Forms Grid。
    2. 指定 Grid 的列和行。
    3. 涉及 Grid 中多列或多行的内容。

    创建 Grid

    1. 打开已有项目 AwesomeApp。
    2. 添加新项 GridPage.xaml。
    3. 编辑 GridPage.xaml:
    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"
                 x:Class="AwesomeApp.GridPage">
        <ContentPage.Content>
            <Grid Margin="20,35">
                <Label Text="设置Grid.Margin,可控制Grid外边距。" />
            </Grid>
        </ContentPage.Content>
    </ContentPage>
    

    *除 Margin 属性外,还可在 Grid 上设置 Padding 属性。 Padding 指定 Grid 的内边距。

    1. 编辑 App.xaml.cs:
    public App()
    {
        InitializeComponent();
        MainPage = new GridPage();
    }
    
    1. 调试 Android 上的应用:

    行列配置

    1. 编辑 GridPage.xaml:
    <Grid Margin="20,35,20,20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*" />
            <ColumnDefinition Width="0.5*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        <Label Text="Column 0, Row 0" />
        <Label Grid.Column="1"
               Text="Column 1, Row 0" />
        <Label Grid.Row="1"
               Text="Column 0, Row 1" />
        <Label Grid.Column="1"
               Grid.Row="1"
               Text="Column 1, Row 1" />
    </Grid>
    
    1. 调试 Android 上的应用:

    有效的宽度值和高度值为:

    • Auto 对列或行进行大小调整以适应内容。
    • 比例值,将列和行的大小设置为剩余空间的比例。 以 * 结尾表示比例值。
    • 绝对值,使用特定的固定值调整列或行的大小。

    *可以使用 ColumnSpacing 和 RowSpacing 属性设置 Grid 中列和行之间的间距

    跨行跨列

    1. 编辑 GridPage.xaml:
    <Grid Margin="20,35,20,20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*" />
            <ColumnDefinition Width="0.5*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <Label Grid.ColumnSpan="2"
               Text="This text uses the ColumnSpan property to span both columns." />
        <Label Grid.Row="1"
               Grid.RowSpan="2"
               Text="This text uses the RowSpan property to span two rows." />
    </Grid>
    

    ColumnSpan 跨越多列,RowSpan 跨越多行

    1. 调试 Android 上的应用:

    相关文章

      网友评论

        本文标题:了解 Xamarin.Forms 创建移动应用程序的基础知识 2

        本文链接:https://www.haomeiwen.com/subject/ejqpdhtx.html