Düzen seçin Xamarin.Forms

Örneği indirin

Xamarin.Forms Düzen sınıfları uygulamanızdaki UI denetimlerini düzenlemenize ve gruplandıruygulamanıza olanak tanır. Düzen sınıfı seçmek, düzenin alt öğelerini nasıl konumlandırdığı ve düzenin alt öğelerini nasıl boyutlandıran bilgisini gerektirir. Ayrıca, istenen düzeninizi oluşturmak için düzenleri iç içe eklemek gerekebilir.

Aşağıdaki görüntüde, ana düzen sınıflarıyla elde edilebilir tipik düzenler gösterilmektedir Xamarin.Forms :

Xamarin. Forms Düzen sınıfları "Data-LinkType =" göreli yol ">Xamarin. Forms " title = " Xamarin.Forms Düzen sınıfları" Data-LinkType = "göreli-yol"/>

StackLayout

StackLayoutTek boyutlu bir yığında öğeleri yatay veya dikey olarak düzenler. Xamarin_Forms _StackLayout_Orientation "Data-LinkType =" Absolute-path ">Orientation özelliği öğelerin yönünü belirtir ve varsayılan Yön olur Vertical . StackLayout genellikle bir sayfadaki kullanıcı arabiriminin alt bölümünü düzenlemek için kullanılır.

Aşağıdaki XAML, üç nesne içeren dikey bir nasıl oluşturulacağını gösterir StackLayoutLabel :

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

' De StackLayout , bir öğenin boyutu açıkça ayarlanmamışsa, Xamarin_Forms StackLayout _StackLayout_Orientation "Data-LinkType =" Absolute-path ">Orientation özelliği olarak ayarlandıysa, kullanılabilir genişliği veya yüksekliği dolduracak şekilde genişler Horizontal .

StackLayoutGenellikle, diğer alt düzenleri içeren üst düzen olarak kullanılır. Ancak, bir StackLayout nesnenin birleşimini kullanarak bir düzeni yeniden oluşturmak için kullanılmamalıdır GridStackLayout . Aşağıdaki kod bu hatalı uygulamaya bir örnek gösterir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Bu, gereksiz düzen hesaplamaları yapıldığından beklenebilir. Bunun yerine, istenen düzen bir kullanarak daha iyi elde edilebilir Grid .

Daha fazla bilgi için bkz. Xamarin.Forms StackLayout.

Kılavuz

GridÖğeleri, satırlar ve sütunlar halinde görüntülemek için kullanılır. Bu, orantılı veya mutlak boyutlara sahip olabilir. Bir kılavuzun satırları ve sütunları, "Data-LinkType =" Absolute-path ">RowDefinitions ve Xamarin_Forms RowDefinitions _Grid_ColumnDefinitions" Data-LinkType = "absolute-path" >ColumnDefinitions özellikleri _Grid_RowDefinitions Xamarin_Forms ile belirtilir.

Öğeleri belirli hücrelere konumlandırmak için GridGrid.Column ve Grid.Row ekli özellikleri kullanın. Öğeleri birden çok satırda ve sütunda yaymak için, Grid.RowSpan ve Grid.ColumnSpan ekli özellikleri kullanın.

Aşağıdaki XAML, Grid iki satır ve iki sütun ile nasıl oluşturulacağını gösterir:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

Bu örnekte, boyutlandırma şu şekilde geçerlidir:

• Her satırda 50 cihazdan bağımsız birim için açık bir yükseklik bulunur.
• İlk sütunun genişliği, "Data-LinkType =" Absolute-path ">Xamarin_Forms _GridLength_Auto olarak ayarlanır Auto ve bu nedenle alt öğeleri için gereken kadar geniştir. Bu durumda, ilk olarak, 200 cihazdan bağımsız birimler, birincinin genişliğine uyum sağlayacak şekilde genişliğidir Label .

