Skip to content

Update avalonia labs #290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
edgarfgp merged 2 commits into from
May 27, 2025
Merged

Update avalonia labs #290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b1c6d6c
Update avalonia labs
edgarfgp May 26, 2025
b8cf5fe
format code
edgarfgp May 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Directory.Build.props
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<DisableImplicitSystemValueTupleReference>true</DisableImplicitSystemValueTupleReference>
<ProduceReferenceAssembly>true</ProduceReferenceAssembly>
<AvaloniaVersion>11.3.0</AvaloniaVersion>
<AvaloniaLabsVersion>11.3.0</AvaloniaLabsVersion>
<FabulousVersion>3.0.0-pre22</FabulousVersion>
</PropertyGroup>

Expand Down
22 changes: 12 additions & 10 deletions Directory.Packages.props
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,8 @@
<ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
</PropertyGroup>
<ItemGroup>
<PackageVersion Include="Avalonia.Labs.Controls" Version="11.2.0" />
<PackageVersion Include="Avalonia.Labs.Lottie" Version="11.2.0" />
<PackageVersion Include="Avalonia.Headless" Version="11.2.2" />
<PackageVersion Include="Avalonia.Headless.XUnit" Version="11.2.2" />
<PackageVersion Include="Fabulous" Version="$(FabulousVersion)" />
<PackageVersion Include="FsCheck.NUnit" Version="2.16.6" />
<PackageVersion Include="FSharp.Core" Version="8.0.403" />
<PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.12.0" />
<PackageVersion Include="NUnit" Version="3.14.0" />
<PackageVersion Include="FsUnit" Version="7.0.1" />
<PackageVersion Include="NUnit3TestAdapter" Version="5.0.0" />

<PackageVersion Include="Avalonia" Version="$(AvaloniaVersion)" />
<PackageVersion Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
<PackageVersion Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
Expand All @@ -26,6 +17,17 @@
<PackageVersion Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)" />
<PackageVersion Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)" />
<PackageVersion Include="Avalonia.Controls.TreeDataGrid" Version="11.1.1" />
<PackageVersion Include="Avalonia.Labs.Controls" Version="$(AvaloniaLabsVersion)" />
<PackageVersion Include="Avalonia.Labs.Lottie" Version="$(AvaloniaLabsVersion)" />
<PackageVersion Include="Avalonia.Headless" Version="$(AvaloniaVersion)" />
<PackageVersion Include="Avalonia.Headless.XUnit" Version="$(AvaloniaVersion)" />

<PackageVersion Include="xunit" Version="2.9.2" />
<PackageVersion Include="FsCheck.NUnit" Version="2.16.6" />
<PackageVersion Include="FSharp.Core" Version="8.0.403" />
<PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.12.0" />
<PackageVersion Include="NUnit" Version="3.14.0" />
<PackageVersion Include="FsUnit" Version="7.0.1" />
<PackageVersion Include="NUnit3TestAdapter" Version="5.0.0" />
</ItemGroup>
</Project>
19 changes: 19 additions & 0 deletions extensions/Fabulous.Avalonia.Labs/Controls/Lottie.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ module Lottie =
let RepeatCount =
Attributes.defineAvaloniaPropertyWithEquality Lottie.RepeatCountProperty

let PlayBackRate =
Attributes.defineAvaloniaPropertyWithEquality Lottie.PlayBackRateProperty

let AutoPlay = Attributes.defineAvaloniaPropertyWithEquality Lottie.AutoPlayProperty

[<AutoOpen>]
module LottieBuilders =
type Fabulous.Avalonia.View with
Expand Down Expand Up @@ -53,6 +58,20 @@ type LottieModifiers =
static member inline repeatCount(this: WidgetBuilder<'msg, #IFabLottie>, value: int) =
this.AddScalar(Lottie.RepeatCount.WithValue(value))

/// <summary>Sets the PlayBackRate property.</summary>
/// <param name="this">Current widget.</param>
/// <param name="value">The PlayBackRate value.</param>
[<Extension>]
static member inline playBackRate(this: WidgetBuilder<'msg, #IFabLottie>, value: int) =
this.AddScalar(Lottie.PlayBackRate.WithValue(value))

/// <summary>Sets the AutoPlay property.</summary>
/// <param name="this">Current widget.</param>
/// <param name="value">The AutoPlay value.</param>
[<Extension>]
static member inline autoPlay(this: WidgetBuilder<'msg, #IFabLottie>, value: bool) =
this.AddScalar(Lottie.AutoPlay.WithValue(value))

/// <summary>Link a ViewRef to access the direct AsyncImage control instance.</summary>
/// <param name="this">Current widget.</param>
/// <param name="value">The ViewRef instance that will receive access to the underlying control.</param>
Expand Down
4 changes: 2 additions & 2 deletions extensions/Fabulous.Avalonia.Labs/Fabulous.Avalonia.Labs.fsproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
<Compile Include="Controls\Lottie.fs" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Avalonia.Labs.Controls" VersionOverride="11.2.0"/>
<PackageReference Include="Avalonia.Labs.Lottie" VersionOverride="11.2.0"/>
<PackageReference Include="Avalonia.Labs.Controls" VersionOverride="$(AvaloniaLabsVersion)" />
<PackageReference Include="Avalonia.Labs.Lottie" VersionOverride="$(AvaloniaLabsVersion)" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\..\src\Fabulous.Avalonia\Fabulous.Avalonia.fsproj" />
Expand Down
91 changes: 82 additions & 9 deletions samples/Gallery/Pages/LottiePage.fs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ open Avalonia.Data
open Avalonia.Layout
open Avalonia.Media
open Avalonia.Platform
open Avalonia.Labs.Lottie
open Fabulous.Avalonia
open Fabulous

Expand All @@ -24,12 +25,16 @@ module LottiePage =

type Model =
{ Assets: ObservableCollection<AssetModel>
SelectedAsset: AssetModel }
SelectedAsset: AssetModel
PlaybackRate: int
IsPlaying: bool }

type Msg =
| Previous
| Next
| SelectionChanged of SelectionChangedEventArgs
| SetPlaybackRate of int
| TogglePlayPause of ViewRef<Lottie>

let init () =
let assets =
Expand All @@ -38,7 +43,9 @@ module LottiePage =
|> Seq.map(fun x -> AssetModel(System.IO.Path.GetFileName(x.AbsoluteUri), x.AbsoluteUri))

{ Assets = ObservableCollection<AssetModel>(assets)
SelectedAsset = assets |> Seq.head },
SelectedAsset = assets |> Seq.head
PlaybackRate = 1
IsPlaying = true },
Cmd.none

let update (msg: Msg) model =
Expand Down Expand Up @@ -84,6 +91,19 @@ module LottiePage =
SelectedAsset = selectedAsset },
Cmd.none

