Weergaven rangschikken met Raster

10 minuten

Stel dat u een pagina bouwt waarin afbeeldingen in een raster van 7x5 worden weergegeven. Het is mogelijk om deze pagina te maken met meerdere horizontale en verticale StackLayout containers. Maar het zou vervelend zijn voor code en kan prestatieproblemen veroorzaken vanwege de geheugen- en verwerkingsvereisten van meerdere indelingspanelen. Het Grid indelingsdeelvenster is een betere keuze voor UIS's die zowel rijen als kolommen nodig hebben. In deze les leert u hoe u een Grid weergave en positie in de cellen definieert.

Wat is een raster?

A Grid is een indelingsdeelvenster dat bestaat uit rijen en kolommen. In de volgende afbeelding ziet u een conceptuele weergave van een raster.

Afbeelding van een voorbeeldraster met rijen en kolommen met vakken, met één vak dat meerdere rijen en kolommen beslaat.

U plaatst weergaven in de cellen die zijn gemaakt op basis van het snijpunt van de rijen en kolommen. Als u bijvoorbeeld een kolom Grid met drie kolommen en twee rijen maakt, zijn er zes cellen beschikbaar voor weergaven. De rijen en kolommen kunnen verschillende grootten hebben of ze kunnen worden ingesteld om automatisch aan te passen aan de grootte van de onderliggende items die erin zijn geplaatst. Onderliggende weergaven kunnen één cel in beslag nemen of meerdere cellen omvatten. Deze flexibiliteit maakt Grid een goede keuze voor het hoofdindelingspaneel voor veel apps.

De rijen en kolommen van een raster opgeven

Wanneer u een Gridmaakt, kunt u elke rij en kolom afzonderlijk definiëren. Dit systeem geeft u volledige controle over de hoogte van elke rij en de breedte van elke kolom. Elk Grid object bevat een verzameling RowDefinition objecten ColumnDefinition die de vorm van het raster definiëren. U vult deze verzamelingen in met exemplaren van RowDefinition en ColumnDefinition, die elk een rij of kolom in uw gebruikersinterface vertegenwoordigen.

Hier volgen twee codefragmenten met de klassedefinities voor RowDefinition en ColumnDefinition:

public sealed class RowDefinition : ...
{
    ...
    public GridLength Height { get; set; }
}

public sealed class ColumnDefinition : ...
{
    ...
    public GridLength Width { get; set; }
}

U ziet dat RowDefinition een eigenschap is aangeroepen Height en ColumnDefinition een eigenschap heeft met de naam Width. U gebruikt deze eigenschappen om de hoogte van een rij en de breedte van een kolom in te stellen, zoals wordt beschreven in de volgende secties.

Wat is GridLength?

Het gegevenstype voor de Width en Height eigenschappen is GridLength. Dit type bevat twee eigenschappen: GridUnitType en Value. Hier volgt een codefragment met een gedeelte van de typedefinitie.

public struct GridLength
{
    ...
    public GridUnitType GridUnitType { get; }
    public double Value { get; }
}

U kunt de eigenschap GridUnitType instellen op een van deze waarden:

Absolute
Auto
Star

Laten we elk van deze waarden nader bekijken.

Absolute GridUnitType

Absolute geeft aan dat de rij of kolom moet worden vastgezet in grootte. U gebruikt de Value eigenschap om de grootte aan te geven. Hier volgt een voorbeeld van hoe u de hoogte van een rij instelt op een vaste grootte van 100 apparaateenheden in C#. U ziet hoe u de GridLength constructor gebruikt, die een numerieke waarde gebruikt. Deze constructor wordt automatisch voor u ingesteld GridUnitTypeAbsolute .

var row = new RowDefinition() { Height = new GridLength(100) };

In Extensible Application Markup Language (XAML) geeft u alleen een numerieke waarde op. De XAML-parser roept een typeconversieprogramma aan om het GridLength exemplaar te maken. Hier volgt een voorbeeld van hetzelfde in XAML:

<RowDefinition Height="100" />

Auto GridUnitType

