feat: resolve highlight binding issue.

demo/Ursa.Demo/Pages/NavMenuDemo.axaml

@@ -13,6 +13,7 @@
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left">
+            <!--
             <TextBlock Text="{ReflectionBinding #menu2.SelectedItem.Header}"></TextBlock>
             <u:NavMenu Name="menu2" Width="300" IsHorizontalCollapsed="{Binding #collapse.IsChecked}">
                 <u:NavMenuItem Header="Menu 1">
@@ -44,29 +45,32 @@
                 </u:NavMenuItem>
             </u:NavMenu>
             <u:Divider Content="Divider" />
+            -->
             <TextBlock Text="{ReflectionBinding #menu.SelectedItem.Header}" />
             <ToggleButton Name="collapse">Collapse</ToggleButton>
+
             <u:NavMenu
                 Name="menu"
                 Width="300"
+                HeaderBinding="{Binding Header}"
+                IconBinding="{Binding}"
                 IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
                 ItemsSource="{Binding MenuItems}"
-                HeaderBinding="{Binding Header}"
+                SubMenuBinding="{Binding Children}">
-                SubMenuBinding="{Binding  Children}"
-                IconBinding="{Binding}">
                 <u:NavMenu.Styles>
                     <Style Selector="Rectangle">
-                        <Setter Property="Fill" Value="Blue"></Setter>
+                        <Setter Property="Fill" Value="Blue" />
                     </Style>
                     <Style Selector="Rectangle.Active">
-                        <Setter Property="Fill" Value="Red"></Setter>
+                        <Setter Property="Fill" Value="Red" />
                     </Style>
                 </u:NavMenu.Styles>
                 <u:NavMenu.IconTemplate>
                     <DataTemplate>
                         <Rectangle
-                            Classes.Active="{Binding $parent[u:NavMenuItem].IsHighlighted}"
+                            Width="10"
-                            Width="10" Height="10" >
+                            Height="10"
+                            Classes.Active="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}">
                         </Rectangle>
                     </DataTemplate>
                 </u:NavMenu.IconTemplate>

demo/Ursa.Demo/Pages/NavMenuDemo.axaml.cs

@@ -1,5 +1,8 @@
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Controls.Shapes;
+using Avalonia.Input;
+using Avalonia.LogicalTree;
 using Avalonia.Markup.Xaml;
 using Ursa.Demo.ViewModels;
 
@@ -12,4 +15,13 @@ public partial class NavMenuDemo : UserControl
         InitializeComponent();
         this.DataContext = new NavMenuDemoViewModel();
     }
+
+    private void InputElement_OnPointerPressed(object? sender, PointerPressedEventArgs e)
+    {
+        if (sender is Rectangle c)
+        {
+            c.ApplyStyling();
+            var ancestors = c.GetLogicalAncestors();
+        }
+    }
 }

src/Ursa.Themes.Semi/Controls/NavMenu.axaml

@@ -26,6 +26,13 @@
                 Grid.Row="0"
                 Background="{TemplateBinding u:NavMenuItem.Background}"
                 CornerRadius="4">
+                <Border.ContextFlyout>
+                    <Flyout>
+                        <Border>
+                            <StackPanel Name="PART_OverflowPanel"></StackPanel>
+                        </Border>
+                    </Flyout>
+                </Border.ContextFlyout>
                 <Grid HorizontalAlignment="Stretch">
                     <Grid.Margin>
                         <MultiBinding Converter="{StaticResource NavMarginConverter}">
@@ -66,54 +73,47 @@
                     </PathIcon>
                 </Grid>
             </Border>
-            <LayoutTransformControl
+            <ItemsPresenter
-                Name="PART_Transform"
+                Name="PART_ItemsPresenter"
                 Grid.Row="1"
                 VerticalAlignment="Top"
-                RenderTransformOrigin="0.5,0">
+                Grid.IsSharedSizeScope="True"
-                <ItemsPresenter Grid.IsSharedSizeScope="True" ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}" />
+                ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}"
-                <LayoutTransformControl.Transitions>
+                RenderTransformOrigin="0.5,0" >
+                <ItemsPresenter.Transitions>
                     <Transitions>
