Xamarin.FormsEsnek düzen
Örneği indirinBir alt görünüm koleksiyonunu yığınlama veya sarmalama için esnek düzen kullanın.
, Xamarin.FormsFlexLayout Sürüm 3,0 ' de yenidir Xamarin.Forms . Bu, yaygın olarak esnek düzen veya Esnek kutuolarak bilinen CSS Esnek kutu düzeni modülünütemel alır. bu nedenle, düzen içinde alt öğeleri düzenlemek için birçok esnek seçenek içerdiğinden çağrılır.
FlexLayout, Xamarin.FormsStackLayout alt öğelerini bir yığında yatay ve dikey olarak düzenlerken öğesine benzerdir. Bununla birlikte, FlexLayout tek bir satıra veya sütuna sığmayacak kadar çok fazla varsa ve ayrıca çeşitli ekran boyutlarına uyum sağlamak için çok fazla seçenek içeriyorsa, alt öğelerini sarmalama özelliğine de sahiptir.
FlexLayoutLayout<View>FlexLayout "Data-LinkType =" Absolute-path ">türündeki bir _Layout_1_Children Xamarin_Forms türetilir ve devralır ChildrenIList<View> .
FlexLayout altı ortak bağlanabilir özelliği ve alt öğelerinin boyutunu, yönünü ve hizalamasını etkileyen beş bağlantılı bağlanabilir özelliği tanımlar. (Ekli bağlanabilir özelliklere alışkın değilseniz, eklenen özelliklermakalesine bakın.) Bu özellikler ayrıntılı olarak ayrıntılı Özellikler ve ekli bağlanabilir Özelliklerüzerinde aşağıdaki bölümlerde ayrıntılı olarak açıklanmıştır. Ancak bu makale, bazı yaygın kullanım senaryolarında bu özelliklerin birçoğunu daha basit bir şekilde açıklayan bir bölüm ile başlar. Makalenin sonuna doğru, FlexLayoutFlexLayoutbirleştirme hakkında bilgi edineceksiniz.
Genel kullanım senaryoları
Esnek Layouttanıtımlar örnek programı, bazı ortak kullanımlarını gösteren ve özelliklerini denemeyi denemenize olanak tanıyan çeşitli sayfalar içerir.
Basit bir yığın için esnek düzen kullanma
Basit yığın sayfası, , StackLayout ancak daha basit bir biçimlendirme ile nasıl yerine geçecek olduğunu gösterir. Bu örnekteki her şey XAML sayfasında tanımlanmıştır. FlexLayoutDört alt içerir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.SimpleStackPage"
Title="Simple Stack">
<FlexLayout Direction="Column"
AlignItems="Center"
JustifyContent="SpaceEvenly">
<Label Text="FlexLayout in Action"
FontSize="Large" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
<Button Text="Do-Nothing Button" />
<Label Text="Another Label" />
</FlexLayout>
</ContentPage>
bu sayfa iOS, Android ve Evrensel Windows Platformu üzerinde çalışıyor:
Basit sayfasıFlexLayoutFlexLayout dosyasında öğesinin üç özelliği gösterilmiştir:
Xamarin_Forms _FlexLayout_Direction "Data-LinkType =" Absolute-path ">
Directionözelliği, numaralandırmanın bir değerine ayarlanırFlexDirection. Varsayılan değer:Row. Özelliği olarak ayarlamakColumn, öğesinin altFlexLayoutöğelerinin tek bir sütunda düzenlenebilmesine neden olur.İçindeki öğeler bir
FlexLayoutsütunda düzenlenmişse,FlexLayoutdikey birFlexLayoutve yatayFlexLayoutiçermelidir.Xamarin_Forms _FlexLayout_AlignItems "Data-LinkType =" Absolute-path ">
AlignItemsözelliği türündedirFlexAlignItemsve öğelerin çapraz eksende nasıl hizalandığını belirtir.CenterSeçeneği, her öğenin yatay olarak ortalanmasını sağlar.StackLayoutBu görev için bir yerine bir kullanıyorsanızFlexLayout, her bir öğenin özelliğini ' e atayarak tüm öğeleri ortaırınHorizontalOptionsCenter.HorizontalOptionsÖzelliği bir öğesinin alt öğeleri için çalışmıyorFlexLayout, ancak tekAlignItemsözellik aynı hedefi gerçekleştirir. Gerekirse,AlignSelfAlignItemstek tek öğeler için özelliği geçersiz kılmak üzere eklenmiş bağlanabilir özelliğini kullanabilirsiniz:<Label Text="FlexLayout in Action" FontSize="Large" FlexLayout.AlignSelf="Start" />Bu değişiklik ile, bu,
LabelFlexLayoutokuma sırası soldan sağa olduğunda bu bir sol kenarında konumlandırılır.Xamarin_Forms _FlexLayout_JustifyContent "Data-LinkType =" Absolute-path ">
JustifyContentözelliği türündedirFlexJustifyve öğelerin ana eksende nasıl düzenlendiğini belirtir.SpaceEvenlySeçeneği tüm öğeler arasında eşit olarak tüm öğeler arasında ve ilk öğenin üstünde ve son öğenin altında kalan dikey boşluğu ayırır.Kullanıyorsanız
StackLayout,VerticalOptionsbenzer bir etkiye ulaşmak için her öğenin özelliğini öğesine atamanız gerekirCenterAndExpand. AncakCenterAndExpandseçenek, her bir öğe arasında ilk öğeden önce ve son öğeden sonra olmak üzere en fazla alan ayırır.CenterAndExpandVerticalOptionsÖzelliğini olarak ayarlayarak seçeneğini taklit edebilirsinizJustifyContentFlexLayoutSpaceAround.
Bu FlexLayout Özellikler, aşağıda FlexLayout bölümünde daha ayrıntılı bir şekilde ele alınmıştır.
Öğeleri sarmalama için esnek düzen kullanma
Esnek Layoutdemolar örneğinin fotoğraf sarma sayfasında, alt öğelerini ek satırlara veya sütunlara nasıl kaydırabileceğinizi gösterir. XAML dosyası öğesini örnekleyen FlexLayout ve iki özelliği atar:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.PhotoWrappingPage"
Title="Photo Wrapping">
<Grid>
<ScrollView>
<FlexLayout x:Name="flexLayout"
Wrap="Wrap"
JustifyContent="SpaceAround" />
</ScrollView>
<ActivityIndicator x:Name="activityIndicator"
IsRunning="True"
VerticalOptions="Center" />
</Grid>
</ContentPage>
DirectionBu özelliği FlexLayout ayarlı değildir, bu nedenle Row alt öğelerinin satırlar halinde düzenlendiği ve ana eksenin yatay olduğu anlamına gelir.
Xamarin_Forms _FlexLayout_Wrap "Data-LinkType =" Absolute-path ">Wrap özelliği bir sabit listesi türüdür FlexWrap . Bir satıra sığmayacak kadar çok öğe varsa, bu özellik ayarı öğelerin sonraki satıra kaydırılmasına neden olur.
FlexLayoutÖğesinin bir alt öğesi olduğuna dikkat edin ScrollView . Sayfaya sığacak kadar çok satır varsa, ScrollViewOrientation öğesinin varsayılan özelliği vardır Vertical ve dikey kaydırmaya izin verir.
JustifyContentÖzelliği, her öğenin aynı miktarda boş alana sahip olması için ana eksende (yatay eksen) soltover alanını ayırır.
Arka plan kod dosyası bir örnek fotoğraflar koleksiyonuna erişir ve bunları Children koleksiyonuna ekler FlexLayout :
public partial class PhotoWrappingPage : ContentPage
{
// Class for deserializing JSON list of sample bitmaps
[DataContract]
class ImageList
{
[DataMember(Name = "photos")]
public List<string> Photos = null;
}
public PhotoWrappingPage ()
{
InitializeComponent ();
LoadBitmapCollection();
}
async void LoadBitmapCollection()
{
using (WebClient webClient = new WebClient())
{
try
{
// Download the list of stock photos
Uri uri = new Uri("https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json");
byte[] data = await webClient.DownloadDataTaskAsync(uri);
// Convert to a Stream object
using (Stream stream = new MemoryStream(data))
{
// Deserialize the JSON into an ImageList object
var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList));
ImageList imageList = (ImageList)jsonSerializer.ReadObject(stream);
// Create an Image object for each bitmap
foreach (string filepath in imageList.Photos)
{
Image image = new Image
{
Source = ImageSource.FromUri(new Uri(filepath))
};
flexLayout.Children.Add(image);
}
}
}
catch
{
flexLayout.Children.Add(new Label
{
Text = "Cannot access list of bitmap files"
});
}
}
activityIndicator.IsRunning = false;
activityIndicator.IsVisible = false;
}
}
En üstten alta doğru bir şekilde kaydırılan programın çalıştırıldığı program:
Fotoğraf sayfasıEsnek düzen ile sayfa düzeni
Web tasarımında pagraıl adında standart bir düzen vardır çünkü bu, çok istenen, ancak genellikle mükemmelliğe ihtiyacınız ile daha zor bir düzen biçimidir. Düzen, sayfanın üst kısmındaki üst bilgiden ve alt kısımdaki bir altbilginin yanı sıra sayfanın tam genişliğine Genişlemeden oluşur. Sayfanın merkezini alan ana içeriktir, ancak genellikle içeriğin solunda bir sütunlu menü ve sağ tarafta ise ek bilgiler ( bazen bir arada bir alan olarak adlandırılır) bulunur. CSS esnek kutu düzeni belirtiminin Bölüm 5.4.1 , kutsal bir bir kutu düzeninin nasıl yapılacağını açıklar.
Esnek Layoutdemolar örneğinin kutsal graıl düzen sayfası, bir iç içe geçmiş diğeri kullanılarak bu düzenin basit bir uygulamasını gösterir. Bu sayfa dikey modda bir telefon için tasarlandığından, içerik alanının sol ve sağ tarafında bulunan alanlar yalnızca 50 piksel genişliğinde olur:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.HolyGrailLayoutPage"
Title="Holy Grail Layout">
<FlexLayout Direction="Column">
<!-- Header -->
<Label Text="HEADER"
FontSize="Large"
BackgroundColor="Aqua"
HorizontalTextAlignment="Center" />
<!-- Body -->
<FlexLayout FlexLayout.Grow="1">
<!-- Content -->
<Label Text="CONTENT"
FontSize="Large"
BackgroundColor="Gray"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FlexLayout.Grow="1" />
<!-- Navigation items-->
<BoxView FlexLayout.Basis="50"
FlexLayout.Order="-1"
Color="Blue" />
<!-- Aside items -->
<BoxView FlexLayout.Basis="50"
Color="Green" />
</FlexLayout>
<!-- Footer -->
<Label Text="FOOTER"
FontSize="Large"
BackgroundColor="Pink"
HorizontalTextAlignment="Center" />
</FlexLayout>
</ContentPage>
Burada çalışıyor:
Kutsal sayfasıGezinti ve basılı bölgeler, sol ve sağ tarafta bir ile işlenir BoxView .
FlexLayoutXaml dosyasındaki Birincisi dikey bir ana eksene sahiptir ve bir sütunda düzenlenmiş üç alt öğe içerir. Bunlar üst bilgi, sayfanın gövdesi ve altbilgisi bulunur. İç içe geçmiş, FlexLayout bir satırda düzenlenmiş üç alt öğeye sahip yatay bir ana eksene sahiptir.
Bu programda üç bağlantılı bağlanabilir özellikler gösterilmiştir:
OrderEklenmiş bağlanabilir Özellik ilki üzerinde ayarlanırBoxView. Bu özellik varsayılan değeri 0 olan bir tamsayıdır. Düzen sırasını değiştirmek için bu özelliği kullanabilirsiniz. Genellikle geliştiriciler, sayfanın içeriğini, gezinti öğelerinden ve öğeleri bir kenara kadar biçimlendirme halinde görünmesini tercih eder.Orderİlk üzerinde özelliğininBoxViewdiğer eşdüzey değerden küçük bir değere ayarlanması, satırdaki ilk öğe olarak görünmesine neden olur. Benzer şekilde,Orderözelliğin eşdüzey değerden daha büyük bir değere ayarlanarak bir öğenin son görünmesini sağlayabilirsiniz.BasisBağlı bağlanabilir Özellik iki öğe üzerinde ayarlanır veBoxViewbunlara 50 piksellik bir genişlik verir. Bu özellik,FlexBasisFlexBasisvarsayılan değer olan adlı adlandırılmış bir statik özelliği tanımlayan bir yapıdırAuto.BasisBir piksel boyutu veya öğenin ana eksende ne kadar alan kapladığını belirten bir yüzde değerini belirtmek için öğesini kullanabilirsiniz. Bu, sonraki tüm düzenin temelini oluşturan bir öğe boyutunu belirttiğinden temel olarak adlandırılır.GrowÖzelliği, iç içeLayoutveLabeliçeriği temsil eden alt üzerinde ayarlanır. Bu özellik türündedirfloatve varsayılan değeri 0 ' dır. Pozitif bir değere ayarlandığında, ana eksen üzerindeki kalan tüm alan bu öğeye ve pozitif değerleri ile eşdüzey değerlere ayrılırGrow. Boşluk, ' deki yıldız belirtimi gibi değerlere orantılı olarak ayrılırGrid.İlk
Groweklenen özellik iç içe ayarlanır ve bunun,FlexLayoutFlexLayoutdış içinde kullanılmayan tüm dikey alanı kaplayabileceğini belirtirFlexLayout. İkinciGrowiliştirilmiş özellikLabeliçeriği temsil eden, bu içeriğin iç içinde kullanılmayan tüm yatay boşluğu kaplayabileceğini gösterirFlexLayout.Ayrıca,
Shrinkalt öğelerin boyutu ne kadar aşarsa kullanabileceğiniz benzer bir bağlanmış bağlanabilir özellik de vardırFlexLayoutancak sarmalama istenmez.
Esnek düzene sahip katalog öğeleri
Esnek layoutdemo örneğindeki Katalog öğeleri sayfası, Örnek 1 1,1 ' e benzer, ancak yatay olarak kaydırılabilir bir resim dizisi ve üç montuşunun açıklamalarını görüntüler.
Katalog sayfasıÜç montuşun her biri FlexLayoutFrame , açık bir yükseklik ve genişlik verilen ve ayrıca daha büyük bir alt öğesi olan içinde bulunur FlexLayout . Bu XAML dosyasında, alt öğelerin çoğu FlexLayout stil biçiminde belirtilir, ancak biri örtülü bir stildir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.CatalogItemsPage"
Title="Catalog Items">
<ContentPage.Resources>
<Style TargetType="Frame">
<Setter Property="BackgroundColor" Value="LightYellow" />
<Setter Property="BorderColor" Value="Blue" />
<Setter Property="Margin" Value="10" />
<Setter Property="CornerRadius" Value="15" />
</Style>
<Style TargetType="Label">
<Setter Property="Margin" Value="0, 4" />
</Style>
<Style x:Key="headerLabel" TargetType="Label">
<Setter Property="Margin" Value="0, 8" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="Blue" />
</Style>
<Style TargetType="Image">
<Setter Property="FlexLayout.Order" Value="-1" />
<Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>
<Style TargetType="Button">
<Setter Property="Text" Value="LEARN MORE" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="White" />
<Setter Property="BackgroundColor" Value="Green" />
<Setter Property="BorderRadius" Value="20" />
</Style>
</ContentPage.Resources>
<ScrollView Orientation="Both">
<FlexLayout>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Seated Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
<Label Text=" • Doesn't make a lot of noise" />
<Label Text=" • Often smiles mysteriously" />
<Label Text=" • Sleeps sitting up" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}"
WidthRequest="180"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Banana Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="Watch this monkey eat a giant banana." />
<Label Text=" • More fun than a barrel of monkeys" />
<Label Text=" • Banana not included" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}"
WidthRequest="240"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Face-Palm Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
<Label Text=" • Cynical but not unfriendly" />
<Label Text=" • Seven varieties of grimaces" />
<Label Text=" • Doesn't laugh at your jokes" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}"
WidthRequest="180"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
</FlexLayout>
</ScrollView>
</ContentPage>
İçin örtülü stil, Image öğesinin iki ekli bağlanabilir özelliklerinin ayarlarını içerir Flexlayout :
<Style TargetType="Image">
<Setter Property="FlexLayout.Order" Value="-1" />
<Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>
Order– 1 ayarı ImageFlexLayout alt koleksiyon içerisindeki konumundan bağımsız olarak iç içe geçmiş görünümlerin her birinde öğe görüntülenmesine neden olur. AlignSelfÖğesinin özelliği CenterImage içinde ortalanmasını sağlar FlexLayout . Bu, varsayılan değeri olan özelliğinin ayarını geçersiz kılar, AlignItemsStretch yani Label ve Button alt öğeleri öğesinin tam genişliğine genişletilir FlexLayout .
Üç görünümün her birinde, FlexLayout bir boş, öğesinden Label önce gelir, Button ancak Grow 1 ayarı vardır. Bu, tüm ekstra dikey alanın bu boş alana ayrıldığı anlamına gelir ve bu, Label en alta etkin bir şekilde gönderilir Button .
Ayrıntı halinde bağlanabilir Özellikler
Uygulamasının bazı yaygın uygulamalarını gördüğünüze FlexLayout göre, özellikleri FlexLayout daha ayrıntılı bir şekilde araştırılabilir.
FlexLayoutFlexLayoutyönü ve hizalamayı denetlemek için, kodda veya xaml 'de, kendi üzerinde ayarladığınız altı bağlanabilir özelliği tanımlar. (Bu özelliklerden biri, Xamarin_Forms _FlexLayout_Position "Data-LinkType =" Absolute-path ">Position , bu makalede kapsanmıyor.)
Esnek Layoutdemolar örneğinin deneme sayfasını kullanarak, kalan beş özelliği deneyebilirsiniz. Bu sayfa, bir ile alt öğe eklemenize veya kaldırmanıza FlexLayout ve beş bağlanabilir özelliklerin birleşimlerini ayarlamanıza olanak sağlar. Öğesinin tüm alt öğeleri FlexLayoutLabel , Text özelliği koleksiyondaki konumuna karşılık gelen bir sayı olarak ayarlanan çeşitli renkler ve boyutların görünümleridir Children .
Program başlatıldığında beş Picker Görünüm, bu beş özellik için varsayılan değerleri görüntüler FlexLayout . FlexLayoutEkranın alt kısmına doğru olan üç alt öğe bulunur:
Görünümlerin her birinde Label , içinde öğesine ayrılan alanı gösteren gri bir arka plan bulunur LabelFlexLayout . Kendisinin arka planı FlexLayout gamze mavi. Sol ve sağ tarafta küçük bir kenar boşluğu dışında sayfanın tüm alt alanını kaplar.
Direction özelliği
Xamarin_Forms _FlexLayout_Direction "Data-LinkType =" Absolute-path ">Direction özelliği FlexDirection , dört üye içeren bir sabit listesi türü:
ColumnColumnReverse(veya "Column-Reverse" XAML içinde)Row, varsayılanRowReverse(veya XAML 'de "satır ters")
XAML 'de, sabit listesi üye adlarını küçük harf, büyük harf veya karışık durumda kullanarak bu özelliğin değerini belirtebilir ya da, parantez içinde gösterilen iki ek dizeyi CSS göstergeleriyle aynı olacak şekilde kullanabilirsiniz. ("Sütun-ters" ve "satır-ters" dizeleri FlexDirectionTypeConverter XAML ayrıştırıcısı tarafından kullanılan sınıfta tanımlanmıştır.)
İşte (soldan sağa), yönü, Column yönü ve yönü gösteren deneme sayfası ColumnReverse :
yönüReverseSeçenekler için, öğelerin sağ tarafta veya altta başladığına dikkat edin.
Wrap özelliği
Xamarin_Forms _FlexLayout_Wrap "Data-LinkType =" Absolute-path ">Wrap özelliği FlexWrap , üç üye içeren bir sabit listesi türü:
NoWrap, varsayılanWrapReverse(veya XAML 'de "Wrap-ters çevirme")
Soldan sağa, bu ekranlar NoWrapWrapReverse 12 alt için ve seçeneklerini gösterir:
WrapÖzelliği olarak ayarlandığında NoWrap ve ana eksen kısıtlandığında (Bu programda olduğu gibi), ana eksen, FlexLayout iOS ekran görüntüsünde gösterildiği gibi, tüm alt öğelere sığacak kadar geniş veya daha az uzun değildir. Eklenmiş bağlanabilir özelliği olan öğelerin shrınkyetliğini kontrol edebilirsiniz Shrink .
Adatifycontent özelliği
Xamarin_Forms _FlexLayout_JustifyContent "Data-LinkType =" Absolute-path ">JustifyContent özelliği FlexJustify , altı üye içeren bir sabit listesi türü:
Start(veya "XAML 'de" Flex-Start "), varsayılanCenterEnd(veya XAML 'de "Flex-End")SpaceBetween(veya "XAML içinde" boşluk)SpaceAround(veya "XAML içinde" yer alan)SpaceEvenly
Bu özellik, öğelerin bu örnekteki yatay eksen olan ana eksende nasıl boşluklu olduğunu belirtir:
Üç ekran görüntüsü içinde, Wrap özelliği olarak ayarlanır Wrap . StartVarsayılan değer önceki Android ekran görüntüsünde gösterilmiştir. Buradaki iOS ekran görüntüsünde seçenek gösterilmektedir Center : tüm öğeler merkeze taşınır. Kelimeyle başlayan üç diğer seçenek, Space öğelerin kapladığı ek alanı ayırır. SpaceBetween alanları öğeler arasında eşit olarak ayırır; SpaceAround her bir öğenin çevresine eşit boşluk koyar, ancak SpaceEvenly her bir öğe arasında ve ilk öğeden önce ve satırdaki son öğeden sonra, eşit boşluk koyar.
Hizalamasını öğeleri özelliği
Xamarin_Forms _FlexLayout_AlignItems "Data-LinkType =" Absolute-path ">AlignItems özelliği FlexAlignItems , dört üye içeren bir sabit listesi türü:
Stretch, varsayılanCenterStart(veya XAML 'de "Flex-Start")End(veya XAML 'de "Flex-End")
Bu iki özelliklerden biridir (diğer bir deyişle, diğer bir AlignContent deyişle), çocukların çapraz eksende nasıl hizalandığını gösterir. Her satırda, alt öğeler uzatılır (önceki ekran görüntüsünde gösterildiği gibi) veya aşağıdaki üç ekran görüntüsünde gösterildiği gibi her bir öğenin başlangıcına, ortasına veya sonuna hizalanır:
HizalaİOS ekran görüntüsünde, tüm alt öğelerin üstleri hizalanır. Android ekran görüntülerinde, öğeler en uzun alt öğeye göre dikey olarak ortalanır. UWP ekran görüntüsünde, tüm öğelerin botları hizalanır.
Her bir öğe için, bu AlignItems ayar, AlignSelf ekli bağlanabilir özellik ile geçersiz kılınabilir.
Hizalama Içeriği özelliği
Xamarin_Forms _FlexLayout_AlignContent "Data-LinkType =" Absolute-path ">AlignContent özelliği FlexAlignContent , yedi üye içeren bir sabit listesi türünde.
Stretch, varsayılanCenterStart(veya XAML 'de "Flex-Start")End(veya XAML 'de "Flex-End")SpaceBetween(veya "XAML içinde" boşluk)SpaceAround(veya "XAML içinde" yer alan)SpaceEvenly
Benzer şekilde AlignItems , AlignContent özelliği çapraz eksendeki alt öğeleri de hizalar, ancak tüm satırları veya sütunları etkiler:
İOS ekran görüntüsünde her iki satır da en üstte bulunur; Android ekran görüntüsünde merkezinde yer alırlar. UWP ekran görüntüsünde en altta yer alırlar. Satırlar ayrıca çeşitli yollarla aralıklı olabilir:
AlignContentYalnızca bir satır veya sütun olduğunda hiçbir etkisi yoktur.
Ekli bağlanabilir özellikler ayrıntılı
FlexLayout beş bağlantılı bağlanabilir özelliği tanımlar. Bu özellikler, öğesinin alt öğelerinde ayarlanır FlexLayout ve yalnızca söz konusu alt öğeye aittir.
Hizalama kendi özelliği
AlignSelfEklenmiş bağlanabilir özellik FlexAlignSelf , beş üye içeren bir numaralandırma türüdür:
Auto, varsayılanStretchCenterStart(veya XAML 'de "Flex-Start")End(veya XAML 'de "Flex-End")
Her bir alt öğesi için FlexLayout , bu özellik ayarı AlignItems kendi üzerinde ayarlanan özelliği geçersiz kılar FlexLayout . Varsayılan ayarı Auto , ayarının kullanılması anlamına gelir AlignItems .
Labellabel (Veya örnek) adlı bir öğe için, AlignSelf özelliği aşağıdaki gibi bir kodda ayarlayabilirsiniz:
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);
Öğesinin üst öğesine başvuru olmadığına dikkat edin FlexLayoutLabel . XAML 'de özelliği şöyle ayarlarsınız:
<Label ... FlexLayout.AlignSelf="Center" ... />
Order özelliği
OrderÖzelliği türündedir int . Varsayılan değer 0’dır.
OrderÖzelliği, alt öğelerinin düzenlendiği sırayı değiştirmenize izin verir FlexLayout . Genellikle, bir öğesinin alt öğeleri, FlexLayout koleksiyonda göründükleri sırada yer alırlar Children . OrderEklenmiş bağlanabilir özelliği bir veya daha fazla alt öğe üzerinde sıfır olmayan bir tamsayı değerine ayarlayarak bu sırayı geçersiz kılabilirsiniz. Sonra, alt FlexLayout öğelerini Order her bir alt öğenin özelliği ayarına göre düzenler, ancak aynı ayarı olan alt öğeler Order koleksiyonda göründükleri sırada düzenlenir Children .
Temel özellik
BasisEklenmiş bağlanabilir özelliği, ana eksende bir alt öğesi için ayrılan alan miktarını gösterir FlexLayout . Özelliği tarafından belirtilen boyut, Basis üst öğenin ana ekseni üzerindeki boyutudur FlexLayout . Bu nedenle, alt Basis öğeler satırlarda düzenlendiğine veya alt öğeler sütunlarda düzenlendiğine göre bir alt öğenin genişliğini gösterir.
BasisÖzelliği FlexBasis , bir yapı türüdür. Boyut, cihazdan bağımsız birimlerde veya boyutunun yüzdesi olarak belirtilebilir FlexLayout . Özelliğin varsayılan değeri, Basis statik özelliktir, bu da FlexBasis.Auto alt öğenin istenen genişliğinin veya yüksekliğinin kullanıldığı anlamına gelir.
Kod içinde, Basis adlandırılmış için özelliği Label Şu şekilde label cihazdan bağımsız 40 olarak ayarlayabilirsiniz:
FlexLayout.SetBasis(label, new FlexBasis(40, false));
Oluşturucunun ikinci bağımsız değişkeni olarak FlexBasis adlandırılır isRelative ve boyutun göreli ( true ) veya mutlak () olup olmadığını gösterir false . Bağımsız değişkeni varsayılan değerine sahiptir false , bu nedenle aşağıdaki kodu de kullanabilirsiniz:
FlexLayout.SetBasis(label, new FlexBasis(40));
Öğesinden öğesinden örtük bir float dönüştürme FlexBasis tanımlanır, bu sayede daha da kolay bir şekilde basitleşebilir:
FlexLayout.SetBasis(label, 40);
Boyutu üst öğenin %25 ' i ile şöyle ayarlayabilirsiniz FlexLayout :
FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));
Bu kesirli değer 0 ile 1 aralığında olmalıdır.
XAML 'de, aygıttan bağımsız birimlerde boyut için bir sayı kullanabilirsiniz:
<Label ... FlexLayout.Basis="40" ... />
Ya da %0 ile %100 arasında bir yüzde belirtebilirsiniz:
<Label ... FlexLayout.Basis="25%" ... />
Esnek Layoutdemolar örneğinin temel deneme sayfası, özelliği ile denemeler yapmanıza olanak sağlar . Sayfada, Label değişen arka plan ve ön plan renkleriyle beş öğeden oluşan kaydırılan bir sütun görüntülenir. İki Slider öğe, ikinci ve Basis dördüncü için değer belirtmenize izin Label verir:
Sol tarafta iOS ekran görüntüsü, Label cihazdan bağımsız birimlerde yükseklik verilen iki öğeyi gösterir. Android ekranı, toplam yüksekliğinin kesri olan yüksekliklerin verildiğini FlexLayout gösterir. değeri %100 olarak ayarlanırsa alt, 'nin yüksekliğidir ve UWP ekran görüntüsünde olduğu gibi bir sonraki sütuna kaydırarak bu sütunun tüm yüksekliğini kaplar: Beş alt çocuk bir satırda düzenlenmiş gibi görünür ancak aslında beş sütunda BasisFlexLayout düzenlenmiştir.
Grow Özelliği
Bağlı Grow bağlanabilir özelliği int türündedir. Varsayılan değer 0'dır ve değerin 0'dan büyük veya 0'a eşit olması gerekir.
özelliği, özelliği olarak ayarlanırken ve children satırı, genişliğinin genişliğinden daha az toplam genişliğine sahip olduğunda veya children sütunundan daha kısa bir yüksekliğe sahip olduğunda GrowWrap özellik bir rol NoWrapFlexLayoutFlexLayout oynar. Growözelliği, kalan boşluğun çocuklar arasında nasıl ekserlik sağ tarafta olduğunu gösterir.
Denemeyi Büyüt sayfasında, alternatif renklerin beş öğe bir sütunda düzenlenmiştir ve iki öğe ikinci ve dördüncü öğelerinin özelliğini SliderGrow ayarlamanıza olanak Label sağlar. En sol tarafta yer alan iOS ekran görüntüsünde varsayılan Grow 0 özellikleri yer aldı:
Herhangi bir alt değere pozitif değer verilirse Android ekran görüntüsünde de olduğu gibi bu alt alan Grow kalan tüm alanı alır. Bu alan iki veya daha fazla çocuk arasında da ayırabilirsiniz. UWP ekran görüntüsünde, ikincinin özelliği GrowLabel 0,5 olarak ayarlanırken dördüncü değerin özelliği GrowLabel 1,5'tir Label ve bu da dördüncüye ikinci ile kalan alanı üç kat daha Label verir.
Alt görünümün bu alanı nasıl kullandığı, belirli bir alt türe bağlıdır. bir Label için metin, ve özellikleri kullanılarak toplam alanı Label içinde HorizontalTextAlignmentVerticalTextAlignment konumlandı.
Shrink Özelliği
Bağlı Shrink bağlanabilir özelliği int türündedir. Varsayılan değer 1'tir ve değerin 0'dan büyük veya 0'a eşit olması gerekir.
özelliği, özelliği olarak ayarlanmış ve bir çocuk satırı toplam genişliği, genişliğinin genişliğinden büyük olduğunda veya tek bir çocuk sütununu toplam yüksekliğinin yüksekliğinin yüksekliğinden büyük olduğunda özelliği bir rol ShrinkWrapNoWrapFlexLayoutFlexLayout oynar. Normalde , FlexLayout boyutlarını kısıtlar ve bu küçükleri görüntüler. özelliği, Shrink tüm boyutlarında hangi çocukların önceliğe sahip olduğunu gösteriyor olabilir.
Denemeyi Küçült sayfası, genişlikten daha fazla alan gerektiren beş Label altı satırlık tek bir satıra sahip bir FlexLayout oluşturur. Sol tarafta yer alan iOS ekran görüntüsü, varsayılan değer Label 1 olan tüm öğeleri gösterir:
Android ekran görüntüsünde saniyenin değeri 0 olarak ayarlanır Shrink ve bu değer tam LabelLabel genişlikte görüntülenir. Ayrıca dördüncüye Label birden büyük bir değer verilir ve Shrink küçülmüş olur. UWP ekran görüntüsü, mümkünse her iki öğeye de 0 değeri verildiğini ve bunların tam boyutunda LabelShrink görüntülenebilir.
Hem hem de değerlerini, toplam alt boyutların bazen boyutundan küçük veya bazen daha büyük olabileceği durumlara uyum GrowShrink sağlayacak şekilde FlexLayout ayarlayın.
FlexLayout ile CSS stili
ile bağlantılı olarak 3.0 ile birlikte tanıtan CSS stil özelliğini FlexLayout kullanabilirsiniz. FlexLayoutDemos örneğinin CSS Katalog Öğeleri sayfası Katalog Öğeleri sayfasının düzenini yineler, ancak stillerin çoğu için CSS stil sayfası içerir:
Özgün CatalogItemsPage.xaml dosyasının Resources bölümünde 15 nesneli beş tanım Setter vardır. CssCatalogItemsPage.xaml dosyasında, yalnızca dört nesneyle iki tanım Setter azaltıldı. Bu stiller CSS stil özelliğinin şu anda Xamarin.Forms desteklemey olduğu özellikler için CSS stil sayfalarını tamamlar:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.CssCatalogItemsPage"
Title="CSS Catalog Items">
<ContentPage.Resources>
<StyleSheet Source="CatalogItemsStyles.css" />
<Style TargetType="Frame">
<Setter Property="BorderColor" Value="Blue" />
<Setter Property="CornerRadius" Value="15" />
</Style>
<Style TargetType="Button">
<Setter Property="Text" Value="LEARN MORE" />
<Setter Property="BorderRadius" Value="20" />
</Style>
</ContentPage.Resources>
<ScrollView Orientation="Both">
<FlexLayout>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Seated Monkey" StyleClass="header" />
<Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
<Label Text=" • Doesn't make a lot of noise" />
<Label Text=" • Often smiles mysteriously" />
<Label Text=" • Sleeps sitting up" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Banana Monkey" StyleClass="header" />
<Label Text="Watch this monkey eat a giant banana." />
<Label Text=" • More fun than a barrel of monkeys" />
<Label Text=" • Banana not included" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Face-Palm Monkey" StyleClass="header" />
<Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
<Label Text=" • Cynical but not unfriendly" />
<Label Text=" • Seven varieties of grimaces" />
<Label Text=" • Doesn't laugh at your jokes" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
</FlexLayout>
</ScrollView>
</ContentPage>
CSS stil sayfası, bölümün ilk satırına Resources başvurur:
<StyleSheet Source="CatalogItemsStyles.css" />
Ayrıca üç öğenin her ikisinde de ayarların yer alan iki öğe olduğunu StyleClass da fark edebilirsiniz:
<Label Text="Seated Monkey" StyleClass="header" />
···
<Label StyleClass="empty" />
Bunlar CatalogItemsStyles.css stil sayfalarındaki seçicilere başvurur:
frame {
width: 300;
height: 480;
background-color: lightyellow;
margin: 10;
}
label {
margin: 4 0;
}
label.header {
margin: 8 0;
font-size: large;
color: blue;
}
label.empty {
flex-grow: 1;
}
image {
height: 180;
order: -1;
align-self: center;
}
button {
font-size: large;
color: white;
background-color: green;
}
Burada FlexLayout birkaç ekli bağlanabilir özele başvurabilirsiniz. Seçicide, öğesinin üzerinde boş alan sağlamak için boş değere sahip label.emptyflex-grow olan Label özniteliğini Button görebilirsiniz. Seçici, image her ikisi de bağlı bağlanabilir orderalign-self özelliklere karşılık gelen bir öznitelik ve FlexLayout bir öznitelik içerir.
Özellikleri doğrudan üzerinde ayarlayabilirsiniz ve ekli bağlanabilir özellikleri bir 'nin en FlexLayout küçükleri üzerinde ayarlayabilirsiniz. FlexLayout Veya bu özellikleri geleneksel XAML tabanlı stilleri veya CSS stillerini kullanarak dolaylı olarak da değiştirebilirsiniz. Önemli olan bu özellikleri bilmek ve anlamaktır. Bu özellikler, gerçekten esnek FlexLayout olan özelliklerdir.
Xamarin.University ile FlexLayout
3.0 Esnek Düzen videosu