UI Layouts

UI Layouts

Master the art of positioning. Nimbus provides powerful containers to arrange your controls.

Jump to

1. StackPanel

The simplest layout. Arranges child elements into a single line, either horizontally or vertically.

Vertical (Default)

Child 1
Child 2
Child 3
Vertical Stack 
<StackPanel>
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
</StackPanel>

Horizontal

Child 1
Child 2
Child 3
Horizontal Stack 
<StackPanel Orientation="Horizontal">
    <Button Content="Left"/>
    <Button Content="Center"/>
    <Button Content="Right"/>
</StackPanel>

2. Grid

The most powerful layout. Defines a flexible grid area consisting of columns and rows.

R0 C0
R0 C1 (2x Width)
R1 (Span 2 Columns)
Grid Layout 
<Grid>
    <!-- Define Structure -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>  <!-- Fixed -->
        <ColumnDefinition Width="*"/>    <!-- Flexible -->
    </Grid.ColumnDefinitions>
    
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>   <!-- Fit Content -->
        <RowDefinition Height="*"/>      <!-- Remaining -->
    </Grid.RowDefinitions>

    <!-- Place Content -->
    <TextBlock Text="Sidebar" Grid.Column="0" Grid.RowSpan="2"/>
    <TextBlock Text="Header" Grid.Column="1" Grid.Row="0"/>
    <TextBlock Text="Content" Grid.Column="1" Grid.Row="1"/>
</Grid>
lightbulb
Tip: Use * (Star) sizing to make columns fill available space proportionally. 2* takes twice the space of *.

3. Border

Draws a border, background, or both around another element. Essential for cards and containers.

Content Inside Border
<Border 
    Background="#2D2D30" 
    BorderBrush="#8774E1" 
    BorderThickness="2" 
    CornerRadius="12" 
    Padding="20">
    
    <TextBlock Text="I'm inside a border!"/>
    
</Border>

4. ScrollViewer

Provides a scrollable area for content that exceeds the visible space.

Scroll me!
End of content
<ScrollViewer Height="200" VerticalScrollBarVisibility="Auto">
    <StackPanel>
        <!-- Lots of content here -->
        <Button Content="Item 1"/>
        <Button Content="Item 2"/>
        ...
        <Button Content="Item 50"/>
    </StackPanel>
</ScrollViewer>

Alignment & Spacing

Control how elements position themselves within their containers.

Margin & Padding

Margin is space outside the border. Padding is space inside.

<!-- Left, Top, Right, Bottom -->
<Button Content="Click" Margin="10,20,10,20" Padding="15"/>

Alignment

Use HorizontalAlignment and VerticalAlignment to position elements.

ValueDescription
LeftAlign to the left side.
CenterCenter in the container.
RightAlign to the right side.
StretchStretch to fill available space (Default).