-                        <TransformOperationsTransition Property="LayoutTransform" Duration="0.1" />
+                        <DoubleTransition Property="Height" Duration="0.1"></DoubleTransition>
+                        <TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
                     </Transitions>
-                </LayoutTransformControl.Transitions>
+                </ItemsPresenter.Transitions>
-            </LayoutTransformControl>
+            </ItemsPresenter>
         </Grid>
     </ControlTemplate>
     <ControlTemplate x:Key="TopLevelCollapsedNavMenuItemTemplate" TargetType="u:NavMenuItem">
         <Border
             Name="PART_Border"
-            CornerRadius="4"
             MinWidth="32"
             MinHeight="32"
+            HorizontalAlignment="Left"
             Background="{TemplateBinding u:NavMenuItem.Background}"
-            HorizontalAlignment="Left">
+            CornerRadius="4">
             <Grid>
                 <ContentPresenter
                     Name="PART_IconPresenter"
                     Content="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}"
                     ContentTemplate="{Binding IconTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
-                <Popup
-                    Name="PART_Popup"
-                    IsLightDismissEnabled="True"
-                    Placement="RightEdgeAlignedTop"
-                    PlacementTarget="{Binding #PART_IconPresenter}">
-                    <Border Theme="{DynamicResource CardBorder}" Grid.IsSharedSizeScope="True" Padding="4">
-                        <ItemsPresenter ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}" />
-                    </Border>
-                </Popup>
             </Grid>
         </Border>
     </ControlTemplate>
     <ControlTemplate x:Key="CollapsedNavMenuItemTemplate" TargetType="u:NavMenuItem">
         <Border
             Name="PART_Border"
-            CornerRadius="4"
             MinWidth="24"
             MinHeight="24"
+            HorizontalAlignment="Stretch"
             Background="{TemplateBinding u:NavMenuItem.Background}"
-            HorizontalAlignment="Stretch">
+            CornerRadius="4">
-            <Grid >
+            <Grid>
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="Auto" SharedSizeGroup="Icon" />
                     <ColumnDefinition Width="*" />
@@ -137,16 +137,19 @@
                     Width="8"
                     Height="8"
                     Margin="12,0"
-                    RenderTransform="rotate(-90deg)"
                     Data="{DynamicResource NavigationMenuItemExpandIconGlyph}"
-                    Foreground="{DynamicResource NavigationMenuItemExpandIconForeground}">
+                    Foreground="{DynamicResource NavigationMenuItemExpandIconForeground}"
-                </PathIcon>
+                    RenderTransform="rotate(-90deg)" />
-                <Popup Grid.Column="0"
+                <Popup
                     Name="PART_Popup"
+                    Grid.Column="0"
                     IsLightDismissEnabled="True"
                     Placement="RightEdgeAlignedTop"
                     PlacementTarget="{Binding #PART_Border}">
-                    <Border Theme="{DynamicResource CardBorder}" Grid.IsSharedSizeScope="True" Padding="4">
+                    <Border
+                        Padding="4"
+                        Grid.IsSharedSizeScope="True"
+                        Theme="{DynamicResource CardBorder}">
                         <ItemsPresenter ItemsPanel="{Binding ItemsPanel, RelativeSource={RelativeSource TemplatedParent}}" />
                     </Border>
                 </Popup>
@@ -154,14 +157,20 @@
         </Border>
     </ControlTemplate>
     <ControlTheme x:Key="{x:Type u:NavMenuItem}" TargetType="u:NavMenuItem">
-        <Setter Property="Background" Value="Transparent"></Setter>
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="ItemsPanel">
+            <ItemsPanelTemplate>
+                <u:OverflowStackPanel></u:OverflowStackPanel>
+            </ItemsPanelTemplate>
+        </Setter>
         <Style Selector="^">
             <Setter Property="Template" Value="{StaticResource DefaultNavMenuItemTemplate}" />
             <Style Selector="^:selected">
                 <Setter Property="Background" Value="{DynamicResource NavigationMenuItemSelectedBackground}" />
             </Style>
