Add bindings

src/Avalonia.FuncUI.ControlCatalog/Avalonia.FuncUI.ControlCatalog/Views/MainView.fs

@@ -76,11 +76,10 @@ module MainView =
                     TabItem.header "SplitView Demo"
                     TabItem.content (ViewBuilder.Create<SplitViewDemo.Host>([]))
                 ]
-                // ToDo: return it back when styles will be worked
-                //TabItem.create [
-                //    TabItem.header "Styles Demo"
-                //    TabItem.content (ViewBuilder.Create<StylesDemo.Host>([]))
-                //]
+                TabItem.create [
+                   TabItem.header "Styles Demo"
+                   TabItem.content (ViewBuilder.Create<StylesDemo.Host>([]))
+                ]
                 TabItem.create [
                     TabItem.header "TextBox Demo"
                     TabItem.content (ViewBuilder.Create<TextBoxDemo.Host>([]))

src/Avalonia.FuncUI.ControlCatalog/Avalonia.FuncUI.ControlCatalog/Views/Tabs/Styles.xaml

@@ -1,7 +1,16 @@
 <Styles
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="using:System">
+    <Styles.Resources>
+        <ResourceDictionary>
+            <!-- FluentTheme has no common FintSize Resources. -->
+            <sys:Double x:Key="FontSizeSmall">10</sys:Double>
+            <sys:Double x:Key="FontSizeNormal">12</sys:Double>
+            <sys:Double x:Key="FontSizeLarge">16</sys:Double>
+        </ResourceDictionary>
+    </Styles.Resources>
+
     <Style Selector="Button.round /template/ ContentPresenter">
         <Setter Property="CornerRadius" Value="10"/>
     </Style>
@@ -22,9 +31,9 @@
     </Style>
 
     <Style Selector="Border.drag">
-        <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}"/>
+        <Setter Property="Background" Value="{DynamicResource SystemControlHighlightAccentBrush}"/>
     </Style>
     <Style Selector="Border.drop">
-        <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}"/>
+        <Setter Property="Background" Value="{DynamicResource SystemControlHighlightAltListAccentMediumBrush}"/>
     </Style>
 </Styles>

src/Avalonia.FuncUI.UnitTests/Avalonia.FuncUI.UnitTests.fsproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFramework>net6.0</TargetFramework>
@@ -16,6 +16,7 @@
     <Compile Include="VirtualDom\VirtualDom.ModuleTests.fs" />
     <Compile Include="VirtualDom\VirtualDom.DifferTests.fs" />
     <Compile Include="VirtualDom\VirtualDom.PatcherTests.fs" />
+    <Compile Include="DSL\Base\StyledElementTests.fs" />
     <Compile Include="State.fs" />
     <Compile Include="Program.fs" />
   </ItemGroup>

src/Avalonia.FuncUI.UnitTests/DSL/Base/StyledElementTests.fs

