Animations of controls inside viewbox when scaled up are jagged

I have a window with a content like this:

<Viewbox>
	<Grid Width="30" Height="30">
		<Rectangle Stroke="Black" StrokeThickness="1" Fill="Red" Width="10" Height="10"/>
	</Grid>
</Viewbox>

The code behind has this method:

private void Rectangle_Tapped (object sender, Avalonia.Interactivity.RoutedEventArgs e)
{
	Animation anim = new Animation()
	{
		Duration = TimeSpan.FromSeconds(20d),
		Children = {
			new KeyFrame()
			{
				Cue = new Cue(0d),
				Setters = {
					new Setter { Property = WidthProperty, Value = 10d }
				}
			},
			new KeyFrame()
			{
				Cue = new Cue(1d),
				Setters = {
					new Setter{ Property = WidthProperty, Value = 30d }
				}
			}
		}
	};
	anim.Apply((Animatable) ((Grid) ((Viewbox) Content).Child).Children[0], null, Observable.Return(true), null);
}

The constructor has this line: ((Rectangle) ((Grid) ((Viewbox) Content).Child).Children[0]).Tapped += Rectangle_Tapped; This is the output:

@jmacato

[jmacato]

AFAIK, I can’t register pseudo-classes.

You could add/remove classes with the “Classes” property btw 😃 so you can have a certain class removed/added on codebehind then set your animation in styles

[VoNguyenMinhTriet]

Thanks for the reply! But it’s off topic I guess…