-            <Style Selector="^:vertical-collapsed /template/ LayoutTransformControl#PART_Transform">
+            <Style Selector="^:vertical-collapsed /template/ ItemsPresenter#PART_ItemsPresenter">
-                <Setter Property="LayoutTransform" Value="scale(1,0)" />
+                <Setter Property="Height" Value="0"></Setter>
+                <Setter Property="RenderTransform" Value="scale(1,0)" />
             </Style>
             <Style Selector="^:vertical-collapsed /template/ PathIcon#PART_ExpanderIcon">
                 <Setter Property="RenderTransform" Value="rotate(180deg)" />
@@ -170,18 +179,18 @@
                 <Setter Property="IsVisible" Value="False" />
             </Style>
             <Style Selector="^ /template/ Border#PART_Border:pointerover">
-                <Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}"></Setter>
+                <Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
             </Style>
         </Style>
-        
+<!--
         <Style Selector="^:horizontal-collapsed:first-level">
             <Setter Property="Template" Value="{StaticResource TopLevelCollapsedNavMenuItemTemplate}" />
             <Style Selector="^ /template/ Border#PART_Border">
-                <Setter Property="ToolTip.Tip" Value="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}"/>
+                <Setter Property="ToolTip.Tip" Value="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}" />
-                <Setter Property="ToolTip.ShowDelay" Value="0"/>
+                <Setter Property="ToolTip.ShowDelay" Value="0" />
             </Style>
             <Style Selector="^/template/ Border#PART_Border:pointerover">
-                <Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}"></Setter>
+                <Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
             </Style>
         </Style>
         <Style Selector="^:horizontal-collapsed:not(:first-level)">
@@ -193,9 +202,10 @@
                 <Setter Property="IsVisible" Value="False" />
             </Style>
             <Style Selector="^/template/ Border#PART_Border:pointerover">
-                <Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}"></Setter>
+                <Setter Property="Background" Value="{DynamicResource NavigationMenuItemPointeroverBackground}" />
             </Style>
         </Style>
+        -->
     </ControlTheme>
 
 </ResourceDictionary>

src/Ursa/Controls/NavMenu/NavMenuItem.cs

@@ -5,7 +5,9 @@ using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Mixins;
 using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
+using Avalonia.Data;
 using Avalonia.Input;
+using Avalonia.Interactivity;
 using Avalonia.LogicalTree;
 using Avalonia.VisualTree;
 using Irihi.Avalonia.Shared.Helpers;
@@ -27,6 +29,8 @@ public class NavMenuItem: HeaderedSelectingItemsControl
     private NavMenu? _rootMenu;
     private Panel? _popupPanel;
     private Popup? _popup;
+    private Panel? _overflowPanel;
+    private Border? _border;
     
     public static readonly StyledProperty<object?> IconProperty = AvaloniaProperty.Register<NavMenuItem, object?>(
         nameof(Icon));
@@ -74,8 +78,10 @@ public class NavMenuItem: HeaderedSelectingItemsControl
 
     private bool _isHighlighted;
 
-    public static readonly DirectProperty<NavMenuItem, bool> IsHighlightedProperty = AvaloniaProperty.RegisterDirect<NavMenuItem, bool>(
+    public static readonly DirectProperty<NavMenuItem, bool> IsHighlightedProperty =
-        nameof(IsHighlighted), o => o.IsHighlighted, (o, v) => o.IsHighlighted = v);
+        AvaloniaProperty.RegisterDirect<NavMenuItem, bool>(
+            nameof(IsHighlighted), o => o.IsHighlighted, (o, v) => o.IsHighlighted = v,
+            defaultBindingMode: BindingMode.TwoWay);
 
     public bool IsHighlighted
     {
@@ -129,6 +135,26 @@ public class NavMenuItem: HeaderedSelectingItemsControl
         PropertyToPseudoClassMixin.Attach<NavMenuItem>(IsHorizontalCollapsedProperty, PC_HorizontalCollapsed);
         PropertyToPseudoClassMixin.Attach<NavMenuItem>(IsVerticalCollapsedProperty, PC_VerticalCollapsed);
         PropertyToPseudoClassMixin.Attach<NavMenuItem>(IsSelectedProperty, ":selected", IsSelectedChangedEvent);
+        IsHorizontalCollapsedProperty.Changed.AddClassHandler<NavMenuItem, bool>((item, args) =>
+            item.OnIsHorizontalCollapsedChanged(args));
+    }
+
+    private void OnIsHorizontalCollapsedChanged(AvaloniaPropertyChangedEventArgs<bool> args)
+    {
+        if (args.NewValue.Value)
+        {
+            if (this.ItemsPanelRoot is OverflowStackPanel s)
+            {
+                s.MoveChildrenToOverflowPanel();
+            }
+        }
+        else
+        {
+            if (this.ItemsPanelRoot is OverflowStackPanel s)
+            {
+                s.MoveChildrenToMainPanel();
+            }
+        }
     }
 
     private void OnLevelChange(AvaloniaPropertyChangedEventArgs<int> args)
