第十四章:絕對佈局(五)
AbsoluteLayout和XAML
如您所見,您可以使用Children集合中可用的Add方法之一或通過靜態方法呼叫設定附加屬性,在程式碼中定位和確定AbsoluteLayout的子項的大小。
但是,你如何在XAML中設定AbsoluteLayout子項的位置和大小?
涉及一種非常特殊的語法。 這個語法由早期Abso?luteDemo程式的XAML版本說明,名為AbsoluteXamlDemo:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AbsoluteXamlDemo.AbsoluteXamlDemoPage">
<AbsoluteLayout Padding="50">
<BoxView Color="Accent"
AbsoluteLayout.LayoutBounds="0, 10, 200, 5" />
<BoxView Color="Accent"
AbsoluteLayout.LayoutBounds="0, 20, 200, 5" />
<BoxView Color="Accent"
AbsoluteLayout.LayoutBounds="10, 0, 5, 65" />
<BoxView Color="Accent"
AbsoluteLayout.LayoutBounds="20, 0, 5, 65" />
<Label Text="Stylish Header"
FontSize="24"
AbsoluteLayout.LayoutBounds="30, 25, AutoSize, AutoSize" />
<Label AbsoluteLayout.LayoutBounds="0, 80, AutoSize, AutoSize">
<Label.FormattedText>
<FormattedString>
<Span Text="Although " />
<Span Text="AbsoluteLayout"
FontAttributes="Italic" />
<Span Text=
" is usually employed for purposes other
than the display of text using " />
<Span Text="Label"
FontAttributes="Italic" />
<Span Text=
", obviously it can be used in that way.
The text continues to wrap nicely
within the bounds of the container
and any padding that might be applied." />
</FormattedString>
</Label.FormattedText>
</Label>
</AbsoluteLayout>
</ContentPage>
程式碼隱藏檔案僅包含InitializeComponent呼叫。
這是第一個BoxView:
<BoxView Color="Accent"
AbsoluteLayout.LayoutBounds="0, 10, 200, 5" />
在XAML中,附加的可繫結屬性表示為由類名(Ab?soluteLayout)和以句點分隔的屬性名(LayoutBounds)組成的屬性。 每當您看到這樣的屬性時,它始終是一個附加的可繫結屬性。 這是該屬性語法的唯一應用。
總之,類名和屬性名的組合僅在三個特定上下文中出現在XAML中:如果它們顯示為元素,則它們是屬性元素。 如果它們顯示為屬性,則它們是附加的可繫結屬性。 並且類名和屬性名的唯一其他上下文是對x:Static標記擴充套件的定義。
AbsoluteLayout.LayoutBounds屬性通常設定為由逗號分隔的四個數字。 您還可以將AbsoluteLayout.LayoutBounds表示為屬性元素:
<BoxView Color="Accent">
<AbsoluteLayout.LayoutBounds>
0, 10, 200, 5
</AbsoluteLayout.LayoutBounds>
</BoxView>
這四個數字由BoundsTypeConverter而不是RectangleTypeConverter解析,因為BoundsTypeConverter允許對寬度和高度部分使用AutoSize。 您可以在AbsoluteXamlDemo XAML檔案中看到AutoSize引數:
<Label Text="Stylish Header"
FontSize="24"
AbsoluteLayout.LayoutBounds="30, 25, AutoSize, AutoSize" />
Or you can leave them out:
<Label Text="Stylish Header"
FontSize="24"
AbsoluteLayout.LayoutBounds="30, 25" />
您在XAML中指定的附加可繫結屬性的奇怪之處在於它們並不存在! AbsoluteLayout中沒有名為LayoutBounds的欄位,屬性或方法。有一個名為LayoutBoundsProperty的BindableProperty型別的公共靜態只讀欄位,並且有名為SetLayoutBounds和GetLayoutBounds的公共靜態方法,但沒有任何名為LayoutBounds的方法。 XAML解析器將語法識別為引用附加的可繫結屬性,然後在AbsoluteLayout類中查詢LayoutBoundsProperty。從那裡,它可以使用該BindableProperty物件和BoundsTypeConverter中的值在目標檢視上呼叫SetValue。
Chessboard系列程式似乎不太可能在XAML中複製,因為該檔案需要32個BoxView例項而沒有迴圈的好處。但是,ChessboardXaml程式顯示瞭如何以隱式樣式指定BoxView的兩個屬性,包括AbsoluteLayout.LayoutFlags附加的可繫結屬性:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ChessboardXaml.ChessboardXamlPage">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="5, 25, 5, 5"
Android="5"
WinPhone="5" />
</ContentPage.Padding>
<ContentPage.Resources>
<ResourceDictionary>
<Style TargetType="BoxView">
<Setter Property="Color" Value="#004000" />
<Setter Property="AbsoluteLayout.LayoutFlags" Value="All" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentView SizeChanged="OnContentViewSizeChanged">
<AbsoluteLayout x:Name="absoluteLayout"
BackgroundColor="#F0DC82"
VerticalOptions="Center"
HorizontalOptions="Center">
<BoxView AbsoluteLayout.LayoutBounds="0.00, 0.00, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.29, 0.00, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.57, 0.00, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.86, 0.00, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.14, 0.14, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.43, 0.14, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.71, 0.14, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="1.00, 0.14, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.00, 0.29, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.29, 0.29, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.57, 0.29, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.86, 0.29, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.14, 0.43, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.43, 0.43, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.71, 0.43, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="1.00, 0.43, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.00, 0.57, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.29, 0.57, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.57, 0.57, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.86, 0.57, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.14, 0.71, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.43, 0.71, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.71, 0.71, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="1.00, 0.71, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.00, 0.86, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.29, 0.86, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.57, 0.86, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.86, 0.86, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.14, 1.00, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.43, 1.00, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="0.71, 1.00, 0.125, 0.125" />
<BoxView AbsoluteLayout.LayoutBounds="1.00, 1.00, 0.125, 0.125" />
</AbsoluteLayout>
</ContentView>
</ContentPage>
是的,它是很多單獨的BoxView元素,但你不能爭論檔案的清潔度。 程式碼隱藏檔案只是調整寬高比:
public partial class ChessboardXamlPage : ContentPage
{
public ChessboardXamlPage()
{
InitializeComponent();
}
void OnContentViewSizeChanged(object sender, EventArgs args)
{
ContentView contentView = (ContentView)sender;
double boardSize = Math.Min(contentView.Width, contentView.Height);
absoluteLayout.WidthRequest = boardSize;
absoluteLayout.HeightRequest = boardSize;
}
}
相關文章
- 第十四章:絕對佈局(三)
- Flutter基礎-012-Stack絕對佈局Flutter
- 第五大容器佈局——流式佈局
- 佈局管理器——相對佈局
- UICollectionView左對齊流水佈局、右對齊流水佈局UIView
- DependentLayout相對佈局
- android佈局------RelativeLayout(相對佈局)詳解Android
- PyQt5程式設計(23):在視窗中佈局元件—絕對定位QT程式設計元件
- 保安日記:前端學習第十三篇之移動端佈局rem佈局前端REM
- 第五章:Android佈局Android
- RelativeLayout相對佈局
- 使用 Flex 佈局與其他普通佈局的簡單對比Flex
- 移動端第十八章 rem適配佈局REM
- 列表數字對齊佈局
- Flask教程第十四章:AjaxFlask
- 第十四章 處理影象
- 第十四章 HTTP請求HTTP
- Android入門教程 | UI佈局之RelativeLayout 相對佈局AndroidUI
- android 相對佈局,程式碼建立imageview,佈局居中問題AndroidView
- 第四章 Vlookup函式示例-相對引用還是絕對引用函式
- 第十五篇:C程式的儲存空間佈局C程式
- 三欄佈局 五中解決方式
- CSS三欄佈局的五種寫法CSS
- CSS佈局 --- 居中佈局CSS
- css佈局-float佈局CSS
- Flutter學習之”相對佈局“Flutter
- DialogPane對話方塊佈局
- 達芬奇密碼 第十四章密碼
- css-前端實現左中右三欄佈局的常用方法:絕對定位,聖盃,雙飛翼,flex,table-cell,網格佈局等CSS前端Flex
- 居中佈局、三欄佈局
- qt 佈局---表單佈局QT
- java:佈局方法(流佈局)Java
- flex佈局(彈性佈局)Flex
- 佈局技巧:合併佈局
- 第十四章 openwrt 安裝 pythonPython
- 第十四章 http請求(bjsuo)HTTPJS
- CSS 佈局之水平居中佈局CSS
- CSS佈局之三欄佈局CSS