Xamarin.Forms Çizgisi

Örneği indirin

Grid "Data-LinkType =" göreli yol ">Xamarin. Forms Grid" title = " Xamarin.Forms Grid" Data-LinkType = "göreli-yol"/>

, Grid Alt öğelerini, orantılı veya mutlak boyutlara sahip olabilen satırlar ve sütunlar halinde düzenleyen bir düzendir. Grid varsayılan olarak bir satır ve bir sütun içerir. Buna ek olarak, Grid diğer alt düzenleri içeren bir üst düzen olarak kullanılabilir.

GridDüzen tablolarla karıştırılmamalıdır ve tablo verilerini sunmak için tasarlanmamıştır. HTML tablolarının aksine,, Grid içeriği yerleştirmek için tasarlanmıştır. Tablo verilerini görüntülemek için bir ListView, CollectionViewveya Tableviewkullanmayı deneyin.

GridSınıfı aşağıdaki özellikleri tanımlar:

• Column, int bir üst öğe içindeki bir görünümün sütun hizalamasını belirten iliştirilmiş bir özellik olan türü Grid . Bu özelliğin varsayılan değeri 0 ' dır. Bir doğrulama geri çağırması, özellik ayarlandığında, değeri 0 ' dan büyük veya buna eşit olduğunda sağlar.
• _Grid_ColumnDefinitions "Data-LinkType =" Absolute-path ">, ColumnDefinitionsColumnDefinitionCollectionColumnDefinition kılavuz sütunlarının genişliğini tanımlayan nesnelerin bir listesidir.
• Xamarin_Forms _Grid_ColumnSpacing "Data-LinkType =" Absolute-path ">, ColumnSpacingdouble kılavuz sütunları arasındaki mesafeyi belirtir. Bu özelliğin varsayılan değeri 6 cihazdan bağımsız birimdir.
• ColumnSpan, int bir görünümün üst öğe içinde yayıldığı toplam sütun sayısını gösteren iliştirilmiş bir özellik olan türü Grid . Bu özelliğin varsayılan değeri 1 ' dir. Bir doğrulama geri çağırması, özellik ayarlandığında, değeri 1 ' den büyük veya buna eşit olduğunda sağlar.
• Row, int bir üst öğe içindeki bir görünümün satır hizalamasını gösteren iliştirilmiş bir özellik olan türü Grid . Bu özelliğin varsayılan değeri 0 ' dır. Bir doğrulama geri çağırması, özellik ayarlandığında, değeri 0 ' dan büyük veya buna eşit olduğunda sağlar.
• Xamarin_Forms _Grid_RowDefinitions "Data-LinkType =" Absolute-path ">, RowDefinitionsRowDefinitionCollectionRowDefintion Kılavuz satırlarının yüksekliğini tanımlayan nesnelerin bir listesidir.
• Xamarin_Forms _Grid_RowSpacing "Data-LinkType =" Absolute-path ">, RowSpacingdouble kılavuz satırları arasındaki mesafeyi belirtir. Bu özelliğin varsayılan değeri 6 cihazdan bağımsız birimdir.
• RowSpan, int bir görünümün üst öğe içinde yayıldığı toplam satır sayısını gösteren iliştirilmiş bir özellik olan türü Grid . Bu özelliğin varsayılan değeri 1 ' dir. Bir doğrulama geri çağırması, özellik ayarlandığında, değeri 1 ' den büyük veya buna eşit olduğunda sağlar.

Bu özellikler nesneler tarafından desteklenir BindableProperty . Bu, özelliklerin veri bağlamalarının hedefleri olabileceği ve stil altında olabileceği anlamına gelir.

GridSınıfı, Layout<T> türünde bir özelliği tanımlayan sınıfından türetilir ChildrenIList<T> . ChildrenÖzelliği ContentPropertyLayout<T> sınıfının özelliğidir ve bu nedenle XAML 'den açıkça ayarlanması gerekmez.

Satırlar ve sütunlar

Varsayılan olarak, bir Grid satır ve bir sütun içerir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="By default, a Grid contains one row and one column." />
    </Grid>