@@ -0,0 +1,149 @@
+namespace Avalonia.FuncUI.UnitTests.DSL
+
+open Avalonia
+open Avalonia.Controls
+open global.Xunit
+
+module StyledElementTests =
+    open Avalonia.FuncUI.VirtualDom
+    open Avalonia.FuncUI.DSL
+    open Avalonia.FuncUI.Types
+    open Avalonia.Styling
+
+    let twoAttrs<'x, 't> (attr: 'x -> IAttr<'t>) a b =
+        [ attr a :> IAttr ], [ attr b :> IAttr ]
+
+    [<Fact>]
+    let ``classes equality with string list`` () =
+        let valueList() = [ "class1"; "class2" ]
+
+        let classes1 = valueList()
+        let classes2 = valueList()
+
+        let stringList =
+            (classes1, classes2)
+            ||> twoAttrs StyledElement.classes
+            |> Differ.diffAttributes
+
+        Assert.Empty stringList
+
+    [<Fact>]
+    let ``classes equality with same classes instance`` () =
+        let classes = Classes()
+        classes.Add "class1"
+        classes.Add "class2"
+
+        let sameClassesInstance =
+            (classes, classes) ||> twoAttrs StyledElement.classes |> Differ.diffAttributes
+
+        Assert.Empty sameClassesInstance
+
+    [<Fact>]
+    let ``classes equality with different classes instance`` () =
+        let classes1 = Classes()
+        classes1.Add "class1"
+        classes1.Add "class2"
+
+        let classes2 = Classes()
+        classes2.Add "class1"
+        classes2.Add "class2"
+
+        let differentClassesInstance =
+            (classes1, classes2) ||> twoAttrs StyledElement.classes |> Differ.diffAttributes
+
+        Assert.Empty differentClassesInstance
+
+    let initStyle () =
+        let s = Style(fun x -> x.Is<Control>())
+        s.Setters.Add(Setter(Control.TagProperty, "foo"))
+        s :> IStyle
+
+    [<Fact>]
+    let ``styles equality with style list has same style instance`` () =
+        let style = initStyle ()
+
+        let styleList () = [ style ]
+
+        let styles1 = styleList ()
+        let styles2 = styleList ()
+
+        let styleList =
+            (styles1, styles2) ||> twoAttrs StyledElement.styles |> Differ.diffAttributes
+
+        Assert.Empty styleList
+
+
+    [<Fact>]
+    let ``styles equality with style list has different style instance`` () =
+
+        let style1 = initStyle ()
+        let style2 = initStyle ()
+
+        let styleList =
+            ([ style1 ], [ style2 ]) ||> twoAttrs StyledElement.styles |> Differ.diffAttributes
+
+        match Assert.Single styleList with
+        | Delta.AttrDelta.Property { Accessor = InstanceProperty { Name = propName }
+                                     Value = Some(:? list<IStyle> as [ value ]) } ->
+            Assert.Equal("Styles", propName)
+            Assert.NotEqual(style1, value)
+            Assert.Equal(style2, value)
+
+        | _ -> Assert.Fail $"Not expected delta\n{styleList}"
+
+    [<Fact>]
+    let ``styles equality with Styles property has same instance`` () =
+        let style = initStyle ()
+
+        let styles = Styles()
+        styles.Add style
+
+        let styles1 = styles
+        let styles2 = styles
+
+        let styleList =
+            (styles1, styles2) ||> twoAttrs StyledElement.styles |> Differ.diffAttributes
+
+        Assert.Empty styleList
+
+    [<Fact>]
+    let ``styles equality with Styles property has different Styles instance has same style instance`` () =
+        let style = initStyle ()
+
+        let styles1 = Styles()
+        styles1.Add style
+        styles1.Resources.Add("key", "value")
+
+        let styles2 = Styles()
+        styles2.Add style
+        styles2.Resources.Add("key", "value")
+
+        let styleList =
+            (styles1, styles2) ||> twoAttrs StyledElement.styles |> Differ.diffAttributes
+
+        Assert.Empty styleList
+
+    [<Fact>]
+    let ``styles equality with Styles property has different Styles instance has different style instance`` () =
+        let style1 = initStyle ()
+        let style2 = initStyle ()
+
+        let styles1 = Styles()
+        styles1.Add style1
+        styles1.Resources.Add("key", "value")
+
+        let styles2 = Styles()
+        styles2.Add style2
+        styles2.Resources.Add("key", "value")
+
+        let styleList =
+            (styles1, styles2) ||> twoAttrs StyledElement.styles |> Differ.diffAttributes
+
+        match Assert.Single styleList with
+        | Delta.AttrDelta.Property { Accessor = InstanceProperty { Name = propName }
+                                     Value = Some(:? Styles as value) } ->
+            Assert.Equal("Styles", propName)
+            Assert.NotEqual<Styles>(styles1, value)
+            Assert.Equal<Styles>(styles2, value)
+
+        | _ -> Assert.Fail $"Not expected delta\n{styleList}"

src/Avalonia.FuncUI/Avalonia.FuncUI.fsproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFramework>net6.0</TargetFramework>
@@ -63,6 +63,7 @@
     <Compile Include="DSL\Base\Layoutable.fs" />
     <Compile Include="DSL\Base\Visual.fs" />
     <Compile Include="DSL\Base\InputElement.fs" />
