荣耀彩票代理

  • 热门专题

Xamarin+Prism开发详解五:页面布局基础知识

作者:云中客  发布日期:2016-12-26 20:23:34
  • SHUOSHIZAIDEYANJIUXamarinDAOXIANZAI,ZIJIJIUMEISHEJICHUYIKUANHAODEUI,JIBENDOUZAIYANJIUHOUTAILUOJIZHILEIDE!ZUOWEIXamarinAIHAOZHE,YIXIEJIANDANDEYEMIANBUJUZHISHIHAISHIBIBEIDE。

    布局常见标签:

    StackLayout  AbsoluteLayout RelativeLayout  Grid  ScrillViewer

    荣耀彩票代理ZHUYAONAGERENZUIXIHUANDEStackLayoutHEGridZUOSHUOMING。

    1、StackLayout

    TONGGUOTAKEYISHEZHINEIBUZIYUANSUDEZONGXIANGHUOZHEHENGXIANGBUJU,MORENWEIZONGXIANG。

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout> <BoxView Color='Red'/> <BoxView Color='Green'/> <BoxView Color='Blue'/> <BoxView Color='Aqua'/> </StackLayout> </ContentPage>

    XIANSHIJIEGUO

    Simulator Screen Shot 19 Dec 2016, 1.27.36 AM

    1.1、通过设置Orientation的属性可以切换纵向Vertical(默认)与横向Horizontal显示。

    SHEZHIHorizontal(HENGXIANG)KANKANXIAOGUO:

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout Orientation='Horizontal'> <BoxView Color='Red'/> <BoxView Color='Green'/> <BoxView Color='Blue'/> <BoxView Color='Aqua'/> </StackLayout> </ContentPage>

    XIANSHIJIEGUO

    Simulator Screen Shot 19 Dec 2016, 1.31.32 AM

    1.2、通过Spacing可以设置子元素间的间隔空白大小。

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout Orientation='Horizontal'
    Spacing
    ='30'> <BoxView Color='Red'/> <BoxView Color='Green'/> <BoxView Color='Blue'/> <BoxView Color='Aqua'/> </StackLayout> </ContentPage>

    XIANSHIJIEGUO

    Simulator Screen Shot 19 Dec 2016, 1.34.17 AM

    1.3、通过HorizontalOptions和VerticalOptions可以设置子元素在Stacklayout里面的布局位置。

    HorizontalOptionsHEVerticalOptionsKEYIZHIDINGRUXIAZHI:

    Start: 开始位置布局元素 Center: 居中布局元素 End: 结束位置布局元素 Fill: 扩展元素占用整个布局宽带 (默认设置) StartAndExpand: 开始位置布局元素并填充空白 CenterAndExpand: 居中布局元素并填充空白 EndAndExpand: 结束位置布局元素并填充空白 FillAndExpand: 填充所有空白

    SHOUXIANKANKANStart,End,Center,FillDEXIAOGUO:

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout Orientation='Horizontal'
    Spacing
    ='30'> <BoxView Color='Red' VerticalOptions='Start'/> <BoxView Color='Green' VerticalOptions='End'/> <BoxView Color='Blue' VerticalOptions='Center'/> <BoxView Color='Aqua' VerticalOptions='Fill'/> </StackLayout> </ContentPage>

    XIANSHIJIEGUO

    Simulator Screen Shot 19 Dec 2016, 11.56.49 Z喎?http://chsp8.com/pro/pkqt/QTQ==" border="0" height="505" src="http://chsp8.com/uploadfile/files/2016/1226/201612261940481296.png" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Simulator Screen Shot 19 Dec 2016, 11.56.49 Z喎?http://chsp8.com/pro/pkqt/" target="_blank" class="keylink">QTQ==" width="284" />

    荣耀彩票代理JIEXIALAIKANKANAndExpandXIANGGUANDESHEZHI。

    首先设置StartAndExpand

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout> <BoxView Color='Red' VerticalOptions='StartAndExpand'/> <BoxView Color='Blue'/> </StackLayout> </ContentPage>

    XIANSHIJIEGUO

    Simulator Screen Shot 20 Dec 2016, 12.05.24 AM

    EndAndExpand情况

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout> <BoxView Color='Red' VerticalOptions='EndAndExpand'/> <BoxView Color='Blue'/> </StackLayout> </ContentPage>

    XIANSHIJIEGUO

    Simulator Screen Shot 24 Dec 2016, 3.51.11 PM

    FillAndExpand情况

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout> <BoxView Color='Red' VerticalOptions='FillAndExpand'/> <BoxView Color='Blue'/> </StackLayout> </ContentPage>

    XIANSHIJIEGUO

    Simulator Screen Shot 24 Dec 2016, 3.52.29 PM

    DUOGEAndExpandSHEZHIDESHIHOU,KONGBAIDAXIAOSHIJUNDENGFENPEI。BIRUXIAMIANLIANGGEKONGJIANFENBIESHEZHIWEIFillAndExpandYUStarAndExpand,SHANGBANBUFENQUANSHIHONGSETIANCHONG,HOUBANBUFENKAISHIWEIZHIWEILANSE。

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <StackLayout> <BoxView Color='Red' VerticalOptions='FillAndExpand'/> <BoxView Color='Blue' VerticalOptions='StartAndExpand'/> </StackLayout> </ContentPage>

    XIANSHIJIEGUO

    Simulator Screen Shot 24 Dec 2016, 3.58.27 PM

    荣耀彩票代理TONGGUODUOGEStackLayoutPEIHEYEKEYISHIXIANFUZADEBUJU

    Simulator Screen Shot 24 Dec 2016, 4.37.09 PM

    DAIMA

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness'
    iOS
    ='0, 20, 0, 0'/> </ContentPage.Padding> <StackLayout> <!-- 第1个项目 --> <StackLayout Orientation='Horizontal'
    VerticalOptions
    ='Start'> <BoxView Color='Red'/> <StackLayout HorizontalOptions='FillAndExpand'> <StackLayout Orientation='Horizontal'> <StackLayout Orientation='Vertical'
    VerticalOptions
    ='FillAndExpand'> <StackLayout Orientation='Horizontal'> <Label Text='@lxb'/> <Label Text='@Xamarin' HorizontalOptions='FillAndExpand' /> </StackLayout> <Label Text='xxxxxxxxxxxxxx'/> </StackLayout> </StackLayout> <StackLayout Orientation='Horizontal'
    HorizontalOptions
    ='EndAndExpand'> <Button Text='Like' HorizontalOptions='End'/> <Button Text='RT' HorizontalOptions='End'/> <Button Text='Quote' HorizontalOptions='End'/> </StackLayout> </StackLayout> </StackLayout> <!-- 第2个项目 --> <StackLayout Orientation='Horizontal'
    VerticalOptions
    ='Start'> <BoxView Color='Red'/> <StackLayout HorizontalOptions='FillAndExpand'> <StackLayout Orientation='Horizontal'> <StackLayout Orientation='Vertical'
    VerticalOptions
    ='FillAndExpand'> <StackLayout Orientation='Horizontal'> <Label Text='@lxb'/> <Label Text='@Xamarin' HorizontalOptions='FillAndExpand' /> </StackLayout> <Label Text='xxxxxxxxxxxxxx'/> </StackLayout> </StackLayout> <StackLayout Orientation='Horizontal'
    HorizontalOptions
    ='EndAndExpand'> <Button Text='Like' HorizontalOptions='End'/> <Button Text='RT' HorizontalOptions='End'/> <Button Text='Quote' HorizontalOptions='End'/> </StackLayout> </StackLayout> </StackLayout> </StackLayout> </ContentPage>

    2、Grid

    GridXIANGDANGYUBIAOGEBUJU,ZHEIZAIWANGYEBUJUYONGDEZUIDUO。TONGGUORowDefinitionsSHUXINGDERowDefinitionDINGYIYIXING,TONGGUOColumnDefinitionsSHUXINGDEColumnDefinitionDINGYIYILIE。MORENQINGKUANGXIASHIPINGJUNFENPEIGEGEDANYUANGEDAXIAO。GEGEKONGJIANTONGGUOSHEZHIGrid.RowHEGrid.ColumKEYIZHIDINGXIANSHIZAINAGEDANYUANGE。

    BIRUXIAMIANSANXINGSANLIEDELIZI:

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness' iOS='20' /> </ContentPage.Padding> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <BoxView Color='Red' /> <BoxView Color='Blue' Grid.Row='0' Grid.Column='1' /> <BoxView Color='Aqua' Grid.Row='0' Grid.Column='2' /> <BoxView Color='Maroon' Grid.Row='1' Grid.Column='0' /> <BoxView Color='Navy' Grid.Row='1' Grid.Column='1' /> <BoxView Color='Silver' Grid.Row='1' Grid.Column='2' /> <BoxView Color='Purple' Grid.Row='2' Grid.Column='0' /> <BoxView Color='Lime' Grid.Row='2' Grid.Column='1' /> <BoxView Color='Yellow' Grid.Row='2' Grid.Column='2' /> </Grid> </ContentPage>

    XIANSHIJIEGUO

    Simulator Screen Shot 24 Dec 2016, 4.59.52 PM

    2.1、大小设置

    荣耀彩票代理RowDefinitionKEYISHEZHIXINGGAODUHeight,ColumnDefinitionKEYISHEZHILIEKUANDUWidth。SHEZHIDEZHIKEYIWEISHUZI(GUDINGDAXIAO),YEKEYIWEI1*,2*ZHILEIDAI*DE(ANBILIFENPEIDAXIAO),YEKEYISHEZHIWEIAuto(ZIDONGDIAOZHENGDAXIAO)。BIRUXIAMIANDELIZI:

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness'
    iOS
    ='0, 20, 0, 0'/> </ContentPage.Padding> <Grid> <!-- 行定义 --> <Grid.RowDefinitions> <RowDefinition Height='15' /> <!-- 固定 --> <RowDefinition Height='1*' /> <!-- 1比2分配 --> <RowDefinition Height='2*' /> </Grid.RowDefinitions> <!-- 列定义 --> <Grid.ColumnDefinitions> <ColumnDefinition Width='Auto' /> <!-- 根据布局自动设置 --> <ColumnDefinition Width='*' /> <!-- 默认值*(和1*一样) --> <ColumnDefinition /> </Grid.ColumnDefinitions> <BoxView Color='Red' /> <!-- 默认设置在0,0单元格 --> <BoxView Color='Blue' Grid.Row='0'
    Grid.Column
    ='1' /> <BoxView Color='Aqua' Grid.Row='0'
    Grid.Column
    ='2' /> <BoxView Color='Maroon' Grid.Row='1'
    Grid.Column
    ='0' /> <BoxView Color='Navy' Grid.Row='1'
    Grid.Column
    ='1' /> <BoxView Color='Silver' Grid.Row='1'
    Grid.Column
    ='2' /> <BoxView Color='Purple' Grid.Row='2'
    Grid.Column
    ='0' /> <BoxView Color='Lime' Grid.Row='2'
    Grid.Column
    ='1' /> <BoxView Color='Yellow' Grid.Row='2'
    Grid.Column
    ='2' /> </Grid> </ContentPage>

    XIANSHIJIEGUO

    Simulator Screen Shot 24 Dec 2016, 5.59.49 PM

    2.2、复数行,复数列设置

    Grid.RowSpanSHEZHIFUSHUXING,Grid.ColumnSpanSHEZHIFUSHULIE。

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness'
    iOS
    ='0, 20, 0, 0'/> </ContentPage.Padding> <Grid> <!-- 行定义 --> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <!-- 列定义 --> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <BoxView Color='Red' Grid.RowSpan='2' Grid.ColumnSpan='3' /> <BoxView Color='Blue' Grid.Row='2' Grid.Column='1' Grid.ColumnSpan='2'/> </Grid> </ContentPage>

    XIANSHIXIAOGUO

    Simulator Screen Shot 24 Dec 2016, 6.07.17 PM

    TONGYANGKEYIJIANDANSHIXIANSHANGMIANStackLayoutDEBUJU。

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness' iOS='0, 20, 0, 0' /> </ContentPage.Padding> <StackLayout VerticalOptions='Start'> <Grid> <!-- 行定义 --> <Grid.RowDefinitions> <RowDefinition Height='Auto' /> <RowDefinition Height='Auto' /> <RowDefinition Height='Auto' /> </Grid.RowDefinitions> <!-- 列定义 --> <Grid.ColumnDefinitions> <ColumnDefinition Width='Auto' /> <ColumnDefinition /> <ColumnDefinition Width='Auto' /> <ColumnDefinition Width='Auto' /> <ColumnDefinition Width='Auto' /> </Grid.ColumnDefinitions> <BoxView Color='Red' Grid.RowSpan='3' /> <StackLayout Orientation='Horizontal' Grid.Column='1' Grid.ColumnSpan='4'> <Label Text='@lxb' /> <Label Text='@Xamarin' /> </StackLayout> <Label Grid.Row='1' Grid.Column='1' Grid.ColumnSpan='4' Text='xxxxxxxxxx' /> <Button Grid.Row='2' Grid.Column='2' Text='Like' /> <Button Grid.Row='2' Grid.Column='3' Text='RT' /> <Button Grid.Row='2' Grid.Column='4' Text='Quote' /> </Grid> <Grid> <!-- 行定义 --> <Grid.RowDefinitions> <RowDefinition Height='Auto' /> <RowDefinition Height='Auto' /> <RowDefinition Height='Auto' /> </Grid.RowDefinitions> <!-- 列定义 --> <Grid.ColumnDefinitions> <ColumnDefinition Width='Auto' /> <ColumnDefinition /> <ColumnDefinition Width='Auto' /> <ColumnDefinition Width='Auto' /> <ColumnDefinition Width='Auto' /> </Grid.ColumnDefinitions> <BoxView Color='Red' Grid.RowSpan='3' /> <StackLayout Orientation='Horizontal' Grid.Column='1' Grid.ColumnSpan='4'> <Label Text='@lxb' /> <Label Text='@Xamarin' /> </StackLayout> <Label Grid.Row='1' Grid.Column='1' Grid.ColumnSpan='4' Text='xxxxxxxxxx' /> <Button Grid.Row='2' Grid.Column='2' Text='Like' /> <Button Grid.Row='2' Grid.Column='3' Text='RT' /> <Button Grid.Row='2' Grid.Column='4' Text='Quote' /> </Grid> </StackLayout> </ContentPage>

    XIANSHIXIAOGUO

    Simulator Screen Shot 24 Dec 2016, 6.28.21 PM

    3、余白设置

    YUBAITONGGUOSHIYONGPaddingHEMarginJINXINGSHEZHI。PaddingSHISHEZHIKONGJIANWAICEYUBAI,MarginSHISHEZHIKONGJIANNEICEYUBAI。

    3.1、设置方法

    四个方向一个值设置 左右和上下两个值设置 四个方向不同值设置

    (BIRU:

    荣耀彩票代理【20】:SIGEFANGXIANGDOUZIWEI20;

    【20,10】ZUOYOUWEI20,SHANGXIAWEI10;

    【10,15,20,25】ZUOBUYUBAIWEI10,SHANGBUYUBAI15,YOUYUBAIWEI20,XIABUYUBAI25。)

    <?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:prism='clr-namespace:Prism.Mvvm;assembly=Prism.Forms' prism:ViewModelLocator.AutowireViewModel='True' x:Class='LayoutTest.Views.MainPage' Title='MainPage'> <ContentPage.Padding> <OnPlatform x:TypeArguments='Thickness' iOS='20' /> </ContentPage.Padding> <Grid Margin='20,10'> <BoxView Color='Red'/> </Grid> </ContentPage>

    YEMIANJULIBIANKUANG20,GridZUOYOUJULIYEMIAN20,SHANGXIAJULIYEMIAN10。

    Simulator Screen Shot 24 Dec 2016, 7.20.02 PM

    总结

    SHIYONGxamarin.formsKAIFAYINGYONG,ZHIYAOZHANGWOSHIYONGStackLayoutYUGridBUJU,JIBENSHANGKEYISHIXIANGEZHONGXIANGYAODEBUJU。DANGRANYAOXIANGUIHENPIAOLIANG,TUPIANSHEJISHIBIXUDE。

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规