Xamarin.Forms的布局

 布局控件之StackLayout

<StackLayout BackgroundColor="#A8A8A8">
            <Label Text="布局1"/>
        </StackLayout>
//嵌套StackLayout_1
            var stackLayout_1 = new StackLayout() { BackgroundColor = Color.FromHex("#A8A8A8") };
            stackLayout_1.Children.Add(new Label() { Text = "C#编写布局1" });
            stackLayout.Children.Add(stackLayout_1);

 Xamarin.Forms 的布局方向

<StackLayout>

            <StackLayout Orientation="Horizontal" BackgroundColor="#A8A8A8">
                <Label Text="水平"/>
                <Label Text="水平"/>
                <Label Text="水平"/>
            </StackLayout>

            <StackLayout Orientation="Vertical" BackgroundColor="#A8A8A8">
                <Label Text="垂直"/>
                <Label Text="垂直"/>
                <Label Text="垂直"/>
            </StackLayout>

 

//设置以水平方式布局
            var stackLayout_1 = new StackLayout()
            {
                Orientation = StackOrientation.Horizontal,
                BackgroundColor = Color.FromHex("#A8A8A8")
            };
            stackLayout_1.Children.Add(new Label() { Text = "水平" });
            stackLayout_1.Children.Add(new Label() { Text = "水平" });
            stackLayout_1.Children.Add(new Label() { Text = "水平" });

            //设置以垂直方式布局
            var stackLayout_2 = new StackLayout()
            {
                Orientation = StackOrientation.Vertical,
                BackgroundColor = Color.FromHex("#A8A8A8")
            };
            stackLayout_2.Children.Add(new Label() { Text = "垂直" });
            stackLayout_2.Children.Add(new Label() { Text = "垂直" });
            stackLayout_2.Children.Add(new Label() { Text = "垂直" });

布局控件之Grid

Grid.RowDefinitions属性将Grid控件分行,属性值为RowDefinition标签,每一个RowDefinition标签将该Grid对象分为一行;

Grid.ColumnDefinitions属性将Grid控件分列,属性值为ColumnDefinition标签,每一个ColumnDefinition标签将该Grid对象分为一列;

三行三列

<Grid x:Name="LayoutRoot" Background="Blue">  
    <Grid.ColumnDefinitions>  
        <ColumnDefinition></ColumnDefinition>  
        <ColumnDefinition></ColumnDefinition>  
    </Grid.ColumnDefinitions>  
    <Grid.RowDefinitions>  
        <RowDefinition></RowDefinition>  
        <RowDefinition></RowDefinition>  
        <RowDefinition></RowDefinition>  
    </Grid.RowDefinitions>  
  
    <Button Grid.Column="0" Grid.Row="0" Content=" 0  , 0"></Button>  
    <Button Grid.Column="1" Grid.Row="1" Content=" 1  , 1"></Button>  
    <Button Grid.Column="2" Grid.Row="2" Content=" 2  , 2"></Button>  
</Grid>

跨行跨列 


 <StackLayout BackgroundColor="#91e2f4" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
                <Label Text="第0行1列,跨2列"/>
            </StackLayout>
<StackLayout BackgroundColor="#91e2f4" Grid.Row="3" Grid.Column="2" Grid.RowSpan="2">
                <Label Text="第3行2列,跨2行"/>
            </StackLayout>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值