xaml
Layout besturingselementen
Zoeken…
Canvas
Canvas is de eenvoudigste van alle panelen. Het plaatst items op de opgegeven coördinaten Top/Left .
<Canvas>
<TextBlock
Canvas.Top="50"
Canvas.Left="50"
Text="This is located at 50, 50"/>
<TextBlock
Canvas.Top="100"
Canvas.Left="50"
Width="150"
Height="23"
Text="This is located at 50, 100 with height 23 and width 150"/>
</Canvas>
DockPanel
DockPanel lijnt het besturingselement uit volgens de dock-eigenschap, in de volgorde waarin het in het besturingselement is geplaatst.
OPMERKING: DockPanel maakt deel uit van het WPF-framework, maar wordt niet geleverd met Silverlight / WinRT / UWP. Open-source implementaties zijn echter gemakkelijk te vinden.
<DockPanel LastChildFill="False">
<!-- This will strech along the top of the panel -->
<Button DockPanel.Dock="Top" Content="Top"/>
<!-- This will strech along the bottom of the panel -->
<Button DockPanel.Dock="Bottom" Content="Bottom"/>
<!-- This will strech along the remaining space in the left of the panel -->
<Button DockPanel.Dock="Left" Content="Left"/>
<!-- This will strech along the remaining space in the right of the panel -->
<Button DockPanel.Dock="Right" Content="Right"/>
<!-- Since LastChildFill is false, this will be placed at the panel's right, to the left of the last button-->
<Button DockPanel.Dock="Right" Content="Right"/>
</DockPanel>
<!-- When lastChildFill is true, the last control in the panel will fill the remaining space, no matter what Dock was set to it -->
<DockPanel LastChildFill="True">
<!-- This will strech along the top of the panel -->
<Button DockPanel.Dock="Top" Content="Top"/>
<!-- This will strech along the bottom of the panel -->
<Button DockPanel.Dock="Bottom" Content="Bottom"/>
<!-- This will strech along the remaining space in the left of the panel -->
<Button DockPanel.Dock="Left" Content="Left"/>
<!-- This will strech along the remaining space in the right of the panel -->
<Button DockPanel.Dock="Right" Content="Right"/>
<!-- Since LastChildFill is true, this will fill the remaining space-->
<Button DockPanel.Dock="Right" Content="Fill"/>
</DockPanel>
StackPanel
StackPanel plaatst zijn bedieningselementen achter elkaar. Het werkt als een dockpaneel met alle docks van de besturing ingesteld op dezelfde waarde.
<!-- The default StackPanel is oriented vertically, so the controls will be presented in order from top to bottom -->
<StackPanel>
<Button Content="First"/>
<Button Content="Second"/>
<Button Content="Third"/>
<Button Content="Fourth"/>
</StackPanel>
<!-- Setting the Orientation property to Horizontal will display the control in order from left to right (or right to left, according to the FlowDirection property) -->
<StackPanel Orientation="Horizontal">
<Button Content="First"/>
<Button Content="Second"/>
<Button Content="Third"/>
<Button Content="Fourth"/>
</StackPanel>
Gebruik een dockpaneel om items van onder naar boven te stapelen.
rooster
Grid wordt gebruikt om tabellay-outs te maken.
Basic rijen en kolommen definities
<Grid>
<!-- Define 3 columns with width of 100 -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!-- Define 3 rows with height of 50 -->
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<!-- This is placed at the top left (first row, first column) -->
<Button
Grid.Column="0"
Grid.Row="0"
Content="Top Left"/>
<!-- This is placed at the top left (first row, second column) -->
<Button
Grid.Column="1"
Grid.Row="0"
Content="Top Center"/>
<!-- This is placed at the center (second row, second column) -->
<Button
Grid.Column="1"
Grid.Row="1"
Content="Center"/>
<!-- This is placed at the bottom right (third row, third column) -->
<Button
Grid.Column="2"
Grid.Row="2"
Content="Bottom Right"/>
</Grid>
OPMERKING: Alle volgende voorbeelden gebruiken alleen kolommen, maar zijn ook van toepassing op rijen .
Automatische formaatdefinities
Kolommen en rijen kunnen worden gedefinieerd met "Auto" als hun breedte / hoogte. Automatisch formaat neemt zoveel ruimte in beslag als nodig is om de inhoud weer te geven, en niet meer.
Definities van automatisch formaat kunnen worden gebruikt met definities van vast formaat.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<!-- This column won't take much space -->
<Button Grid.Column="0" Content="Small"/>
<!-- This column will take much more space -->
<Button Grid.Column="1" Content="This text will be very long."/>
<!-- This column will take exactly 50 px -->
<Button Grid.Column="2" Content="This text will be cut"/>
</Grid>
Eenvoudige definities van sterformaat
Kolommen en rijen kunnen worden gedefinieerd met * als hun breedte / hoogte. Rijen / kolommen in sterformaat nemen zoveel ruimte in beslag als ze hebben , ongeacht de inhoud.
Definities in sterformaat kunnen worden gebruikt met vaste en automatische definities. De stergrootte is de standaardwaarde en dus kan de kolombreedte of rijhoogte worden weggelaten.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<!-- This column will be as wide as it can -->
<Button Grid.Column="0" Content="Small"/>
<!-- This column will take exactly 50 px -->
<Button Grid.Column="2" Content="This text will be cut"/>
</Grid>
Proportionele definities van sterformaat
Naast het feit dat ster zoveel mogelijk ruimte inneemt, zijn sterdefinities ook evenredig aan elkaar. Als er niets anders wordt vermeld, neemt elke sterdefinitie evenveel ruimte in beslag als de anderen in het huidige raster.
Het is echter mogelijk om een verhouding tussen de afmetingen van verschillende definities te definiëren door er eenvoudigweg een vermenigvuldiger aan toe te voegen. Dus een kolom gedefinieerd als 2* is twee keer zo breed als een kolom gedefinieerd als * . De breedte van een enkele eenheid wordt berekend door de beschikbare ruimte te delen door de som van de vermenigvuldigers (als er geen is, wordt deze geteld als 1).
Dus een raster met 3 kolommen gedefinieerd als * , 2* , * wordt gepresenteerd als 1/4, 1/2, 1/4.
En één met 2 kolommen gedefinieerd als 2* , 3* wordt 2/5, 3/5 gepresenteerd.
Als de set automatische of vaste definities bevat, worden deze eerst berekend en daarna nemen de sterdefinities de resterende ruimte in beslag.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- This column will be as wide as the third column -->
<Button Grid.Column="0" Content="Small"/>
<!-- This column will be twice as wide as the rest -->
<Button Grid.Column="1" Content="This text will be very long."/>
<!-- This column will be as wide as the first column -->
<Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>
Kolom / rijbereik
Het is mogelijk om een besturingselement buiten de cel uit te rekken door de rij / kolomruimte in te stellen. De ingestelde waarde is het aantal rijen / kolommen th
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- This control will streach across most of the grid -->
<Button Grid.Column="0" Grid.ColumnSpan="2" Content="Small"/>
<Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>
WrapPanel
Het wikkelpaneel werkt op dezelfde manier als het stapelpaneel. Behalve wanneer het herkent dat de items groter zijn, zal het ze vervolgens in een nieuwe rij / kolom wikkelen, afhankelijk van de richting.
Horizontale oriëntatie
<WrapPanel Width="100">
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</WrapPanel>
Verticaal wikkelpaneel
<WrapPanel Height="70" Orientation="Vertical">
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</WrapPanel>
UniformGrid
Uniform raster plaatst al zijn kinderen in een rasterlay-out, elk kind in zijn eigen cel. Alle cellen hebben dezelfde grootte. Het kan worden gezien als een afkorting voor een raster waarin alle rij- en kolomdefinities zijn ingesteld op *
Standaard rijen en kolommen
Standaard probeert de UniformGrid een gelijk aantal rijen en kolommen te maken. Wanneer een rij te lang wordt, wordt een nieuwe kolom toegevoegd.
Deze code produceert een raster van 3x3 met de eerste 2 rijen gevuld en de laatste met één knop:
<UniformGrid>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</UniformGrid>
Opgegeven rijen / kolommen
U kunt de UniformGrid precies vertellen hoeveel rijen en / of kolom u wilt hebben.
<UniformGrid Columns="2" >
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</UniformGrid>
OPMERKING: als zowel rijen als kolommen zijn ingesteld en er meer kinderen dan cellen zijn, worden de laatste kinderen in het raster niet weergegeven
FirstColumn Property
Nadat de eigenschap Kolommen is ingesteld, kunt u de eigenschap FirstColumn instellen. Deze eigenschap voert x lege cellen in op de eerste rij voordat het eerste kind wordt weergegeven. FirstColumn moet worden ingesteld op een getal kleiner dan de eigenschap Kolommen.
In dit voorbeeld wordt de eerste knop weergegeven in de tweede kolom van de eerste rij:
<UniformGrid Columns="2" FirstColumn="1">
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</UniformGrid>
RelativePanel
RelativePanel is geïntroduceerd in Windows 10 en wordt voornamelijk gebruikt om adaptieve lay-outs te ondersteunen, waarbij de onderliggende elementen van het paneel anders worden ingedeeld, afhankelijk van de beschikbare ruimte. RelativePanel wordt meestal gebruikt met visuele statussen , die worden gebruikt om de lay-outconfiguratie te schakelen, zich aan te passen aan de scherm- of venstergrootte, oriëntatie of use case. De onderliggende elementen gebruiken gekoppelde eigenschappen die bepalen waar ze zich bevinden ten opzichte van het paneel en elkaar.
<RelativePanel
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Rectangle
x:Name="rectangle1"
RelativePanel.AlignLeftWithPanel="True"
Width="360"
Height="50"
Fill="Red"/>
<Rectangle
x:Name="rectangle2"
RelativePanel.Below="rectangle1"
Width="360"
Height="50"
Fill="Green" />
</RelativePanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!--VisualState to be triggered when window width is >=720 effective pixels.-->
<AdaptiveTrigger
MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter
Target="rectangle2.(RelativePanel.Below)"
Value="{x:Null}" />
<Setter
Target="rectangle2.(RelativePanel.RightOf)"
Value="rectangle1" />
<Setter
Target="rectangle1.(RelativePanel.AlignLeftWithPanel)"
Value="False" />
<Setter
Target="rectangle1.(RelativePanel.AlignVerticalCenterWithPanel)"
Value="True" />
<Setter
Target="rectangle2.(RelativePanel.AlignVerticalCenterWithPanel)"
Value="True" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>