</ContentPage>

Bu örnekte, GridLabel tek bir konumda otomatik olarak konumlandırılmış tek bir alt öğe içerir:

Varsayılan Kılavuz düzeni varsayılan kılavuz düzeninin varsayılan kılavuz

A 'nın düzen davranışı, GridGrid "Data-LinkType =" Absolute-path ">RowDefinitions ve Xamarin_Forms _Grid_ColumnDefinitions" Data-linktype = "Absolute-path" >ColumnDefinitions Özellikleri, RowDefinitionColumnDefinition sırasıyla ve nesne koleksiyonları olan Xamarin_Forms _Grid_RowDefinitions ile tanımlanabilir. Bu koleksiyonlar, öğesinin satır ve sütun özelliklerini tanımlar Grid ve içindeki RowDefinition her satır için bir nesne Grid ve ColumnDefinition içindeki her bir sütun için bir nesne içermelidir Grid .

RowDefinitionSınıfı, türündeki bir Xamarin_Forms RowDefinition _RowDefinition_Height "Data-LinkType =" Absolute-path ">Height özelliği tanımlar GridLength ve ColumnDefinition sınıfı bir Xamarin_Forms _ColumnDefinition_Width" data-LinkType = "Absolute-path" >Width özelliğini tanımlar GridLength . GridLengthStruct, GridUnitType üç üyeye sahip olan numaralandırma açısından bir satır yüksekliğini veya sütun genişliğini belirtir:

• Absolute – satır yüksekliği veya sütun genişliği, cihazdan bağımsız birimlerdeki bir değerdir (XAML 'de bir sayıdır).
• Auto – satır yüksekliği veya sütun genişliği, hücre içeriğine göre autoboyutlandırılır ( Auto xaml 'de).
• Star – soltover satır yüksekliği veya sütun genişliği orantılı olarak (XAML içinde bir sayı ile izlenir * ) ayrılır.

Özelliği olan bir Grid satır, HeightAuto Bu satırdaki görünümlerin yüksekliğini Dikey ile aynı şekilde kısıtlar StackLayout . Benzer şekilde, özelliği olan bir sütun WidthAuto yatay olarak çok benzer şekilde çalışır StackLayout .

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridDemos.Views.BasicGridPage"
             Title="Basic Grid demo">
   <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        ...
    </Grid>
</ContentPage>

Bu örnekte, Grid sayfanın yüksekliğinin genel bir yüksekliği vardır. GridÜçüncü satırın yüksekliğinin cihazdan bağımsız birimler 100 olduğunu bilir. Bu yüksekliği kendi yüksekliğinden çıkartır ve yıldızdan önceki sayıya göre ilk ve ikinci satırlar arasında orantılı olarak kalan yüksekliği ayırır. Bu örnekte, ilk satırın yüksekliği ikinci satırın iki katından oluşur.

İki ColumnDefinition nesne, ColumnDefinition "Data-LinkType =" Absolute-path ">Xamarin_Forms _ColumnDefinition_Width olarak ayarlayın ve Width Bu, *1* ekranın genişliğinin iki sütunun altına eşit olarak bölündüğü anlamına gelir.

Alt görünümler GridGrid.Column ve ekli özellikleri olan belirli hücrelerde konumlandırılmış olabilir Grid.Row . Buna ek olarak, alt görünümleri birden çok satır ve sütunda yaymak için Grid.RowSpan ve Grid.ColumnSpan ekli özellikleri kullanın.

Aşağıdaki XAML aynı Grid tanımı gösterir ve ayrıca belirli hücrelerdeki alt görünümleri konumlandırır Grid :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridDemos.Views.BasicGridPage"
             Title="Basic Grid demo">
   <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <BoxView Color="Green" />
        <Label Text="Row 0, Column 0"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <BoxView Grid.Column="1"
                 Color="Blue" />
        <Label Grid.Column="1"
               Text="Row 0, Column 1"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <BoxView Grid.Row="1"
                 Color="Teal" />
        <Label Grid.Row="1"
               Text="Row 1, Column 0"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <BoxView Grid.Row="1"
                 Grid.Column="1"
                 Color="Purple" />
        <Label Grid.Row="1"
               Grid.Column="1"
               Text="Row1, Column 1"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <BoxView Grid.Row="2"
                 Grid.ColumnSpan="2"
                 Color="Red" />
        <Label Grid.Row="2"
               Grid.ColumnSpan="2"
               Text="Row 2, Columns 0 and 1"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Grid>
</ContentPage>

Bu örnekte, üç satır, Grid ve görünümleri tarafından alınır BoxViewLabel . Üçüncü satır 100 cihazdan bağımsız birimlerdir ve kalan alanı taşıyan ilk iki satır (ilk satır ikinci satır kadar yüksektir). İki sütun Width cinsinden eşittir ve Grid yarı yarıya böler. BoxViewÜçüncü satırdaki öğesinde her iki sütun da yayılır.

Temel kılavuz düzeni temel kılavuz düzeninin

Ayrıca, bir içindeki alt Görünümler Grid hücreleri paylaşabilir. Alt öğelerin XAML 'de görünme sırası alt öğelerin içine yerleştirilme sıradır Grid . Önceki örnekte Label nesneler yalnızca nesneler üzerinde işlendiklerinden görünür BoxView . Nesneler LabelBoxView üzerinde işlendiyse nesneler görünür olmaz.

Eşdeğer C# kodu:

public class BasicGridPageCS : ContentPage
{
    public BasicGridPageCS()
    {
        Grid grid = new Grid
        {
            RowDefinitions =
            {
                new RowDefinition { Height = new GridLength(2, GridUnitType.Star) },
                new RowDefinition(),
                new RowDefinition { Height = new GridLength(100) }
            },
            ColumnDefinitions =
            {
                new ColumnDefinition(),
                new ColumnDefinition()
            }
        };

        // Row 0
        // The BoxView and Label are in row 0 and column 0, and so only needs to be added to the
        // Grid.Children collection to get default row and column settings.
        grid.Children.Add(new BoxView
        {
            Color = Color.Green
        });
        grid.Children.Add(new Label
        {
            Text = "Row 0, Column 0",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        });

        // This BoxView and Label are in row 0 and column 1, which are specified as arguments
        // to the Add method.
        grid.Children.Add(new BoxView
        {
            Color = Color.Blue
        }, 1, 0);
        grid.Children.Add(new Label
        {
            Text = "Row 0, Column 1",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        }, 1, 0);

        // Row 1
        // This BoxView and Label are in row 1 and column 0, which are specified as arguments
        // to the Add method overload.
        grid.Children.Add(new BoxView
        {
            Color = Color.Teal
        }, 0, 1, 1, 2);
        grid.Children.Add(new Label
        {
            Text = "Row 1, Column 0",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        }, 0, 1, 1, 2); // These arguments indicate that that the child element goes in the column starting at 0 but ending before 1.
                        // They also indicate that the child element goes in the row starting at 1 but ending before 2.

        grid.Children.Add(new BoxView
        {
            Color = Color.Purple
        }, 1, 2, 1, 2);
        grid.Children.Add(new Label
        {
            Text = "Row1, Column 1",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        }, 1, 2, 1, 2);

        // Row 2
        // Alternatively, the BoxView and Label can be positioned in cells with the Grid.SetRow
        // and Grid.SetColumn methods.
        BoxView boxView = new BoxView { Color = Color.Red };
        Grid.SetRow(boxView, 2);
        Grid.SetColumnSpan(boxView, 2);
        Label label = new Label
        {
            Text = "Row 2, Column 0 and 1",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };
        Grid.SetRow(label, 2);
        Grid.SetColumnSpan(label, 2);

        grid.Children.Add(boxView);
        grid.Children.Add(label);

        Title = "Basic Grid demo";
        Content = grid;
    }
}

Kodda, bir RowDefinition nesnenin yüksekliğini ve bir nesnenin genişliğini belirtmek için ColumnDefinitionGridLength yapının değerlerini, genellikle GridUnitType numaralandırmayla birlikte kullanırsınız.

Yukarıdaki örnek kod ayrıca, içine alt öğe eklemek için birkaç farklı yaklaşım gösterir Grid ve içerdikleri hücreleri belirterek. Sol Add , sağ, üstve Addalt bağımsız değişkenleri belirten aşırı yükleme kullanılırken, sol ve üst bağımsız değişkenlerin her zaman içindeki hücrelere başvurması durumunda, sağ ve alt bağımsız değişkenler, dışında kalan hücrelere başvuracak şekilde görünür . Bunun nedeni, doğru bağımsız değişkenin her zaman sol bağımsız değişkenden büyük olması ve en alttaki bağımsız değişkenin her zaman en üstteki bağımsız değişkenden büyük olması gerekir. Bir 2x2 'yi kabul eden aşağıdaki örnek, Grid her iki aşırı yüklemeyi kullanarak eşdeğer kodu gösterir Add :

// left, top
grid.Children.Add(topLeft, 0, 0);           // first column, first row
grid.Children.Add(topRight, 1, 0);          // second column, first tow
grid.Children.Add(bottomLeft, 0, 1);        // first column, second row
grid.Children.Add(bottomRight, 1, 1);       // second column, second row

// left, right, top, bottom
grid.Children.Add(topLeft, 0, 1, 0, 1);     // first column, first row
grid.Children.Add(topRight, 1, 2, 0, 1);    // second column, first tow
grid.Children.Add(bottomLeft, 0, 1, 1, 2);  // first column, second row
grid.Children.Add(bottomRight, 1, 2, 1, 2); // second column, second row

Satır ve sütun tanımlarını basitleştirme

XAML 'de, öğesinin satır ve sütun özellikleri, GridRowDefinitionColumnDefinition her satır ve sütun için tanımlama ve nesneler tanımlamak zorunda kalmadan, Basitleştirilmiş bir sözdizimi kullanılarak belirtilebilir. Bunun yerine, Xamarin_Forms _Grid_RowDefinitions "Data-LinkType =" Absolute-path ">RowDefinitions ve Xamarin_Forms RowDefinitions _Grid_ColumnDefinitions" Data-LinkType = "Absolute-path" >ColumnDefinitions özellikleri GridUnitType , Xamarin.Forms oluşturma RowDefinition ve nesneler içinde yerleşik olan tür dönüştürücülerinin virgülle ayrılmış değerler içeren dizelere ayarlanabilir ColumnDefinition :

<Grid RowDefinitions="1*, Auto, 25, 14, 20"
      ColumnDefinitions="*, 2*, Auto, 300">
    ...
</Grid>

Bu örnekte, Grid beş satırı ve dört sütunu vardır. Üçüncü, ileri ve beşinci satırlar mutlak yükseklikleri olarak ayarlanır ve ikinci satır içeriğine otomatik olarak boyutlandırılmadır. Kalan yükseklik daha sonra ilk satıra ayrılır.

İleri sütunu mutlak genişlik olarak ayarlanır ve üçüncü sütun içeriğine otomatik olarak Boyutlandırılıyor. Kalan genişlik, yıldızdan önceki sayıya göre ilk ve ikinci sütunlar arasında orantılı olarak ayrılır. Bu örnekte, ikinci sütunun genişliği ilk sütundan iki kez olur (çünkü, * ile aynıdır 1* ).

Satırlar ve sütunlar arasındaki boşluk

Varsayılan olarak, Grid satırlar 6 cihazdan bağımsız alan birimi ile ayrılır. Benzer şekilde, Grid sütunlar 6 cihazdan bağımsız alan birimi ile ayrılır. Bu varsayılanlar, sırasıyla _Grid_RowSpacing "Data-LinkType =" Absolute-path ">RowSpacing ve Xamarin_Forms RowSpacing _Grid_ColumnSpacing" Data-LinkType = "absolute-path" >ColumnSpacing özellikleri Xamarin_Forms ayarlanarak değiştirilebilir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridDemos.Views.GridSpacingPage"
             Title="Grid spacing demo">
    <Grid RowSpacing="0"
          ColumnSpacing="0">
        ..
    </Grid>
</ContentPage>

Bu örnek, Grid satırları ve sütunları arasında boşluk olmayan bir oluşturur:

Hücreler arasında boşluk ızgarahücreler arasında boşluk yok

Eşdeğer C# kodu:

public GridSpacingPageCS()
{
    Grid grid = new Grid
    {
        RowSpacing = 0,
        ColumnSpacing = 0,
        // ...
    };
    // ...

    Content = grid;
}

Hizalama

Bir içindeki alt görünümler, GridGrid "Data-LinkType =" Absolute-path ">_View_HorizontalOptions HorizontalOptions ve Xamarin_Forms _View_VerticalOptions" Data-linktype = "Absolute-path" >VerticalOptions özellikleri Xamarin_Forms hücreleri içinde konumlandırılabilir. Bu özellikler, yapı öğesinden aşağıdaki alanlara ayarlanabilir LayoutOptions :

• Start
• Center
• End
• Fill

Aşağıdaki XAML, Grid dokuz eşit boyutlu hücre içeren bir oluşturur ve Label her hücreye farklı hizalamayla bir koyar:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridDemos.Views.GridAlignmentPage"
             Title="Grid alignment demo">
    <Grid RowSpacing="0"
          ColumnSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <BoxView Color="AliceBlue" />
        <Label Text="Upper left"
               HorizontalOptions="Start"
               VerticalOptions="Start" />
        <BoxView Grid.Column="1"
                 Color="LightSkyBlue" />
        <Label Grid.Column="1"
               Text="Upper center"
               HorizontalOptions="Center"
               VerticalOptions="Start"/>
        <BoxView Grid.Column="2"
                 Color="CadetBlue" />
        <Label Grid.Column="2"
               Text="Upper right"
               HorizontalOptions="End"
               VerticalOptions="Start" />
        <BoxView Grid.Row="1"
                 Color="CornflowerBlue" />
        <Label Grid.Row="1"
               Text="Center left"
               HorizontalOptions="Start"
               VerticalOptions="Center" />
        <BoxView Grid.Row="1"
                 Grid.Column="1"
                 Color="DodgerBlue" />
        <Label Grid.Row="1"
               Grid.Column="1"
               Text="Center center"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <BoxView Grid.Row="1"
                 Grid.Column="2"
                 Color="DarkSlateBlue" />
        <Label Grid.Row="1"
               Grid.Column="2"
               Text="Center right"
               HorizontalOptions="End"
               VerticalOptions="Center" />
        <BoxView Grid.Row="2"
                 Color="SteelBlue" />
        <Label Grid.Row="2"
               Text="Lower left"
               HorizontalOptions="Start"
               VerticalOptions="End" />
        <BoxView Grid.Row="2"
                 Grid.Column="1"
                 Color="LightBlue" />
        <Label Grid.Row="2"
               Grid.Column="1"
               Text="Lower center"
               HorizontalOptions="Center"
               VerticalOptions="End" />
        <BoxView Grid.Row="2"
                 Grid.Column="2"
                 Color="BlueViolet" />
        <Label Grid.Row="2"
               Grid.Column="2"
               Text="Lower right"
               HorizontalOptions="End"
               VerticalOptions="End" />
    </Grid>
</ContentPage>

Bu örnekte, Label her satırdaki nesneler dikey olarak hizalanır, ancak farklı yatay hizalamaları kullanır. Alternatif olarak, bu, Label her sütundaki nesneler aynı şekilde yatay hizalı, ancak farklı dikey hizalamalar kullanılarak düşünülebilir:

Kılavuzda bir kılavuzhücre hizalaması

Eşdeğer C# kodu:

public class GridAlignmentPageCS : ContentPage
{
    public GridAlignmentPageCS()
    {
        Grid grid = new Grid
        {
            RowSpacing = 0,
            ColumnSpacing = 0,
            RowDefinitions =
            {
                new RowDefinition(),
                new RowDefinition(),
                new RowDefinition()
            },
            ColumnDefinitions =
            {
                new ColumnDefinition(),
                new ColumnDefinition(),
                new ColumnDefinition()
            }
        };

        // Row 0
        grid.Children.Add(new BoxView
        {
            Color = Color.AliceBlue
        });
        grid.Children.Add(new Label
        {
            Text = "Upper left",
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.Start
        });

        grid.Children.Add(new BoxView
        {
            Color = Color.LightSkyBlue
        }, 1, 0);
        grid.Children.Add(new Label
        {
            Text = "Upper center",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Start
        }, 1, 0);

        grid.Children.Add(new BoxView
        {
            Color = Color.CadetBlue
        }, 2, 0);
        grid.Children.Add(new Label
        {
            Text = "Upper right",
            HorizontalOptions = LayoutOptions.End,
            VerticalOptions = LayoutOptions.Start
        }, 2, 0);

        // Row 1
        grid.Children.Add(new BoxView
        {
            Color = Color.CornflowerBlue
        }, 0, 1);
        grid.Children.Add(new Label
        {
            Text = "Center left",
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.Center
        }, 0, 1);

        grid.Children.Add(new BoxView
        {
            Color = Color.DodgerBlue
        }, 1, 1);
        grid.Children.Add(new Label
        {
            Text = "Center center",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        }, 1, 1);

        grid.Children.Add(new BoxView
        {
            Color = Color.DarkSlateBlue
        }, 2, 1);
        grid.Children.Add(new Label
        {
            Text = "Center right",
            HorizontalOptions = LayoutOptions.End,
            VerticalOptions = LayoutOptions.Center
        }, 2, 1);

        // Row 2
        grid.Children.Add(new BoxView
        {
            Color = Color.SteelBlue
        }, 0, 2);
        grid.Children.Add(new Label
        {
            Text = "Lower left",
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.End
        }, 0, 2);

        grid.Children.Add(new BoxView
        {
            Color = Color.LightBlue
        }, 1, 2);
        grid.Children.Add(new Label
        {
            Text = "Lower center",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.End
        }, 1, 2);

        grid.Children.Add(new BoxView
        {
            Color = Color.BlueViolet
        }, 2, 2);
        grid.Children.Add(new Label
        {
            Text = "Lower right",
            HorizontalOptions = LayoutOptions.End,
            VerticalOptions = LayoutOptions.End
        }, 2, 2);

        Title = "Grid alignment demo";
        Content = grid;
    }
}

İç içe kılavuz nesneleri

Grid, İç içe geçmiş alt Grid nesneleri veya diğer alt düzenleri içeren bir üst düzen olarak kullanılabilir. Nesneleri iç içe aktardığınızda,,, GridGrid.RowGrid.ColumnGrid.RowSpan ve Grid.ColumnSpan Ekli Özellikler her zaman üst öğeleri içindeki görünüm konumlarına başvurur Grid .

Aşağıdaki XAML, nesneleri iç içe geçirme örneği göstermektedir Grid :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:converters="clr-namespace:GridDemos.Converters"
             x:Class="GridDemos.Views.ColorSlidersGridPage"
             Title="Nested Grids demo">

    <ContentPage.Resources>
        <converters:DoubleToIntConverter x:Key="doubleToInt" />

        <Style TargetType="Label">
            <Setter Property="HorizontalTextAlignment"
                    Value="Center" />
        </Style>
    </ContentPage.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <BoxView x:Name="boxView"
                 Color="Black" />
        <Grid Grid.Row="1"
              Margin="20">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Slider x:Name="redSlider"
                    ValueChanged="OnSliderValueChanged" />
            <Label Grid.Row="1"
                   Text="{Binding Source={x:Reference redSlider},
                                  Path=Value,
                                  Converter={StaticResource doubleToInt},
                                  ConverterParameter=255,
                                  StringFormat='Red = {0}'}" />
            <Slider x:Name="greenSlider"
                    Grid.Row="2"
                    ValueChanged="OnSliderValueChanged" />
            <Label Grid.Row="3"
                   Text="{Binding Source={x:Reference greenSlider},
                                  Path=Value,
                                  Converter={StaticResource doubleToInt},
                                  ConverterParameter=255,
                                  StringFormat='Green = {0}'}" />
            <Slider x:Name="blueSlider"
                    Grid.Row="4"
                    ValueChanged="OnSliderValueChanged" />
            <Label Grid.Row="5"
                   Text="{Binding Source={x:Reference blueSlider},
                                  Path=Value,
                                  Converter={StaticResource doubleToInt},
                                  ConverterParameter=255,
                                  StringFormat='Blue = {0}'}" />
        </Grid>
    </Grid>