Auto hiermee wordt de rij of kolom automatisch aangepast aan de weergaven van uw kind. De Grid scant alle onderliggende weergaven in die rij of kolom, selecteert de grootste weergave en maakt vervolgens de rij of kolom groot genoeg om dat onderliggende element aan te passen. Wanneer u een rijdefinitie in code maakt, wordt de numerieke waarde genegeerd. U kunt elke waarde gebruiken. Hier volgt een voorbeeld waarin wordt getoond hoe u de hoogte van een rij zo instelt dat deze automatisch wordt aangepast in C#. U ziet dat we willekeurig voor de waarde hebben gekozen 1 .

var row = new RowDefinition() { Height = new GridLength(1, GridUnitType.Auto) };

In XAML gebruikt u de waarde Auto. Hier volgt een voorbeeld met hetzelfde in XAML.

<RowDefinition Height="Auto" />

Star GridUnitType

Star geeft u proportionele grootte. Bij proportionele grootte bepaalt de totale beschikbare ruimte en de verhouding waarin elke rij of kolom om de grootte vraagt. In gesprek noemen mensen deze stergrootte vaak in plaats van proportionele grootte.

Laten we het proces voor het gebruik van proportionele grootte voor de rijen in een raster doorlopen.

Bepaal de beschikbare ruimte: De Grid scant alle rijen die geen stergrootte gebruiken. Het telt de hoogte van al deze rijen op en trekt dat totaal af van de hoogte van de Grid zelf. Deze berekening biedt de hoeveelheid ruimte die beschikbaar is voor alle rijen met sterformaat.
De beschikbare ruimte delen: De Grid ruimte wordt vervolgens verdeeld over alle rijen met sterformaat op basis van de Value instelling voor elke rij. U kunt de Value eigenschap beschouwen als een vermenigvuldiger die de verhouding bepaalt tussen alle rijen die zijn gedefinieerd als sterformaat. Als we bijvoorbeeld twee rijen met sterformaat hebben, beide met 1 als vermenigvuldiger, wordt de beschikbare ruimte gelijk verdeeld tussen deze rijen. Maar als een van hen de waarde had 2 , zou het twee keer zoveel ruimte krijgen als de andere.

Hier volgt een voorbeeld waarin wordt getoond hoe u de hoogte van een rij 2 Star instelt op C#:

var row = new RowDefinition() { Height = new GridLength(2, GridUnitType.Star) };

In XAML gebruikt u het symbool om de * grootte van de ster weer te geven. U combineert de waarde en de * in één tekenreeks en een typeconversieprogramma maakt de GridLength waarde voor u. Hier volgt hetzelfde voorbeeld in XAML.

<RowDefinition Height="2*" />

Rasterverzamelingen

Nadat u de rijen en kolommen hebt gedefinieerd met behulp van RowDefinition en ColumnDefinition, kunt u ze toevoegen aan een Grid. U gebruikt de RowDefinitions en ColumnDefinitions verzamelingseigenschappen van de Grid. Het vullen van deze verzamelingen wordt meestal uitgevoerd in XAML.

In dit voorbeeld ziet u hoe u vier rijen definieert en deze toevoegt aan een Grid met behulp van de RowDefinitions eigenschap:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="2*" />
    </Grid.RowDefinitions>
    ...
</Grid>

Deze definitie kan worden ingekort tot:

<Grid RowDefinitions="100, Auto, 1*, 2*">
    ...
</Grid>

De XAML voor het definiëren van kolommen is vergelijkbaar met de vorige XAML. Behalve dat u ColumnDefinitions de Width.

Tijdens runtime produceert deze XAML een Grid met vier rijen. De eerste rij heeft een vaste hoogte van 100 apparaateenheden. De tweede rij heeft de hoogte van de hoogste weergave in de rij. De derde en vierde rij gebruiken stergrootte, wat betekent dat ze de resterende beschikbare ruimte innemen en deze proportioneel delen op basis van hun Value vermenigvuldiger. Omdat de derde rij is 1* en de vierde rij is 2*, is de vierde rij twee keer de hoogte van de derde rij.

Standaardgrootte voor rij en kolom

De standaardwaarde voor rijen en kolommen is 1* grootte. Bekijk bijvoorbeeld de volgende XAML.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    ...
</Grid>

Deze definitie kan worden ingekort tot:

<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">
    ...
</Grid>

