Struggling with wrap functionality

[Molenfeuer]

Hello community,

I'm currently building a log viewer as my first native desktop app (I usually use web technologies). Avalonia is very interesting (and seems to be very resource-efficient compared to the web), but I miss the flexibility of CSS :D

This is how my window looks right now.

This is how it looks when the window is small. The content wraps.

The wrap behavior is exactly what I want (maybe a search bar that uses the whole space when wrapped, but that is just nice to have). But when no wrap is needed, I want a window that looks like one of these.

Option 1	Option 2

I've tried to give a grid panel wrap functionality, but that won't work. So does anybody have an idea to achieve this?

In CSS, I would add the following rules to the container holding my three elements:

.fooBarContainer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

Have a nice day
Leon (Molenfeuer)

[yhay81]

WrapPanel is doing the part it was designed for—sequential placement plus a line break—but it does not have an equivalent of CSS justify-content: space-between. Grid can distribute the remaining width, but it does not decide on its own when an item should move to the next row.

For only three logical regions, I would make the reflow explicit: use a Grid in the wide layout, then use an Avalonia container query to move the search box to row 2 when the toolbar becomes narrow. This also gives you the “search bar uses the whole wrapped row” behavior:

<Border Container.Name="toolbarHost"
        Container.Sizing="Width">
  <Border.Styles>
    <ContainerQuery Name="toolbarHost" Query="max-width:620">
      <Style Selector="Grid.toolbar">
        <Setter Property="ColumnDefinitions" Value="*,Auto" />
      </Style>

      <Style Selector="TextBox.search">
        <Setter Property="Grid.Row" Value="1" />
        <Setter Property="Grid.Column" Value="0" />
        <Setter Property="Grid.ColumnSpan" Value="2" />
        <Setter Property="Margin" Value="0,8,0,0" />
      </Style>

      <Style Selector="StackPanel.right">
        <Setter Property="Grid.Column" Value="1" />
      </Style>
    </ContainerQuery>
  </Border.Styles>

  <Grid Classes="toolbar"
        RowDefinitions="Auto,Auto"
        ColumnDefinitions="Auto,*,Auto">
    <!-- Replace these three regions with your existing controls. -->
    <StackPanel Classes="left"
                Grid.Row="0" Grid.Column="0"
                Orientation="Horizontal" Spacing="8">
      <Button Content="Open" />
    </StackPanel>

    <TextBox Classes="search"
             Grid.Row="0" Grid.Column="1"
             Margin="8,0"
             HorizontalAlignment="Stretch"
             Watermark="Search" />

    <StackPanel Classes="right"
                Grid.Row="0" Grid.Column="2"
                Orientation="Horizontal" Spacing="8">
      <Button Content="Previous" />
      <Button Content="Next" />
    </StackPanel>
  </Grid>
</Border>

At widths above 620, the columns are Auto, *, Auto: the outer regions stay at their desired size and the search box receives all remaining space. At 620 or below, the query changes the grid to *, Auto, keeps the left/right regions on row 0, and moves the search box to row 1 spanning both columns.

Adjust 620 to the sum of the three regions' practical minimum widths. A breakpoint is generally more predictable here than waiting for one control to clip; it also lets you account for margins and translated button text.

This uses the current Avalonia container-query API: responsive layout guide and container query syntax. If the application is still on Avalonia 11, the same Grid arrangement works, but drive the compact/wide state from SizeChanged/a view-model boolean (or use two layout templates), because container queries are the current responsive-layout mechanism.

If you truly need arbitrary children to wrap one-by-one and justify every produced line like CSS flexbox, that calls for a small custom Panel. For these three fixed regions, the breakpoint Grid is much simpler and gives deterministic tab order and sizing.