+    <Compile Include="DSL\Base\IDataTemplateHost.fs" />
     <Compile Include="DSL\Base\Control.fs" />
     <Compile Include="DSL\Base\StyledElement.fs" />
     <Compile Include="DSL\Base\Panel.fs" />
@@ -97,6 +98,8 @@
     <Compile Include="DSL\Shapes\Path.fs" />
     <Compile Include="DSL\Calendar\Calendar.fs" />
     <Compile Include="DSL\Calendar\CalendarDatePicker.fs" />
+    <Compile Include="DSL\Documents\TextDecoration.fs" />
+    <Compile Include="DSL\Documents\Inline.fs" />
     <Compile Include="DSL\Documents\Run.fs" />
     <Compile Include="DSL\Documents\Span.fs" />
     <Compile Include="DSL\Documents\Bold.fs" />

src/Avalonia.FuncUI/DSL/Base/AvaloniaObject.fs

@@ -3,9 +3,12 @@
 open Avalonia
 open Avalonia.FuncUI
 open Avalonia.FuncUI.Types
+open System.Threading
 
 [<AutoOpen>]
 module AvaloniaObject =
+    open Avalonia.FuncUI.Types
+    open Avalonia.FuncUI.Builder
 
     type AvaloniaObject with
 
@@ -31,9 +34,20 @@
                 InitFunction.Function = (fun (control: obj) -> func (control :?> 't))
             }
 
+        static member onPropertyChanged<'t when 't :> AvaloniaObject>(func: AvaloniaPropertyChangedEventArgs -> unit, ?subPatchOptions)  : IAttr<'t> =
+            let name = nameof Unchecked.defaultof<'t>.PropertyChanged
+            let factory: AvaloniaObject * (AvaloniaPropertyChangedEventArgs -> unit) * CancellationToken -> unit =
+                (fun (control, func, token) ->
+                    let control = control :?> 't
+                    let disposable = control.PropertyChanged.Subscribe(func)
+
+                    token.Register(fun () -> disposable.Dispose()) |> ignore)
+
+            AttrBuilder<'t>.CreateSubscription<AvaloniaPropertyChangedEventArgs>(name, factory, func, ?subPatchOptions = subPatchOptions)
+
         member this.Bind(prop: DirectPropertyBase<'value>, readable: #IReadable<'value>) : unit =
             let _ = this.Bind(property = prop, source = readable.ImmediateObservable)
             ()
 
         member this.Bind(prop: StyledProperty<'value>, readable: #IReadable<'value>) : unit =
             let _ = this.Bind(property = prop, source = readable.ImmediateObservable)

src/Avalonia.FuncUI/DSL/Base/Control.fs

@@ -3,6 +3,8 @@ namespace Avalonia.FuncUI.DSL
 [<AutoOpen>]
 module Control =
     open Avalonia.Controls
+    open Avalonia.Controls.Primitives
+    open Avalonia.Interactivity
     open Avalonia.FuncUI.Types
     open Avalonia.FuncUI.Builder
 
@@ -32,3 +34,28 @@ module Control =
         static member contextMenu<'t when 't :> Control>(menu: ContextMenu) : IAttr<'t> =
             AttrBuilder<'t>.CreateProperty<ContextMenu>(Control.ContextMenuProperty, menu, ValueNone)
 
+        static member contextFlyout<'t when 't :> Control>(flyoutView: IView<FlyoutBase> option) : IAttr<'t> =
+            let view =
+                match flyoutView with
+                | Some view -> Some (view :> IView)
+                | None -> None
+
+            AttrBuilder<'t>.CreateContentSingle(Control.ContextFlyoutProperty, view)
+
+        static member contextFlyout<'t when 't :> Control>(flyoutView: IView<FlyoutBase>) : IAttr<'t> =
+            AttrBuilder<'t>.CreateContentSingle(Control.ContextFlyoutProperty, Some (flyoutView :> IView))
+
+        static member contextFlyout<'t when 't :> Control>(flyout: FlyoutBase) : IAttr<'t> =
+            AttrBuilder<'t>.CreateProperty<FlyoutBase>(Control.ContextFlyoutProperty, flyout, ValueNone)
+
+        static member onContextRequested<'t when 't :> Control>(func: ContextRequestedEventArgs -> unit, ?subPatchOptions) =
+            AttrBuilder<'t>.CreateSubscription<ContextRequestedEventArgs>(Control.ContextRequestedEvent, func, ?subPatchOptions = subPatchOptions)
+
+        static member onLoaded<'t when 't :> Control>(func: RoutedEventArgs -> unit, ?subPatchOptions) =
+            AttrBuilder<'t>.CreateSubscription<RoutedEventArgs>(Control.LoadedEvent, func, ?subPatchOptions = subPatchOptions)
+
+        static member onUnloaded<'t when 't :> Control>(func: RoutedEventArgs -> unit, ?subPatchOptions) =
+            AttrBuilder<'t>.CreateSubscription<RoutedEventArgs>(Control.UnloadedEvent, func, ?subPatchOptions = subPatchOptions)
+
+        static member onSizeChanged<'t when 't :> Control>(func: SizeChangedEventArgs -> unit, ?subPatchOptions) =
+            AttrBuilder<'t>.CreateSubscription<SizeChangedEventArgs>(Control.SizeChangedEvent, func, ?subPatchOptions = subPatchOptions)

src/Avalonia.FuncUI/DSL/Base/IDataTemplateHost.fs

@@ -0,0 +1,49 @@
+namespace Avalonia.FuncUI.DSL
+
+[<AutoOpen>]
+module IDataTemplateHost =
+    open Avalonia.FuncUI.Types
+    open Avalonia.FuncUI.Builder
+    open Avalonia.Controls.Templates
+
+    module private Internals =
+        let patchDataTemplates(dataTemplates: DataTemplates) (templates: IDataTemplate seq) =
+
+            if Seq.isEmpty templates then
+                dataTemplates.Clear()            
+            else
+                templates
+                |> Seq.except dataTemplates
+                |> dataTemplates.RemoveAll
+
+                for newIndex, template in Seq.indexed templates do
+                    let oldIndex = dataTemplates |> Seq.tryFindIndex template.Equals
+
+                    match oldIndex with
+                    | Some oldIndex when oldIndex = newIndex -> ()
+                    | Some oldIndex -> dataTemplates.Move(oldIndex, newIndex)
+                    | None -> dataTemplates.Insert(newIndex, template)
+
+    type IDataTemplateHost with
+        static member dataTemplates<'t when 't :> IDataTemplateHost>(templates: DataTemplates) : IAttr<'t> =
+            let getter: 't -> DataTemplates = (fun control -> control.DataTemplates)
+
+            let setter: ('t * DataTemplates -> unit) = (fun (control, value) -> Internals.patchDataTemplates control.DataTemplates value)
+
+            let compare: obj * obj -> bool = (fun (a, b) ->
+                let a = a :?> DataTemplates
+                let b = b :?> DataTemplates
+                System.Linq.Enumerable.SequenceEqual(a, b))
+
+            let factory = fun () -> DataTemplates()
+
+            AttrBuilder<'t>.CreateProperty<DataTemplates>("DataTemplates", templates, ValueSome getter, ValueSome setter, ValueSome compare, factory)
+
+        static member dataTemplates<'t when 't :> IDataTemplateHost>(templates: IDataTemplate list) : IAttr<'t> =
+            let getter: 't -> IDataTemplate list = (fun control -> control.DataTemplates |> Seq.toList)
+
+            let setter: ('t * IDataTemplate list -> unit) = (fun (control, value) -> Internals.patchDataTemplates control.DataTemplates value)
+
+            let factory = fun () -> []
+
+            AttrBuilder<'t>.CreateProperty<IDataTemplate list>("DataTemplates", templates, ValueSome getter, ValueSome setter, ValueNone, factory)