</ContentPage>

Bu örnekte, kök Grid Düzen BoxView ilk satırında bir ve ikinci satırındaki alt öğesi içerir Grid . Alt öğe Grid , SliderBoxView ve Label her birinin değerini görüntüleyen nesneler ve tarafından görüntülenen renkleri düzenleyen nesneler içerir Slider :

İç içe iç içe kılavuz nesnelerinin

Eşdeğer C# kodu:

public class ColorSlidersGridPageCS : ContentPage
{
    BoxView boxView;
    Slider redSlider;
    Slider greenSlider;
    Slider blueSlider;

    public ColorSlidersGridPageCS()
    {
        // Create an implicit style for the Labels
        Style labelStyle = new Style(typeof(Label))
        {
            Setters =
            {
                new Setter { Property = Label.HorizontalTextAlignmentProperty, Value = TextAlignment.Center }
            }
        };
        Resources.Add(labelStyle);

        // Root page layout
        Grid rootGrid = new Grid
        {
            RowDefinitions =
            {
                new RowDefinition(),
                new RowDefinition()
            }
        };

        boxView = new BoxView { Color = Color.Black };
        rootGrid.Children.Add(boxView);

        // Child page layout
        Grid childGrid = new Grid
        {
            Margin = new Thickness(20),
            RowDefinitions =
            {
                new RowDefinition(),
                new RowDefinition(),
                new RowDefinition(),
                new RowDefinition(),
                new RowDefinition(),
                new RowDefinition()
            }
        };

        DoubleToIntConverter doubleToInt = new DoubleToIntConverter();

        redSlider = new Slider();
        redSlider.ValueChanged += OnSliderValueChanged;
        childGrid.Children.Add(redSlider);

        Label redLabel = new Label();
        redLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Red = {0}", source: redSlider));
        Grid.SetRow(redLabel, 1);
        childGrid.Children.Add(redLabel);

        greenSlider = new Slider();
        greenSlider.ValueChanged += OnSliderValueChanged;
        Grid.SetRow(greenSlider, 2);
        childGrid.Children.Add(greenSlider);

        Label greenLabel = new Label();
        greenLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Green = {0}", source: greenSlider));
        Grid.SetRow(greenLabel, 3);
        childGrid.Children.Add(greenLabel);

        blueSlider = new Slider();
        blueSlider.ValueChanged += OnSliderValueChanged;
        Grid.SetRow(blueSlider, 4);
        childGrid.Children.Add(blueSlider);

        Label blueLabel = new Label();
        blueLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Blue = {0}", source: blueSlider));
        Grid.SetRow(blueLabel, 5);
        childGrid.Children.Add(blueLabel);

        // Place the child Grid in the root Grid
        rootGrid.Children.Add(childGrid, 0, 1);

        Title = "Nested Grids demo";
        Content = rootGrid;
    }

    void OnSliderValueChanged(object sender, ValueChangedEventArgs e)
    {
        boxView.Color = new Color(redSlider.Value, greenSlider.Value, blueSlider.Value);
    }
}

İlgili bağlantılar

• Izgara gösterileri (örnek)
• Layout Options in Xamarin.Forms
• Choose a Xamarin.Forms Layout
• Improve Xamarin.Forms App Performance