Xamarin.Forms
Форматы макетов Xamarin

ContentPresenter

Менеджер макетов для шаблонных просмотров. Используется в ControlTemplate, чтобы отметить, где появится содержимое, которое будет представлено.

ContentView

Элемент с одним контентом. ContentView очень мало использует свое собственное. Его цель - служить базовым классом для пользовательских сложных представлений.

XAML

<ContentView>
<Label Text="Hi, I'm a simple Label inside of a simple ContentView"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</ContentView>

Код

var contentView = new ContentView {
Content = new Label {
 Text = "Hi, I'm a simple Label inside of a simple ContentView",
 HorizontalOptions = LayoutOptions.Center,
 VerticalOptions = LayoutOptions.Center
}
};

Рамка

Элемент, содержащий один дочерний элемент, с некоторыми параметрами кадрирования. Рамка имеет значение по умолчанию Xamarin.Forms.Layout.Padding 20.

XAML

<Frame>
<Label Text="I've been framed!"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Frame>

Код

var frameView = new Frame {
Content = new Label {
 Text = "I've been framed!",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
},
OutlineColor = Color.Red
};

ScrollView

Элемент, способный прокручиваться, если это требует Content .

ScrollView содержит макеты и позволяет им прокручивать экран. ScrollView также используется, чтобы позволить представлениям автоматически перемещаться к видимой части экрана при показе клавиатуры.

Примечание. ScrollViews не должны быть вложенными. Кроме того, ScrollViews не должны ScrollViews другие элементы управления, которые обеспечивают прокрутку, например ListView и WebView .

ScrollView легко определить. В XAML:

<ContentPage.Content>
    <ScrollView>
        <StackLayout>
            <BoxView BackgroundColor="Red" HeightRequest="600" WidthRequest="150" />
            <Entry />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

То же определение в коде:

var scroll = new ScrollView();
Content = scroll;
var stack = new StackLayout();
stack.Children.Add(new BoxView { BackgroundColor = Color.Red,   HeightRequest = 600, WidthRequest = 600 });
stack.Children.Add(new Entry());

TemplatedView

Элемент, который отображает контент с помощью шаблона управления и базовый класс для ContentView .

AbsoluteLayout

AbsoluteLayout позиции и размеры дочерних элементов, пропорциональных его размеру и положению или по абсолютным значениям. Представления для детей могут быть расположены и измерены с использованием пропорциональных значений или статических значений, а пропорциональные и статические значения могут быть смешаны.

Определение AbsoluteLayout в XAML выглядит так:

<AbsoluteLayout>
    <Label Text="I'm centered on iPhone 4 but no other device"
        AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap"  />
    <Label Text="I'm bottom center on every device."
        AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
        LineBreakMode="WordWrap"  />
    <BoxView Color="Olive"  AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,1,25"
        AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" />
</AbsoluteLayout>

Тот же макет будет выглядеть так в коде:

Title = "Absolute Layout Exploration - Code";
var layout = new AbsoluteLayout();

var centerLabel = new Label {
Text = "I'm centered on iPhone 4 but no other device.",
LineBreakMode = LineBreakMode.WordWrap};

AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));
// No need to set layout flags, absolute positioning is the default

var bottomLabel = new Label { Text = "I'm bottom center on every device.", LineBreakMode = LineBreakMode.WordWrap };
AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1));
AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);

var rightBox = new BoxView{ Color = Color.Olive };
AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);

var leftBox = new BoxView{ Color = Color.Red };
AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);

var topBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);

var twoFlagsBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 1, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional | AbsoluteLayout.WidthProportional);

layout.Children.Add (bottomLabel);
layout.Children.Add (centerLabel);
layout.Children.Add (rightBox);
layout.Children.Add (leftBox);
layout.Children.Add (topBox);

Элемент AbsoluteLayout в Xamarin.Forms позволяет указать, где именно на экране вы хотите, чтобы дочерние элементы отображались, а также их размер и форма (границы).

Существует несколько различных способов установить границы дочерних элементов на основе перечисления AbsoluteLayoutFlags, которые используются во время этого процесса. Перечисление AbsoluteLayoutFlags содержит следующие значения:

• Все : Все размеры пропорциональны.
• HeightProportional : Высота пропорциональна расположению.
• Нет : интерпретация не выполняется.
• PositionProportional : Объединяет XProportional и YProportional.
• SizeProportional : Объединяет WidthProportional и HeightProportional.
• WidthProportional: Ширина пропорциональна макета.
• XProportional : свойство X пропорционально компоновке.
• YProportional : свойство Y пропорционально расположению.

Процесс работы с макетом контейнера AbsoluteLayout может показаться немного интуитивным вначале, но с небольшим использованием он станет привычным. Когда вы создадите дочерние элементы, чтобы установить их в абсолютном положении в контейнере, вам нужно выполнить три шага. Вы хотите установить флаги, назначенные элементам, используя метод AbsoluteLayout.SetLayoutFlags () . Вы также захотите использовать метод AbsoluteLayout.SetLayoutBounds (), чтобы дать элементам свои границы. Наконец, вы захотите добавить дочерние элементы в коллекцию Children. Так как Xamarin.Forms является абстракционным слоем между Xamarin и специфическими для устройства реализациями, позиционные значения могут быть независимы от пикселей устройства. Здесь упоминаются ранее упомянутые флаги компоновки. Вы можете выбрать, как процесс компоновки элементов управления Xamarin.Forms должен интерпретировать значения, которые вы определяете.

сетка