@@ -150,6 +176,15 @@ public class NavMenuItem: HeaderedSelectingItemsControl
     {
         base.OnAttachedToVisualTree(e);
         _rootMenu = GetRootMenu();
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        SetCurrentValue(LevelProperty,CalculateDistanceFromLogicalParent<NavMenu>(this));
+        _popup = e.NameScope.Find<Popup>("PART_Popup");
+        _overflowPanel = e.NameScope.Find<Panel>("PART_OverflowPanel");
+        _border = e.NameScope.Find<Border>("PART_Border");
         if (_rootMenu is not null)
         {
             if (_rootMenu.IconBinding is not null)
@@ -172,20 +207,17 @@ public class NavMenuItem: HeaderedSelectingItemsControl
             this[!HeaderTemplateProperty] = _rootMenu[!NavMenu.HeaderTemplateProperty];
             this[!SubMenuIndentProperty] = _rootMenu[!NavMenu.SubMenuIndentProperty];
             this[!IsHorizontalCollapsedProperty] = _rootMenu[!NavMenu.IsHorizontalCollapsedProperty];
-            if (this == _rootMenu.SelectedItem || this.DataContext == _rootMenu.SelectedItem)
-            {
-                SelectItem(this);
-            }
         }
-        
     }
 
-    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    protected override void OnLoaded(RoutedEventArgs e)
     {
-        var children = this.ItemsPanelRoot?.Children.ToList();
+        base.OnLoaded(e);
-        base.OnApplyTemplate(e);
+        var root = this.ItemsPanelRoot;
-        SetCurrentValue(LevelProperty,CalculateDistanceFromLogicalParent<NavMenu>(this));
+        if (root is OverflowStackPanel stack)
-        _popup = e.NameScope.Find<Popup>("PART_Popup");
+        {
+            stack.OverflowPanel = _overflowPanel;
+        }
     }
 
     protected override void OnPointerPressed(PointerPressedEventArgs e)
@@ -203,16 +235,9 @@ public class NavMenuItem: HeaderedSelectingItemsControl
             }
             else
             {
-                if (_popup is not null)
+                if (_border?.ContextFlyout is not null)
                 {
-                    if (_popup.IsOpen)
+                    _border.ContextFlyout.ShowAt(this);
-                    {
-                        _popup.Close();
-                    }
-                    else
-                    {
-                        _popup.Open();
-                    }
                 }
             }
         }

src/Ursa/Controls/NavMenu/OverflowStackPanel.cs

@@ -0,0 +1,30 @@
+using Avalonia.Controls;
+
+namespace Ursa.Controls;
+
+public class OverflowStackPanel: StackPanel
+{
+    public Panel? OverflowPanel { get; set; }
+    public void MoveChildrenToOverflowPanel()
+    {
+        var children = this.Children.ToList();
+        foreach (var child in children)
+        {
+            this.Children.Remove(child);
+            this.OverflowPanel?.Children.Add(child);
+        }
+    }
+    
+    public void MoveChildrenToMainPanel()
+    {
+        var children = this.OverflowPanel?.Children.ToList();
+        if (children != null && children.Count > 0)
+        {
+            foreach (var child in children)
+            {
+                this.OverflowPanel?.Children.Remove(child);
+                this.Children.Add(child);
+            }
+        }
+    }
+}