Anders Hesselbom

Lathund XAML: Positionering

2015-11-09

För att placera ut en knapp på en absolut position, sätt HorizontalAlignment till “Left” och VerticalAlignment till “Top”. Därefter, använd de första två talen i Margin för X- och Y-position. Exempel:

<Button x:Name="button" Content="Button"
HorizontalAlignment="Left" Margin="105,101,0,0"
VerticalAlignment="Top" Width="75"/>

Om man istället vill fästa knappen (eller vad det nu må vara för kontroll man jobbar med) över hela det tillgängliga området så används Margin för att ange avstånd från kanten. Här fyller knappen hela området, men lämnar tre pixlars marginal på alla fyra sidor.

<Button x:Name="button" Content="Button" Margin="3,3,3,3" />

Det innebär att man ganska enkelt kan bygga ett traditionellt användargränssnitt med en meny högst upp och ett statusfält längst ner enligt följande:

<Menu x:Name="menu" Height="28" Margin="0" VerticalAlignment="Top" />
<StatusBar Height="28" Margin="0" VerticalAlignment="Bottom" />

Om jag nu vill använda det resterande området för t.ex. en knapp, så måste jag öka den övre (andra värdet) och den undre (det fjärde värdet) så att inte knappen skymmer menyn eller statusfältet.

<Menu x:Name="menu" Height="28" Margin="0" VerticalAlignment="Top" />
<StatusBar Height="28" Margin="0" VerticalAlignment="Bottom" />
<Button x:Name="button" Content="Button" Margin="3,31,3,31" />

Alternativt kan man använda sig av en contaner som hanterar dockningen, en DockPanel. Här anger jag att menyn ska vara fäst högst upp och att statusfältet ska vara längst ner, genom att hänvisa till den. För att knappen ska ta upp det resterande området, räcker det att jag placerar den sist i listan, och sätter attributet LastChildFill till “True”.

<DockPanel Margin="0,0,0,0" LastChildFill="True">
   <Menu x:Name="menu" DockPanel.Dock="Top" Height="28" />
   <StatusBar DockPanel.Dock="Bottom" Height="29" />
   <Button x:Name="button" Content="Button" Margin="3,3,3,3" />
</DockPanel>

En uppenbar fördel med dockningspanelen är att man inte behöver specificera för knappen i mitten (eller vad man nu har för slags kontroll placerad där) hur stor den ovanliggande menyraden är. Och behöver man inte specificera det, så behöver man inte veta det, utan kan låta den ta upp så mycket plats som sitt innehåll, menyerna, kräver.

<DockPanel Margin="0,0,0,0" LastChildFill="True">
   <Menu x:Name="menu" DockPanel.Dock="Top">
      <MenuItem Header="File" Margin="4,4,4,4">
         <MenuItem Header="Quit" />
      </MenuItem>
   </Menu>
   <StatusBar DockPanel.Dock="Bottom" Height="29" />
   <Button x:Name="button" Content="Button" Margin="3,3,3,3" />
</DockPanel>

Categories: Microsoft .NET