.netavaloniauiavalonia

Create dashed border in avalonia 11

I need to create control theme with dotted border in .net avalonia 11.

In previous versions there was appropriate property BorderDashOffset in border control but it was removed.

Are there any ideas how to achieve that?

Solution

  • The BorderDashOffset on the border element was unfortunately a preview feature that never made it into the stable release.

    The recommended work around is "Any apps needing line dashes will need to fall back to using Shapes directly (as done in WPF/WinUI)."

    See:
    https://github.com/AvaloniaUI/Avalonia/pull/11548
    https://github.com/AvaloniaUI/Avalonia/discussions/8380

    Based on some research on how WPF does this with shapes I was able to create the code below. (see Dotted border in WPF)

    <Grid Background="#FFD267">
    <Grid Margin="20">
        <Rectangle StrokeDashArray="5, 1" Stroke="Black" StrokeThickness="4" RadiusX="7" RadiusY="7"  Fill="White"></Rectangle>
        <TextBlock Margin="10">Hello world!</TextBlock>
    </Grid>
</Grid>

    This should produce the following:

    Dashed Border Example