Макет, содержащий представления, расположенные в строках и столбцах.

Это типичное определение Grid в XAML.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="2*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="200" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
    
  <ContentView Grid.Row="0" Grid.Column="0"/>
  <ContentView Grid.Row="1" Grid.Column="0"/>
  <ContentView Grid.Row="2" Grid.Column="0"/>

  <ContentView Grid.Row="0" Grid.Column="1"/>
  <ContentView Grid.Row="1" Grid.Column="1"/>
  <ContentView Grid.Row="2" Grid.Column="1"/>

</Grid>

Такая же Grid определенная в коде, выглядит так:

var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(200)});
grid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (200) });

Чтобы добавить элементы в сетку: В XAML :

<Grid>
      
   <--DEFINITIONS...--!>
        
   <ContentView Grid.Row="0" Grid.Column="0"/>
   <ContentView Grid.Row="1" Grid.Column="0"/>
   <ContentView Grid.Row="2" Grid.Column="0"/>

   <ContentView Grid.Row="0" Grid.Column="1"/>
   <ContentView Grid.Row="1" Grid.Column="1"/>
   <ContentView Grid.Row="2" Grid.Column="1"/>

</Grid>

В коде C #:

var grid = new Grid();
//DEFINITIONS...
var topLeft = new Label { Text = "Top Left" };
var topRight = new Label { Text = "Top Right" };
var bottomLeft = new Label { Text = "Bottom Left" };
var bottomRight = new Label { Text = "Bottom Right" };
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 0, 1);
grid.Children.Add(bottomLeft, 1, 0);
grid.Children.Add(bottomRight, 1, 1);

Для Height и Width доступно несколько единиц.

• Авто - автоматически размеры, соответствующие содержанию в строке или столбце. Указан как GridUnitType.Auto в C # или как Auto в XAML.
• Пропорциональные столбцы и строки пропорционально оставшемуся пространству. Указывается как значение и GridUnitType.Star в C # и как # * в XAML, причем # является вашим желаемым значением. Указание одной строки / столбца на * приведет к заполнению доступного пространства.
• Абсолютные размеры столбцов и строк с определенными фиксированными значениями высоты и ширины. Указывается как значение и GridUnitType.Absolute в C # и как # в XAML, причем # является вашим желаемым значением.

Примечание. Значения ширины столбцов по умолчанию заданы как «Авто» по умолчанию в Xamarin.Forms, что означает, что ширина определяется по размеру детей. Обратите внимание, что это отличается от реализации XAML на платформах Microsoft, где ширина по умолчанию - *, которая заполняет доступное пространство.

RelativeLayout

Layout который использует Constraints для компоновки своих детей.

RelativeLayout используется для размещения и размера представлений относительно свойств макета или представлений сестры. В отличие от AbsoluteLayout , RelativeLayout не имеет понятия движущегося якоря и не имеет средств для позиционирования элементов относительно нижнего или правого краев макета. RelativeLayout поддерживает элементы позиционирования за пределами собственных границ.

RelativeLayout в XAML выглядит следующим образом:

<RelativeLayout>
    <BoxView Color="Red" x:Name="redBox"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=.15,Constant=0}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
    <BoxView Color="Blue"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=Y,Factor=1,Constant=20}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=X,Factor=1,Constant=20}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>

Такой же макет может быть выполнен с помощью этого кода:

layout.Children.Add (redBox, Constraint.RelativeToParent ((parent) => {
        return parent.X;
    }), Constraint.RelativeToParent ((parent) => {
        return parent.Y * .15;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .8;
    }));
layout.Children.Add (blueBox, Constraint.RelativeToView (redBox, (Parent, sibling) => {
        return sibling.X + 20;
    }), Constraint.RelativeToView (blueBox, (parent, sibling) => {
        return sibling.Y + 20;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width * .5;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .5;
    }));

StackLayout

StackLayout организует представления в одномерной строке («стек»), горизонтально или вертикально. Views в StackLayout могут быть рассчитаны на основе пространства в макете с использованием параметров макета. Позиционирование определяется просмотрами заказов, которые были добавлены в макет и варианты макета представлений.

Использование в XAML

<StackLayout>
    <Label Text="This will be on top" />
    <Button Text="This will be on the bottom" />
</StackLayout>

Использование в коде

StackLayout stackLayout = new StackLayout
{
    Spacing = 0,
    VerticalOptions = LayoutOptions.FillAndExpand,
    Children = 
    {
        new Label
        {
            Text = "StackLayout",
            HorizontalOptions = LayoutOptions.Start
        },
        new Label
        {
            Text = "stacks its children",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "vertically",
            HorizontalOptions = LayoutOptions.End
        },
        new Label
        {
            Text = "by default,",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "but horizontal placement",
            HorizontalOptions = LayoutOptions.Start
        },
        new Label
        {
            Text = "can be controlled with",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "the HorizontalOptions property.",
            HorizontalOptions = LayoutOptions.End
        },
        new Label
        {
            Text = "An Expand option allows one or more children " +
                   "to occupy the an area within the remaining " +
                   "space of the StackLayout after it's been sized " +
                   "to the height of its parent.",
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.End
        },
        new StackLayout
        {
            Spacing = 0,
            Orientation = StackOrientation.Horizontal,
            Children = 
            {
                new Label
                {
                    Text = "Stacking",
                },
                new Label
                {
                    Text = "can also be",
                    HorizontalOptions = LayoutOptions.CenterAndExpand
                },
                new Label
                {
                    Text = "horizontal.",
                },
            }
        }
    }
};