• 熱門專題

Xamarin+Prism開發詳解五|-云联惠最新消息:頁麵布局基礎知識

作者_--诺基亚5802xm:雲中客  發布日期||_苏木科:2016-12-26 20:23:34
Tag標簽___长春小浩博:基礎知識  布局  頁麵  
  • 說實在的研究Xamarin到現在-__1234成人网站,自己就沒設計出一款好的UI-灰熊精英,基本都在研究後台邏輯之類的_何再贵!作為Xamarin愛好者_2019管家婆马报图今晚资料,一些簡單的頁麵布局知識還是必備的-|云购彩票。

    布局常見標簽|_|江陵肃父母是谁:

    StackLayout  AbsoluteLayout RelativeLayout  Grid  ScrillViewer

    主要拿個人最喜歡的StackLayout和Grid做說明-|qq农场美人鱼。

    1_-veor moda、StackLayout

    通過它可以設置內部子元素的縱向或者橫向布局|_-陕西华商网,默認為縱向_|2125火影世界。

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

    顯示結果

    Simulator Screen Shot 19 Dec 2016, 1.27.36 AM

    1.1|--鸟巢 地铁、通過設置Orientation的屬性可以切換縱向Vertical(默認)與橫向Horizontal顯示|__芳龄十三。

    設置Horizontal(橫向)看看效果--|优信彩票大发快3:

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

    顯示結果

    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>

    顯示結果

    Simulator Screen Shot 19 Dec 2016, 1.34.17 AM

    1.3|-105彩票怎么玩、通過HorizontalOptions和VerticalOptions可以設置子元素在Stacklayout裏麵的布局位置-|-038彩票骗局。

    HorizontalOptions和VerticalOptions可以指定如下值||-东汉书院校歌:

    Start: 開始位置布局元素 Center: 居中布局元素 End: 結束位置布局元素 Fill: 擴展元素占用整個布局寬帶 (默認設置) StartAndExpand: 開始位置布局元素並填充空白 CenterAndExpand: 居中布局元素並填充空白 EndAndExpand: 結束位置布局元素並填充空白 FillAndExpand: 填充所有空白

    首先看看Start_-|n78软件,End_|_04年双色球事件,Center-盈鼎国际,Fill的效果-_|富平县人民政府网:

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

    顯示結果

    Simulator Screen Shot 19 Dec 2016, 11.56.49 Z喎?http://www.weishengjin.biz/pro/pkqt/QTQ==" border="0" height="505" src="http://www.weishengjin.biz/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://www.weishengjin.biz/pro/pkqt/" target="_blank" class="keylink">QTQ==" width="284" />

    接下來看看AndExpand相關的設置|-爱国者同盟网。

    首先設置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>

    顯示結果

    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>

    顯示結果

    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>

    顯示結果

    Simulator Screen Shot 24 Dec 2016, 3.52.29 PM

    多個AndExpand設置的時候-|众发娱乐彩票是真是假,空白大小是均等分配--百立乐奶粉最新事件。比如下麵兩個控件分別設置為FillAndExpand與StarAndExpand|--银港在线,上半部分全是紅色填充|天津津工超市火车票代售点,後半部分開始位置為藍色|-订造。

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

    顯示結果

    Simulator Screen Shot 24 Dec 2016, 3.58.27 PM

    通過多個StackLayout配合也可以實現複雜的布局

    Simulator Screen Shot 24 Dec 2016, 4.37.09 PM

    代碼

    <?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|234下载彩票软件、Grid

    Grid相當於表格布局-|_重庆省道103,這在網頁布局用的最多__英姿带。通過RowDefinitions屬性的RowDefinition定義一行-_乒乓球胶皮价格 优个网,通過ColumnDefinitions屬性的ColumnDefinition定義一列--|艳照门 网盘。默認情況下是平均分配各個單元格大小|-7k7k奥拉星。各個控件通過設置Grid.Row和Grid.Colum可以指定顯示在哪個單元格_|-十字星是什么意思。

    比如下麵三行三列的例子||-雪佛兰新乐骋:

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

    顯示結果

    Simulator Screen Shot 24 Dec 2016, 4.59.52 PM

    2.1||脉动时空测速中心、大小設置

    RowDefinition可以設置行高度Height_-_天津足疗一条街,ColumnDefinition可以設置列寬度Width_亿贝是不是传销。設置的值可以為數字(固定大小)|_钢坯成本,也可以為1*||-北大教授,2*之類帶*的(按比例分配大小)|_|注册送彩金不限id,也可以設置為Auto(自動調整大小)|__成都水疗论坛。比如下麵的例子_-维修psp:

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

    顯示結果

    Simulator Screen Shot 24 Dec 2016, 5.59.49 PM

    2.2|-_万文网校、複數行||_木丹青,複數列設置

    Grid.RowSpan設置複數行||comicsviewer怎么用,Grid.ColumnSpan設置複數列|-|朱森林简历。

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

    顯示效果

    Simulator Screen Shot 24 Dec 2016, 6.07.17 PM

    同樣可以簡單實現上麵StackLayout的布局|-|黄山奇石天狗望月。

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

    顯示效果

    Simulator Screen Shot 24 Dec 2016, 6.28.21 PM

    3|-深圳第一现场、餘白設置

    餘白通過使用Padding和Margin進行設置_|_房室交叉。Padding是設置控件外側餘白||_234彩票安卓100,Margin是設置控件內側餘白-_多普达t8388微信。

    3.1|_|038彩票苹果官方版、設置方法

    四個方向一個值設置 左右和上下兩個值設置 四個方向不同值設置

    (比如|__pdf7 0专业版下载:

    【20】--_云购梦想:四個方向都自為20-__许雯may;

    【20|__往期聚划算,10】左右為20__-长春修鞋,上下為10_l龙;

    【10---众博彩票app,15_--芦荟棉是什么面料,20|致富彩登录,25】左部餘白為10--大显mt888,上部餘白15-阿发祥,右餘白為20__|360时时彩平台,下部餘白25_好看的科幻电影推荐。)

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

    頁麵距離邊框20_-设备维护记录表,Grid左右距離頁麵20|_|234彩票,上下距離頁麵10|_娱乐天地注册。

    Simulator Screen Shot 24 Dec 2016, 7.20.02 PM

    總結

    使用xamarin.forms開發應用-|-苏州人才新干线网,隻要掌握使用StackLayout與Grid布局|_青山湖教体局,基本上可以實現各種想要的布局-_|腾讯a股大赛2013。當然要想UI很漂亮-韩版恶作剧之吻收视率,圖片設計是必須的|手机qq2010java通用版。

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯係方式
本站內容來自於互聯網,僅供用於網絡技術學習,學習中請遵循相關法律法規
金牌彩票360彩票快乐飞艇E乐彩6号彩票qq分分彩

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!