Omdat geen van de rijen of kolommen grootten heeft opgegeven, 1* wordt op alle rijen of kolommen toegepast. Tijdens runtime maakt deze configuratie een uniform Grid , wat betekent dat alle rijen dezelfde hoogte hebben en alle kolommen dezelfde breedte hebben.

Weergaven toevoegen aan een raster

Wanneer u een weergave aan een Gridbepaalde cel toevoegt, voegt u deze toe aan een specifieke cel. Cellen worden gemaakt op posities waar rijen en kolommen elkaar kruisen. Als u een weergave in een cel wilt plaatsen, moet u de locatie van de cel weten. U gebruikt een combinatie van een rijnummer en een kolomnummer om een cel te identificeren.

Rij- en kolomnummering

Het nummeren van rijen en kolommen begint bij nul. De oorsprong is de linkerbovenhoek. Hier volgt een afbeelding met de nummering voor een Grid met vier rijen en twee kolommen.

Afbeelding van een raster met vier rijen en twee kolommen. De nummering wordt weergegeven voor elke rij en kolom. Vanaf het vak linksboven op kolom nul en rij nul, rechtsonder in kolom 1 en rij 3.

Als we bijvoorbeeld een weergave aan de cel rechtsonder willen toevoegen, zeggen we dat de positie van de weergave was row 3 column 1.

Een weergave toevoegen aan een raster met behulp van gekoppelde eigenschappen

U hebt een manier nodig om het rij- en kolomnummer van een weergave op te geven wanneer deze wordt toegevoegd aan een raster. Een oplossing is het definiëren en Row eigenschappen Column van de View basisklasse, zodat u de positie in de weergave rechtstreeks kunt opgeven. Deze techniek zou werken, maar het is niet de meest efficiënte benadering. Weergaven worden niet altijd opgenomen in een Grid, dus soms zouden deze eigenschappen niet nodig zijn. Een betere aanpak is het gebruik van gekoppelde eigenschappen.

Een gekoppelde eigenschap is een eigenschap die in één klasse is gedefinieerd, maar is ingesteld op objecten van andere typen.

U kunt gekoppelde eigenschappen beschouwen als een verzameling sleutel-waardeparen die deel uitmaken van een weergave. Wanneer u een weergave aan een Gridweergave toevoegt, geeft u de rij en kolom op. Met behulp van gekoppelde eigenschappen kunt u een sleutel-waardepaar toevoegen met de sleutel Grid.Row en een waarde waarmee het rijnummer wordt opgegeven. Wanneer de Grid weergave gereed is om te positioneren, wordt de verzameling gecontroleerd om te zien of er een sleutel is met de naam Grid.Row. Als dat zo is, wordt de Grid waarde gebruikt om de weergave te positioneren.

In dit voorbeeld ziet u hoe u een Grid weergave maakt en toevoegt met behulp van gekoppelde eigenschappen:

<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">

    <BoxView Grid.Row="1" Grid.Column="0" Color="Navy" />
    
</Grid>

In dit voorbeeld Grid.Row=1Grid.Column=0 zijn sleutel-waardeparen die worden toegevoegd aan een interne verzameling van de BoxView. Deze Grid waarden worden gebruikt om te bepalen waar de weergave moet worden weergegeven. Grid Dit ziet er als volgt uit als u de toepassing op een apparaat hebt uitgevoerd.

Afbeelding van een raster met drie rijen en twee kolommen. Er wordt een BoxView weergegeven in de tweede rij van de eerste kolom.

Een weergave meerdere rijen of kolommen maken

Er zijn nog twee gekoppelde eigenschappen waar u rekening mee moet houden: Grid.RowSpan en Grid.ColumnSpan. Deze eigenschappen geven aan hoeveel rijen of kolommen de weergave moet innemen. Bekijk bijvoorbeeld de volgende XAML.

<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">

    <BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Color="Navy" />
    
</Grid>

U ziet dat in dit voorbeeld de ColumnSpan optie is ingesteld op 2. Deze weergave neemt twee kolommen in Column 0beslag vanaf . Grid Dit ziet er als volgt uit als u de toepassing op een apparaat hebt uitgevoerd.

Afbeelding van een raster met drie rijen en twee kolommen. Een BoxView wordt in de tweede rij van de eerste kolom geplaatst en omvat beide kolommen.