dotted line effect

[hzhappycoder]

Hello, how should I make the dotted line effect

[stevemonaco]

For Shapes or anything else that supports Strokes, there will be a StrokeDashArray parameter. See the focus adorner for a very simple example. Check docs (or WPF docs) to see how the spacing works or otherwise experiment.

[zhongyuanash]

Could you give an example? For instance, if there are a lot of controls in my project that need to draw dashed lines when the IsEnable property is set to False, how can we do it in the most lightweight way?

[stevemonaco]

If you know the geometry, you can draw the path. See https://github.com/stevemonaco/AvaloniaDemos/tree/main/TextOutlineAnimation / https://github.com/stevemonaco/AvaloniaDemos/blob/main/TextOutlineAnimation/Controls/OutlinedText.cs#L43 for an example of it being done with text. Basically, create a pen and draw with it.

Border itself doesn't support StrokeDashArray so if you're looking for control edges, then you're out of luck. You would need to write your own Border control for that and it likely won't be efficient. After that, you would need to re-template most controls to use your custom border. At least as far as I can see.

[zhongyuanash]

The way you sent this demo is only suitable for some specific controls. However, I need the entire project to support dashed lines. Therefore, I really hope there is a way to set the dashed line property directly in the Style. Personally, I think it's inappropriate for you to remove the dashed line attribute from the Border control.

[zhongyuanash]

I tried to do it this way, but found that the controls in VisualBrush.Visual must specify the actual width and height. It's impossible to obtain the width and height of the parent container. This is quite a headache. Could you suggest another way to globally add a dashed border through the style?

[stevemonaco]

Personally, I think it's inappropriate for you to remove the dashed line attribute from the Border control.

I know this is a translation issue, but I have nothing to do with that. The design is basically somewhere between WPF and UWP's. Neither has this feature as a straightforward property as it's not commonly used. The VisualBrush and its surroundings are a bit underdeveloped compared to WPF's in my naive understanding.

The GroupBox uses a more complex approach with stacking, but is probably relevant, even though it's being used as an OpacityMask here:

Avalonia/src/Avalonia.Themes.Simple/Controls/GroupBox.xaml

Lines 28 to 61 in 8d2f147

	<Border Grid.Row="1"
	Grid.RowSpan="3"
	Grid.ColumnSpan="4"
	CornerRadius="{TemplateBinding CornerRadius}"
	BorderThickness="{TemplateBinding BorderThickness}"
	BorderBrush="{TemplateBinding BorderBrush}">
	<Border.OpacityMask>
	<VisualBrush>
	<VisualBrush.Visual>
	<Canvas Background="Transparent">
	<Rectangle Fill="Transparent"
	Width="{Binding #Header.Bounds.Width}"
	Height="{Binding #Header.Bounds.Height}"
	Canvas.Left="{Binding #Header.Bounds.X}"
	Canvas.Top="{Binding #Header.Bounds.Y}"/>
	</Canvas>
	</VisualBrush.Visual>
	</VisualBrush>
	</Border.OpacityMask>
	</Border>
	<!-- ContentPresenter for the header -->
	<Border x:Name="Header"
	Padding="3,0,3,0"
	Grid.Row="0"
	Grid.RowSpan="2"
	Grid.Column="1">
	<ContentPresenter Name="PART_HeaderPresenter"
	Content="{TemplateBinding Header}"
	ContentTemplate="{TemplateBinding HeaderTemplate}"
	HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
	VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
	UseLayoutRounding="{TemplateBinding UseLayoutRounding}" />
	</Border>