Xamarin.Forms
Xamarin Formulieren Layouts

ContentPresenter

Een lay-outmanager voor sjabloonweergaven. Gebruikt in een ControlTemplate om aan te geven waar de te presenteren inhoud wordt weergegeven.

inhoudAlle

Een element met een enkele inhoud. ContentView heeft heel weinig eigen gebruik. Het doel is om te dienen als een basisklasse voor door de gebruiker gedefinieerde samengestelde weergaven.

XAML

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

Code

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

Kader

Een element met een enkel kind, met enkele kaderopties. Frame hebben een standaard Xamarin.Forms.Layout.Padding van 20.

XAML

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

Code

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

ScrollView

Een element dat kan scrollen als het Content vereist.

ScrollView bevat lay-outs en stelt hen in staat om offscreen te scrollen. ScrollView wordt ook gebruikt om weergaven automatisch naar het zichtbare gedeelte van het scherm te verplaatsen wanneer het toetsenbord wordt weergegeven.

Opmerking: ScrollViews mogen niet worden genest. Bovendien mogen ScrollViews niet worden genest met andere besturingselementen die scrollen bieden, zoals ListView en WebView .

Een ScrollView is eenvoudig te definiëren. In XAML:

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

Dezelfde definitie in code:

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

Een element dat inhoud weergeeft met een besturingssjabloon en de basisklasse voor ContentView .

AbsoluteLayout

AbsoluteLayout posities en maten onderliggende elementen evenredig met zijn eigen grootte en positie of door absolute waarden. Onderliggende weergaven kunnen worden gepositioneerd en gedimensioneerd met behulp van proportionele waarden of statische waarden, en proportionele en statische waarden kunnen worden gemengd.

Een definitie van een AbsoluteLayout in XAML ziet er zo uit:

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

Dezelfde lay-out zou er in code als volgt uitzien:

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

Met het besturingselement AbsoluteLayout in Xamarin.Forms kunt u opgeven waar precies op het scherm de onderliggende elementen moeten worden weergegeven, evenals hun grootte en vorm (grenzen).

Er zijn een paar verschillende manieren om de grenzen van de onderliggende elementen in te stellen op basis van de opsomming van AbsoluteLayoutFlags die tijdens dit proces worden gebruikt. De opsomming van AbsoluteLayoutFlags bevat de volgende waarden:

• Alle : alle afmetingen zijn evenredig.
• HeightProportional: Hoogte is evenredig met de lay-out.
• Geen : er wordt geen interpretatie uitgevoerd.
• PositionProportional : combineert XProportional en YProportional.
• Grootteproportioneel : combineert breedteproportioneel en hoogteproportioneel.
• WidthProportional: breedte is evenredig met de lay-out.
• XProportional : X eigenschap is evenredig met de lay-out.
• YProportional : Y-eigenschap is evenredig met de lay-out.

Het proces van werken met de lay-out van de AbsoluteLayout-container lijkt op het eerste gezicht misschien een beetje intuïtief, maar met een beetje gebruik komt het bekend voor. Nadat u uw onderliggende elementen hebt gemaakt, moet u drie stappen volgen om ze op een absolute positie in de container te plaatsen. U wilt de vlaggen instellen die aan de elementen zijn toegewezen met de methode AbsoluteLayout.SetLayoutFlags () . U wilt ook de methode AbsoluteLayout.SetLayoutBounds () gebruiken om de elementen hun grenzen te geven. Ten slotte wilt u de onderliggende elementen toevoegen aan de collectie Kinderen. Aangezien Xamarin.Forms een abstractielaag is tussen Xamarin en de apparaatspecifieke implementaties, kunnen de positionele waarden onafhankelijk zijn van de apparaatpixels. Hier komen de eerder genoemde layoutvlaggen om de hoek kijken. U kunt kiezen hoe het lay-outproces van de Xamarin.Forms-besturingselementen de waarden moet interpreteren die u definieert.

rooster

Een lay-out met weergaven gerangschikt in rijen en kolommen.

Dit is een typische Grid in 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>

Hetzelfde Grid gedefinieerd in code ziet er zo uit:

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

Items toevoegen aan het raster: In 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>

In C # code:

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

Voor Height en Width een aantal eenheden beschikbaar.

• Auto - past automatisch de grootte aan zodat deze in de rij of kolom past. Opgegeven als GridUnitType.Auto in C # of als Auto in XAML.
• Proportioneel - maten kolommen en rijen als een deel van de resterende ruimte. Opgegeven als een waarde en GridUnitType.Star in C # en als # * in XAML, waarbij # de gewenste waarde is. Als u één rij / kolom opgeeft met *, vult deze de beschikbare ruimte.
• Absoluut - maten kolommen en rijen met specifieke, vaste hoogte- en breedtewaarden. Opgegeven als een waarde en GridUnitType.Absolute in C # en als # in XAML, waarbij # de gewenste waarde is.

Opmerking: de breedtewaarden voor kolommen zijn standaard ingesteld op Auto in Xamarin.Forms, wat betekent dat de breedte wordt bepaald op basis van de grootte van de kinderen. Merk op dat dit verschilt van de implementatie van XAML op Microsoft-platforms, waar de standaardbreedte * is, die de beschikbare ruimte zal vullen.

Relatieve layout

Een Layout die Constraints gebruikt om de Constraints te maken.

RelativeLayout wordt gebruikt om weergaven te positioneren en te formaat ten opzichte van eigenschappen van de lay-out of broer- of zusweergaven. In tegenstelling tot AbsoluteLayout heeft RelativeLayout niet het concept van het bewegende anker en heeft het geen voorzieningen voor het positioneren van elementen ten opzichte van de onderste of rechter randen van de lay-out. RelativeLayout ondersteunt positioneringselementen buiten zijn eigen grenzen.

Een RelativeLayout in XAML is als volgt:

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

Dezelfde lay-out kan worden bereikt met deze code:

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 organiseert weergaven in een eendimensionale lijn ("stapel"), horizontaal of verticaal. Views in een StackLayout kunnen worden aangepast aan de ruimte in de lay-out met behulp van lay- StackLayout . De positionering wordt bepaald door de orderweergaven die aan de lay-out zijn toegevoegd en de lay-outopties van de weergaven.

Gebruik in XAML

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

Gebruik in code

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