How to add animation using DSL style without Style?

[Zolomon]

Hi,

I am probably not looking at the correct place, or have misunderstood the requirements, but I cannot find an example how on how to combine the Component(fun ctx -> ...) approach with the available animation APIs in Avalonia.Animation.

Is this possible currently? I apologise for my lack of knowledge, first time I'm using Avalonia.

I want to add animations to my views, preferably without using a style if possible.

Thanks for any help! So far I am loving this project. :)

[JaggerJo]

@Zolomon I see you closed the discussion already.

There is an example of manually starting animations in the Examples/TodoApp project. I think it needs some polishing tho.

[Zolomon]

Thanks! After a couple of hours late this early morning I managed to figure out how to achieve what I wanted:

// Example modified from the Examples/TodoApp
Button.styles (
    let styles = Styles()
    let style = Style(fun x -> x.OfType<Button>().Template().OfType<ContentPresenter>())
    let setter = Setter(ContentPresenter.CornerRadiusProperty, CornerRadius(10.0))
    style.Setters.Add setter
    let animation = Animation()
                            .WithDuration(1.0)
                            .WithEasing(CubicEaseIn())
                            .WithFillMode(FillMode.Forward)
                            .WithKeyFrames [
                                KeyFrame()
                                    .WithCue(0)
                                    .WithSetter(Component.OpacityProperty, 0.0)
                                KeyFrame()
                                    .WithCue(1)
                                    .WithSetter(Component.OpacityProperty, 1.0)
                            ]
    animation.IterationCount <- IterationCount(2UL, IterationType.Many)
    style.Animations.Add ( animation )
    styles.Add style
    styles
)

Think I should be able to create some helper functions to reduce the verbosity.
I also realized that maybe it's better to just put the style in the .XAML anyhow. 😉

[JaggerJo]

Yeah, this might be better done in a styles.xaml file. You could also define it outside of the view, for perf reasons.