Boşluk, sütun ve satır boyutunun içeriğe sığması için otomatik boyutlandırma kullanılarak bir sütun veya satır içinde dağıtılabilir. Bu, RowDefinitionColumnDefinitionRowDefinition "Data-LinkType =" absolute-path ">_GridLength_Auto Xamarin_Forms için bir Auto veya genişliğinin yüksekliği ayarlanarak elde edilir . Boyut oranını ağırlıklı oranlara göre kılavuz satırları ve sütunları arasında dağıtmak için orantılı boyutlandırma de kullanılabilir. Bu, a 'nın yüksekliğini RowDefinition veya bir genişliğini, işlecini kullanan bir değere ayarlayarak elde edilir ColumnDefinition* .

Daha fazla bilgi için bkz. Xamarin.Forms Grid.

FlexLayout

FlexLayout, Bir StackLayout yığında yatay veya dikey olarak alt öğeleri görüntüleyen öğesine benzerdir. Bununla birlikte, FlexLayout tek bir satıra veya sütuna sığmayacak kadar çok fazla varsa ve ayrıca alt öğelerinin boyutu, yönü ve hizalaması üzerinde daha ayrıntılı denetim sağlamak için bir, alt öğesini de kaydırabilirler.

Aşağıdaki XAML, FlexLayout görünümlerini tek bir sütunda görüntüleyen bir öğesinin nasıl oluşturulacağını gösterir:

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

Bu örnekte, düzen aşağıdaki gibi çalışmaktadır:

• Xamarin_Forms _FlexLayout_Direction "Data-LinkType =" Absolute-path ">Direction özelliği olarak ayarlanır Column , bu da alt öğelerinin FlexLayout öğelerin tek bir sütununda düzenlenmesini sağlar.
• Xamarin_Forms _FlexLayout_AlignItems "Data-LinkType =" Absolute-path ">AlignItems özelliği olarak ayarlanır Center ve bu, her öğenin yatay olarak ortalanmasını sağlar.
• Xamarin_Forms _FlexLayout_JustifyContent "Data-LinkType =" Absolute-path ">JustifyContent özelliği olarak ayarlanır SpaceEvenly . Bu, tüm öğeler arasında eşit olarak kalan dikey boşluğu ve ilk öğenin üzerine ve son öğenin altına göre ayırır.

Daha fazla bilgi için bkz. Xamarin.Forms FlexLayout.

RelativeLayout

, RelativeLayout Öğelerin, düzen veya Eşdüzey öğelerin özelliklerine göre konumlandırmak ve boyutlandırmak için kullanılır. Varsayılan olarak, bir öğe düzenin sol üst köşesine yerleştirilir. RelativeLayout, Cihaz boyutları arasında orantılı bir şekilde ölçeklenen usıs oluşturmak için kullanılabilir.

Bir içinde RelativeLayout , pozisyonlar ve boyutlar kısıtlamalar olarak belirtilir. Kısıtlamaların Xamarin_Forms _ConstraintExpression_Factor "Data-LinkType =" Absolute-path ">Factor ve Xamarin_Forms Factor _ConstraintExpression_Constant" Data-LinkType = "Absolute-path" >özellikleri vardır ve Constant Bu, konumları ve boyutları diğer nesnelerin özelliklerinin katları (veya kesirleri) olarak tanımlamak için kullanılabilir ve bir sabittir. Ayrıca, sabitler negatif olabilir.

Aşağıdaki XAML ' de öğelerin nasıl düzenlenme gösterir RelativeLayout :

<RelativeLayout>
    <BoxView Color="Blue"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView Color="Red"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.85}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView x:Name="pole"
             Color="Gray"
             WidthRequest="15"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.75}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.45}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.25}" />
    <BoxView Color="Green"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.10, Constant=10}"
             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.2, Constant=20}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=X, Constant=15}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=Y, Constant=0}" />
</RelativeLayout>

Bu örnekte, düzen aşağıdaki gibi çalışmaktadır:

• Mavi BoxView 'e, 50x50 cihazdan bağımsız birimlerin açık boyutu verilir. Bu, varsayılan konum olan düzenin sol üst köşesine yerleştirilir.
• Red 'ye, BoxView 50x50 cihazdan bağımsız birimlerin açık boyutu verilir. Bu, düzenin sağ üst köşesine yerleştirilir.
• Gri, BoxView 15 cihazdan bağımsız birimlerin açık genişliğine sahiptir ve yüksekliği üst öğesinin yüksekliğinin %75 olarak ayarlanmıştır.
• Yeşil, BoxView açık bir boyut olarak verilmez. Konumu adına göre ayarlanır BoxViewpole .

Daha fazla bilgi için bkz. Xamarin.Forms RelativeLayout.

AbsoluteLayout

AbsoluteLayoutAçık değerler veya Düzen boyutuna göre değerler kullanılarak öğeleri konumlandırmak ve yerleştirmek için kullanılır. Konum, alt öğenin sol üst köşesine göre alt sol üst köşesinden belirtilir AbsoluteLayout .

AbsoluteLayoutYalnızca alt öğeler için bir boyut veya öğenin boyutu diğer alt öğelerin konumlandırmasını etkilemediği zaman kullanılmak üzere bir özel amaçlı düzen olarak kabul edilmelidir. Bu düzenin standart kullanımı, diğer denetimlerin bulunduğu sayfayı kapsayan, belki de kullanıcının sayfadaki normal denetimlerle etkileşime geçmek için bir kaplama oluşturmaktır.

Bir içinde AbsoluteLayout , bir AbsoluteLayout.LayoutBounds öğenin yatay konumunu, dikey konumunu, genişliğini ve yüksekliğini belirtmek için iliştirilmiş özelliği kullanılır. Ayrıca, AbsoluteLayout.LayoutFlags ekli özelliği, düzen sınırlarının nasıl yorumlanacağını belirtir.

Aşağıdaki XAML, içindeki öğelerin nasıl düzenlenme şeklini gösterir AbsoluteLayout :

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

Bu örnekte, düzen aşağıdaki gibi çalışmaktadır:

• Her birine BoxView 100x100 ' in açık bir boyutu verilir ve yatay olarak ortalanan aynı konumda görüntülenir.
• Kırmızı BoxView değer 30 derece, yeşil ise BoxView 60 derece döndürülür.
• Her bir üzerinde BoxView , AbsoluteLayout.LayoutFlags iliştirilmiş özelliği olarak ayarlanır PositionProportional ve bu, konumun genişlik ve yükseklik için hesap kaldırıldıktan sonra kalan alanla orantılı olduğunu gösterir.

Daha fazla bilgi için bkz. Xamarin.Forms AbsoluteLayout.

Giriş saydamlığı

Her görsel öğe, InputTransparent öğenin girişi alıp almadığını tanımlamak için kullanılan bir Xamarin_Forms _VisualElement_InputTransparent "Data-LinkType =" absolute-path ">özelliğine sahiptir. Varsayılan değeri false , öğesinin girişi aldığından emin olur.

Bu özellik bir düzen sınıfında ayarlandığında, değeri alt öğelerine aktarır. Bu nedenle, Xamarin_Forms _VisualElement_InputTransparent "Data-LinkType =" Absolute-path ">InputTransparent özelliği true bir düzen sınıfında olarak ayarlandığında, düzen içindeki tüm öğelerin giriş almamaya neden olur.

Düzen performansı

Olası en iyi düzen performansını elde etmek için, Düzen performansını En Iyi hale getirmeyeyönelik yönergeleri izleyin.

Ayrıca, sayfa işleme performansı, belirtilen düzenleri görsel ağacından kaldıran düzen sıkıştırması kullanılarak da geliştirilebilir. Daha fazla bilgi için bkz. Düzen sıkıştırması.

İlgili bağlantılar

• Düzen (örnek)
• Xamarin.Forms Layouts (video)
• Xamarin.Forms StackLayout
• Xamarin.Forms Grid
• Xamarin.Forms FlexLayout
• Xamarin.Forms AbsoluteLayout
• Xamarin.Forms RelativeLayout
• Düzen performansını iyileştirme
• Düzen sıkıştırması