Xamarin.Forms
Xamarin Forms Layouts

ContentPresenter

Menedżer układu dla widoków szablonów. Używany w ControlTemplate do oznaczenia, gdzie pojawia się treść do prezentacji.

ContentView

Element z jedną zawartością. ContentView ma bardzo małe własne wykorzystanie. Jego celem jest służyć jako klasa bazowa dla widoków złożonych zdefiniowanych przez użytkownika.

XAML

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

Kod

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
}
};

Rama

Element zawierający pojedyncze dziecko, z kilkoma opcjami kadrowania. Ramka ma domyślny Xamarin.Forms.Layout.Padding o wartości 20.

XAML

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

Kod

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

ScrollView

Element zdolny do przewijania, jeśli wymaga tego Content .

ScrollView zawiera układy i umożliwia przewijanie poza ekranem. ScrollView służy również do automatycznego przesuwania widoków do widocznej części ekranu, gdy klawiatura jest wyświetlana.

Uwaga: ScrollViews nie powinny być zagnieżdżane. Ponadto ScrollViews nie powinny być zagnieżdżane z innymi kontrolkami zapewniającymi przewijanie, takimi jak ListView i WebView .

ScrollView jest łatwy do zdefiniowania. W XAML:

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

Ta sama definicja w kodzie:

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

Element, który wyświetla zawartość za pomocą szablonu kontrolnego, oraz klasę podstawową dla ContentView .

AbsoluteLayout

Pozycje i rozmiary elementów AbsoluteLayout proporcjonalne do własnego rozmiaru i pozycji lub według wartości bezwzględnych. Widoki potomne mogą być pozycjonowane i sortowane za pomocą wartości proporcjonalnych lub statycznych, a wartości proporcjonalne i statyczne można mieszać.

Definicja AbsoluteLayout w XAML wygląda następująco:

<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>

Ten sam układ wyglądałby tak w kodzie:

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);

Formant AbsoluteLayout w Xamarin.Forms pozwala określić, gdzie dokładnie na ekranie mają się pojawiać elementy potomne, a także ich rozmiar i kształt (granice).

Istnieje kilka różnych sposobów ustawiania granic elementów potomnych na podstawie wyliczenia AbsoluteLayoutFlags, które są używane podczas tego procesu. Wyliczenie AbsoluteLayoutFlags zawiera następujące wartości:

• Wszystkie : wszystkie wymiary są proporcjonalne.
• HeightProportional: wysokość jest proporcjonalna do układu.
• Brak : brak interpretacji.
• PositionProportional : Łączy XProportional i YProportional.
• Rozmiar proporcjonalny : Łączy szerokość proporcjonalny i wysokość proporcjonalny.
• WidthProportional : Szerokość jest proporcjonalna do układu.
• XProportional : Właściwość X jest proporcjonalna do układu.
• YProportional : Właściwość Y jest proporcjonalna do układu.

Proces pracy z układem kontenera AbsoluteLayout może początkowo wydawać się nieco sprzeczny z intuicją, ale przy niewielkim użyciu stanie się znajomy. Po utworzeniu elementów potomnych, aby ustawić je w pozycji bezwzględnej w kontenerze, musisz wykonać trzy kroki. Będziesz chciał ustawić flagi przypisane do elementów za pomocą metody AbsoluteLayout.SetLayoutFlags () . Będziesz także chciał użyć metody AbsoluteLayout.SetLayoutBounds () , aby nadać elementom granice. Na koniec będziesz chciał dodać elementy potomne do kolekcji Dzieci. Ponieważ Xamarin.Forms jest warstwą abstrakcji między Xamarin a implementacjami specyficznymi dla urządzenia, wartości pozycyjne mogą być niezależne od pikseli urządzenia. To tutaj pojawiają się wspomniane wcześniej flagi układu. Możesz wybrać sposób, w jaki proces układu formantów Xamarin.Forms powinien interpretować zdefiniowane wartości.

Krata

Układ zawierający widoki ułożone w rzędach i kolumnach.

Jest to typowa definicja Grid w 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>

Ta sama Grid zdefiniowana w kodzie wygląda następująco:

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) });

Aby dodać elementy do siatki: W 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>

W kodzie 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);

Dla Height i Width jest kilka jednostek.

• Auto - automatycznie dopasowuje rozmiar do zawartości w wierszu lub kolumnie. Określony jako GridUnitType.Auto w C # lub jako Auto w XAML.
• Proporcjonalne - rozmiary kolumn i wierszy jako proporcja pozostałego miejsca. Określony jako wartość i GridUnitType.Star w C # i jako # * w XAML, gdzie # jest pożądaną wartością. Podanie jednego wiersza / kolumny za pomocą * spowoduje wypełnienie dostępnego miejsca.
• Bezwzględne - rozmiary kolumn i wierszy o określonych, stałych wartościach wysokości i szerokości. Określony jako wartość i GridUnitType.Absolute w C # i jako # w XAML, gdzie # jest pożądaną wartością.

Uwaga: Wartości szerokości dla kolumn są domyślnie ustawione na Auto w Xamarin.Forms, co oznacza, że szerokość jest określana na podstawie wielkości dzieci. Zauważ, że różni się to od implementacji XAML na platformach Microsoft, gdzie domyślna szerokość to *, która wypełni dostępne miejsce.

RelativeLayout

Layout wykorzystujący Constraints do układania swoich elementów potomnych.

RelativeLayout służy do pozycjonowania i wielkości widoków w stosunku do właściwości widoku układu lub rodzeństwa. W przeciwieństwie do AbsoluteLayout , RelativeLayout nie ma koncepcji ruchomej kotwicy i nie ma możliwości pozycjonowania elementów względem dolnej lub prawej krawędzi układu. RelativeLayout obsługuje elementy pozycjonujące poza swoimi granicami.

RelativeLayout w XAML wygląda następująco:

<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>

Ten sam układ można osiągnąć za pomocą tego kodu:

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 organizuje widoki w jednowymiarową linię („stos”), poziomo lub pionowo. Views w StackLayout można dopasować do wielkości w układzie za pomocą opcji układu. Pozycjonowanie zależy od kolejności dodania widoków do układu oraz opcji układu widoków.

Zastosowanie w XAML

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

Wykorzystanie w kodzie

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.",
                },
            }
        }
    }
};