Xamarin.Forms
Xamarin formar layouter

ContentPresenter

En layouthanterare för mallade vyer. Används i ett ControlTemplate för att markera var innehållet som ska presenteras visas.

ContentView

Ett element med ett enda innehåll. ContentView har mycket liten egen användning. Syftet är att tjäna som en basklass för användardefinierade sammansatta vyer.

XAML

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

Koda

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

Ram

Ett element som innehåller ett enda barn, med några inramningsalternativ. Ram har en standard Xamarin.Forms.Layout.Padding på 20.

XAML

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

Koda

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

ScrollView

Ett element som kan rulla om Content kräver det.

ScrollView innehåller layouter och gör det möjligt för dem att bläddra utanför skärmen. ScrollView används också för att tillåta vyer att automatiskt flytta till den synliga delen av skärmen när tangentbordet visas.

Obs: ScrollViews ska inte kapslas. Dessutom ska ScrollViews inte kapslas med andra kontroller som tillhandahåller rullning, som ListView och WebView .

En ScrollView är lätt att definiera. I XAML:

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

Samma definition i kod:

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

Ett element som visar innehåll med en kontrollmall och basklassen för ContentView .

AbsoluteLayout

AbsoluteLayout positioner och -storlekar barnelement som är proportionella mot sin egen storlek och position eller med absoluta värden. Barnvyer kan placeras och dimensioneras med hjälp av proportionella värden eller statiska värden, och proportionella och statiska värden kan blandas.

En definition av en AbsoluteLayout i XAML ser ut så här:

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

Samma layout skulle se ut så här i kod:

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-kontrollen i Xamarin.Forms låter dig ange var exakt på skärmen du vill att barnelementen ska visas, liksom deras storlek och form (gränser).

Det finns några olika sätt att ställa in gränserna för barnelementen baserat på AbsoluteLayoutFlags-uppräkningen som används under denna process. AbsoluteLayoutFlags- uppräkningen innehåller följande värden:

• Alla : Alla dimensioner är proportionella.
• HöjdProportionell : Höjden är proportionell mot layouten.
• Inget : Ingen tolkning görs.
• PositionProportional : Kombinerar XProportional och YProportional.
• StorlekProportionell : Kombinerar breddProportionell och HöjdProportionell.
• BreddProportionell : Bredd är proportionell mot layouten.
• XProportionell : X-egenskapen är proportionell mot layouten.
• YProportionell : Y-egenskapen är proportionell mot layouten.

Processen att arbeta med layouten på AbsoluteLayout-behållaren kan tyckas vara lite motsatt i början, men med lite användning kommer den att bli bekant. När du har skapat dina barnelement måste du följa tre steg för att ställa dem på en absolut position i behållaren. Du vill ställa in de flaggor som tilldelats elementen med hjälp av metoden AbsoluteLayout.SetLayoutFlags () . Du kommer också att vilja använda metoden AbsoluteLayout.SetLayoutBounds () för att ge elementen sina gränser. Slutligen vill du lägga till barnelementen i barnkollektionen. Eftersom Xamarin.Forms är ett abstraktionslager mellan Xamarin och de enhetsspecifika implementeringarna, kan positionsvärdena vara oberoende av enhetspixlarna. Det är här de tidigare nämnda layoutflaggorna spelas in. Du kan välja hur layoutprocessen för Xamarin.Forms-kontrollerna ska tolka värdena du definierar.

Rutnät

En layout som innehåller vyer ordnade i rader och kolumner.

Detta är en typisk Grid i 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>

Samma Grid definierat i kod ser så här ut:

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

Så här lägger du till objekt i rutnätet: I 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>

I C # -kod:

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

För Height och Width ett antal enheter tillgängliga.

• Auto - storlekar automatiskt för att passa innehåll i raden eller kolumnen. Anges som GridUnitType.Auto i C # eller som Auto i XAML.
• Proportional - storlekar kolumner och rader som en del av det återstående utrymmet. Anges som ett värde och GridUnitType.Star i C # och som # * i XAML, där # är ditt önskade värde. Om du anger en rad / kolumn med * kommer den att fylla det tillgängliga utrymmet.
• Absoluta - storlekar kolumner och rader med specifika, fast höjd och breddvärden. Anges som ett värde och GridUnitType.Absolute i C # och som # i XAML, med # som ditt önskade värde.

Obs: Breddvärdena för kolumner ställs in som Auto som standard i Xamarin.Forms, vilket innebär att bredden bestäms utifrån storleken på barnen. Observera att detta skiljer sig från implementeringen av XAML på Microsoft-plattformar, där standardbredden är *, vilket kommer att fylla det tillgängliga utrymmet.

RelativeLayout

En Layout som använder Constraints att utforma sina barn.

RelativeLayout används för att placera och storleksvyer i förhållande till layoutens eller syskonvyernas egenskaper. Till skillnad från AbsoluteLayout har RelativeLayout inte konceptet med det rörliga ankaret och har inte möjligheter att placera element relativt nedre eller högra kanter på layouten. RelativeLayout stöder positioneringselement utanför sina egna gränser.

En RelativeLayout i XAML, är så här:

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

Samma layout kan åstadkommas med denna kod:

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 organiserar vyer i en endimensionell linje ("stack"), antingen horisontellt eller vertikalt. Views i en StackLayout kan dimensioneras baserat på utrymmet i layouten med hjälp av layoutalternativ. Positioneringen bestäms av ordningsvyerna som lagts till layouten och layoutalternativen för vyerna.

Användning i XAML

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

Användning i kod

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