| SetPlaybackRate rate -> { model with PlaybackRate = rate }, Cmd.none

| TogglePlayPause lottieRef ->
let cmd =
Cmd.ofEffect(fun _ ->
match lottieRef.TryValue with
| None -> ()
| Some lottie -> if model.IsPlaying then lottie.Pause() else lottie.Resume())

{ model with
IsPlaying = not model.IsPlaying },
cmd

let program =
Program.statefulWithCmd init update
|> Program.withTrace(fun (format, args) -> Debug.WriteLine(format, box args))
Expand All @@ -99,15 +119,22 @@ module LottiePage =
let view () =
Component("LottiePage") {
let! model = Context.Mvu program
let lottieRef = ViewRef<Lottie>()

VStack(spacing = 15.) {
TextBlock("Lottie Animation Demo")
.fontSize(24)
.fontWeight(FontWeight.Bold)
.horizontalAlignment(HorizontalAlignment.Center)
.margin(0, 0, 0, 10)

Panel() {
ComboBox(model.Assets)
.margin(0, 10, 0, 0)
.margin(0, 0, 0, 20)
.selectedItem(model.SelectedAsset)
.horizontalAlignment(HorizontalAlignment.Center)
.onSelectionChanged(SelectionChanged)
.verticalAlignment(VerticalAlignment.Top)
.displayMemberBinding(Binding("Name"))
.width(300)

Grid(coldefs = [ Auto; Star; Auto ], rowdefs = [ Star ]) {
Button(
Expand All @@ -121,11 +148,21 @@ module LottiePage =
)
.background(Colors.Transparent)
.gridColumn(0)

Lottie(model.SelectedAsset.Path)
.repeatCount(-1)
.verticalAlignment(VerticalAlignment.Center)

Border(
Lottie(model.SelectedAsset.Path)
.repeatCount(-1)
.playBackRate(model.PlaybackRate)
.autoPlay(true)
.margin(10)
.reference(lottieRef)
)
.gridColumn(1)
.margin(48.)
.margin(20)
.borderThickness(1)
.cornerRadius(4)
.borderBrush(SolidColorBrush(Colors.Gray))

Button(
Next,
Expand All @@ -138,8 +175,44 @@ module LottiePage =
)
.gridColumn(2)
.background(Colors.Transparent)
.verticalAlignment(VerticalAlignment.Center)
}

HStack(spacing = 20) {
Border(
HStack(spacing = 10) {
TextBlock("Playback Rate:")
.verticalAlignment(VerticalAlignment.Center)

Button("-", SetPlaybackRate(Math.Max(1, model.PlaybackRate - 1)))
.width(30)
.height(30)

TextBlock(string model.PlaybackRate)
.width(30)
.horizontalAlignment(HorizontalAlignment.Center)
.verticalAlignment(VerticalAlignment.Center)

Button("+", SetPlaybackRate(model.PlaybackRate + 1))
.width(30)
.height(30)
}
)
.borderThickness(1)
.borderBrush(SolidColorBrush(Colors.Gray))
.cornerRadius(4)
.padding(10)

Button((if model.IsPlaying then "Pause" else "Play"), TogglePlayPause lottieRef)
.width(100)
}

TextBlock(
"The Lottie control supports animations with various playback options. Use the controls above to adjust playback rate and pause/play the animation."
)
.textWrapping(TextWrapping.Wrap)
.margin(0, 20, 0, 0)
.maxWidth(500)
}
|> _.background(
VisualBrush(
Expand Down