Merge pull request #139 from irihitech/bread

Breadcrumb

demo/Ursa.Demo/Models/MenuKeys.cs

@@ -6,6 +6,7 @@ public static class MenuKeys
     public const string MenuKeyBadge = "Badge";
     public const string MenuKeyBanner = "Banner";
     public const string MenuKeyButtonGroup = "ButtonGroup";
+    public const string MenuKeyBreadcrumb = "Breadcrumb";
     public const string MenuKeyClassInput = "Class Input";
     public const string MenuKeyDialog = "Dialog";
     public const string MenuKeyDivider = "Divider";

demo/Ursa.Demo/Pages/BreadcrumbDemo.axaml

@@ -0,0 +1,56 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.BreadcrumbDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:vm="using:Ursa.Demo.ViewModels"
+    xmlns:converters="clr-namespace:Ursa.Demo.Converters"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:BreadcrumbDemoViewModel"
+    mc:Ignorable="d">
+    <UserControl.Resources>
+        <converters:IconNameToPathConverter x:Key="IconConverter" />
+    </UserControl.Resources>
+    <StackPanel>
+        
+        <u:Breadcrumb>
+            <TextBlock Text="Hello" />
+            <u:BreadcrumbItem Content="World" IsReadOnly="True"></u:BreadcrumbItem>
+            <u:BreadcrumbItem Icon="?" Separator="♥" />
+            <TextBlock Text="Avalonia" />
+            <TextBlock Text="Ursa" />
+        </u:Breadcrumb>
+        <u:Breadcrumb Classes="Small">
+            <TextBlock Text="Hello" />
+            <u:BreadcrumbItem Icon="?" Separator="♥" />
+            <TextBlock Text="Avalonia" />
+            <TextBlock Text="Ursa" />
+        </u:Breadcrumb>
+        <u:Breadcrumb>
+            <TextBlock Text="Hello" />
+            <u:BreadcrumbItem Icon="?" Separator="♥" />
+            <TextBlock Text="Avalonia" />
+            <TextBlock Text="Ursa" />
+        </u:Breadcrumb>
+        <u:Breadcrumb
+            DisplayMemberBinding="{Binding Section}"
+            IconBinding="{Binding Icon}"
+            CommandBinding="{Binding Command}"
+            ItemsSource="{Binding Items1}">
+            <u:Breadcrumb.Styles>
+                <Style Selector="u|BreadcrumbItem" x:DataType="vm:BreadcrumbDemoItem">
+                    <Setter Property="IsReadOnly" Value="{Binding IsReadOnly}"/>
+                </Style>
+            </u:Breadcrumb.Styles>
+            <u:Breadcrumb.IconTemplate>
+                <DataTemplate DataType="x:String">
+                    <PathIcon Width="12" Height="12" Data="{Binding Path=., Converter={StaticResource IconConverter}}"></PathIcon>
+                </DataTemplate>
+            </u:Breadcrumb.IconTemplate>
+        </u:Breadcrumb>
+    </StackPanel>
+</UserControl>

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

@@ -0,0 +1,13 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Ursa.Demo.Pages;
+
+public partial class BreadcrumbDemo : UserControl
+{
+    public BreadcrumbDemo()
+    {
+        InitializeComponent();
+    }
+}

demo/Ursa.Demo/ViewModels/BreadcrumbDemoViewModel.cs

@@ -0,0 +1,41 @@
+using System.Collections.ObjectModel;
+using System.Windows.Input;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Controls;
+
+namespace Ursa.Demo.ViewModels;
+
+public class BreadcrumbDemoViewModel: ObservableObject
+{
+    public ObservableCollection<BreadcrumbDemoItem> Items1 { get; set; }
+
+    public BreadcrumbDemoViewModel()
+    {
+        Items1 = new ObservableCollection<BreadcrumbDemoItem>()
+        {
+            new BreadcrumbDemoItem() { Section = "Home", Icon = "Home" },
+            new BreadcrumbDemoItem() { Section = "Page 1", Icon = "Page" },
+            new BreadcrumbDemoItem() { Section = "Page 2", Icon = "Page" },
+            new BreadcrumbDemoItem() { Section = "Page 3", Icon = "Page" },
+            new BreadcrumbDemoItem() { Section = "Page 4", Icon = "Page", IsReadOnly = true},
+        };
+    }
+}
+
+public partial class BreadcrumbDemoItem: ObservableObject
+{
+    public string Section { get; set; }
+    public string Icon { get; set; }
+    [ObservableProperty] private bool _isReadOnly;
+    
+    public ICommand Command { get; set; }
+
+    public BreadcrumbDemoItem()
+    {
+        Command = new RelayCommand(() =>
+        {
+            MessageBox.ShowOverlayAsync(Section);
+        });
+    }
+}

demo/Ursa.Demo/ViewModels/MainViewViewModel.cs

@@ -28,6 +28,7 @@ public class MainViewViewModel : ViewModelBase
             MenuKeys.MenuKeyBadge => new BadgeDemoViewModel(),
             MenuKeys.MenuKeyBanner => new BannerDemoViewModel(),
             MenuKeys.MenuKeyButtonGroup => new ButtonGroupDemoViewModel(),
+            MenuKeys.MenuKeyBreadcrumb => new BreadcrumbDemoViewModel(),
             MenuKeys.MenuKeyClassInput => new ClassInputDemoViewModel(),
             MenuKeys.MenuKeyDialog => new DialogDemoViewModel(),
             MenuKeys.MenuKeyDivider => new DividerDemoViewModel(),

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -14,6 +14,7 @@ public class MenuViewModel: ViewModelBase
             new() { MenuHeader = "Controls", IsSeparator = true },
             new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge, Status = "Updated"},
             new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner },
+            new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb, Status = "New" },
             new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup},
             new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput, Status = "New" },
             new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog, Status = "Updated"},

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

@@ -0,0 +1,96 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:u="https://irihi.tech/ursa">
+    <Design.PreviewWith>
+        <StackPanel>
+            <u:Breadcrumb>
+                <TextBlock Text="Hello" />
+                <u:BreadcrumbItem Content="World" Icon="♥" />
+                <TextBlock Text="Avalonia" />
+                <TextBlock Text="Ursa" />
+            </u:Breadcrumb>
+        </StackPanel>
+    </Design.PreviewWith>
+    <ControlTheme x:Key="{x:Type u:Breadcrumb}" TargetType="u:Breadcrumb">
+        <Setter Property="Separator" Value="/" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:Breadcrumb">
+                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type u:BreadcrumbItem}" TargetType="u:BreadcrumbItem">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:BreadcrumbItem">
+                <Border Background="Transparent">
+                    <StackPanel Orientation="Horizontal">
+                        <ContentPresenter
+                            Name="PART_IconPresenter"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Icon}"
+                            ContentTemplate="{TemplateBinding IconTemplate}"
+                            Foreground="{DynamicResource SemiColorText2}"
+                            IsVisible="{TemplateBinding Icon,
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}" />
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Foreground="{DynamicResource SemiColorText2}"
+                            IsVisible="{TemplateBinding Content,
+                                                        Converter={x:Static ObjectConverters.IsNotNull}}" />
+                        <ContentPresenter
+                            Name="Separator"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Separator}"
+                            Foreground="{DynamicResource SemiColorText3}">
+                            <ContentPresenter.IsVisible>
+                                <TemplateBinding Converter="{x:Static ObjectConverters.IsNotNull}" Property="Separator" />
+                            </ContentPresenter.IsVisible>
+                        </ContentPresenter>
+                    </StackPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+            <Setter Property="Margin" Value="0 0 4 0"></Setter>
+        </Style>
+        <Style Selector="^ /template/ ContentPresenter#Separator">
+            <Setter Property="Margin" Value="4 0"></Setter>
+        </Style>
+        <Style Selector="^[IsReadOnly=False]">
+            <Setter Property="Cursor" Value="Hand"></Setter>
+        </Style>
+        <Style Selector="^:last">
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource SemiColorText0}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource SemiColorText0}" />
+                <Setter Property="FontWeight" Value="Bold" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#Separator">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^[IsReadOnly=False]:pointerover">
+                <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource SemiBlue5}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource SemiBlue5}" />
+                </Style>
+            </Style>
+        </Style>
+        <Style Selector="^[IsReadOnly=False]:pointerover">
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource SemiBlue5}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource SemiBlue5}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

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

@@ -4,6 +4,7 @@
         <ResourceInclude Source="Badge.axaml" />
         <ResourceInclude Source="Banner.axaml" />
         <ResourceInclude Source="ButtonGroup.axaml" />
+        <ResourceInclude Source="Breadcrumb.axaml" />
         <ResourceInclude Source="ControlClassesInput.axaml" />
         <ResourceInclude Source="Dialog.axaml" />
         <ResourceInclude Source="DialogShared.axaml" />

src/Ursa.Themes.Semi/Styles/Breadcrumb.axaml

@@ -0,0 +1,20 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:u="https://irihi.tech/ursa">
+    <Design.PreviewWith>
+        <Border Padding="20">
+            <!-- Add Controls for Previewer Here -->
+        </Border>
+    </Design.PreviewWith>
+
+    <!-- Add Styles Here -->
+    <Style Selector="u|Breadcrumb.Small u|BreadcrumbItem /template/ ContentPresenter">
+        <Setter Property="FontSize" Value="12"></Setter>
+        <Style Selector="^#PART_IconPresenter">
+            <Setter Property="Margin" Value="0 0 2 0"></Setter>
+        </Style>
+        <Style Selector="^#Separator">
+            <Setter Property="Margin" Value="2 0"></Setter>
+        </Style>
+    </Style>
+</Styles>

src/Ursa.Themes.Semi/Styles/_index.axaml

@@ -4,6 +4,7 @@
             <!--  Add Controls for Previewer Here  -->
         </Border>
     </Design.PreviewWith>
+    <StyleInclude Source="Breadcrumb.axaml" />
     <StyleInclude Source="ButtonGroup.axaml" />
     <StyleInclude Source="Skeleton.axaml" />
     <StyleInclude Source="ToolBar.axaml"/>

src/Ursa/Controls/BackTop/BackTop.cs

@@ -0,0 +1,15 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Media;
+
+namespace Ursa.Controls.BackTop;
+
+public class BackTop: Control
+{
+    public static readonly AttachedProperty<bool> AttachProperty =
+        AvaloniaProperty.RegisterAttached<BackTop, Control, bool>("Attach");
+
+    public static void SetAttach(Control obj, bool value) => obj.SetValue(AttachProperty, value);
+    public static bool GetAttach(Control obj) => obj.GetValue(AttachProperty);
+}

src/Ursa/Controls/Breadcrumb/Breadcrumb.cs

@@ -0,0 +1,128 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Templates;
+using Avalonia.Data;
+using Avalonia.Layout;
+using Avalonia.Metadata;
+
+namespace Ursa.Controls;
+
+public class Breadcrumb: ItemsControl
+{
+    private static readonly ITemplate<Panel?> _defaultPanel =
+        new FuncTemplate<Panel?>(() => new StackPanel() { Orientation = Orientation.Horizontal });
+    
+    
+    public static readonly StyledProperty<IBinding?> IconBindingProperty = AvaloniaProperty.Register<Breadcrumb, IBinding?>(
+        nameof(IconBinding));
+
+    [AssignBinding]
+    [InheritDataTypeFromItems(nameof(ItemsSource))]
+    public IBinding? IconBinding
+    {
+        get => GetValue(IconBindingProperty);
+        set => SetValue(IconBindingProperty, value);
+    }
+
+    public static readonly StyledProperty<IBinding?> CommandBindingProperty = AvaloniaProperty.Register<Breadcrumb, IBinding?>(
+        nameof(CommandBinding));
+
+    [AssignBinding]
+    [InheritDataTypeFromItems(nameof(ItemsSource))]
+    public IBinding? CommandBinding
+    {
+        get => GetValue(CommandBindingProperty);
+        set => SetValue(CommandBindingProperty, value);
+    }
+
+    public static readonly StyledProperty<object?> SeparatorProperty = AvaloniaProperty.Register<Breadcrumb, object?>(
+        nameof(Separator));
+
+    /// <summary>
+    /// Separator between items.
+    /// Usage: Separator can only be raw string or ITemplate&lt;Control&gt;.
+    /// </summary>
+    public object? Separator
+    {
+        get => GetValue(SeparatorProperty);
+        set => SetValue(SeparatorProperty, value);
+    }
+
+    public static readonly StyledProperty<IDataTemplate?> IconTemplateProperty = AvaloniaProperty.Register<Breadcrumb, IDataTemplate?>(
+        nameof(IconTemplate));
+
+    public IDataTemplate? IconTemplate
+    {
+        get => GetValue(IconTemplateProperty);
+        set => SetValue(IconTemplateProperty, value);
+    }
+    
+    static Breadcrumb()
+    {
+        ItemsPanelProperty.OverrideDefaultValue<Breadcrumb>(_defaultPanel);
+    }
+    
+    protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
+    {
+        return NeedsContainer<BreadcrumbItem>(item, out recycleKey);
+    }
+
+    protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
+    {
+        return new BreadcrumbItem();
+    }
+
+    protected override void PrepareContainerForItemOverride(Control container, object? item, int index)
+    {
+        // base.PrepareContainerForItemOverride(container, item, index);
+        if (container is not BreadcrumbItem breadcrumbItem) return;
+        if (!breadcrumbItem.IsSet(BreadcrumbItem.SeparatorProperty))
+        {
+            if (GetSeparatorInstance(Separator) is { } a)
+            {
+                breadcrumbItem.Separator = a;
+            }
+            SeparatorProperty.Changed.AddClassHandler<Breadcrumb, object?>((_, args) =>
+            {
+                if (GetSeparatorInstance(args.NewValue.Value) is { } b)
+                    breadcrumbItem.Separator = b;
+            });
+        }
+
+        PseudolassesExtensions.Set(container.Classes, BreadcrumbItem.PC_Last, index == ItemCount - 1);
+
+        if (container == item) return;
+        if(!breadcrumbItem.IsSet(ContentControl.ContentProperty))
+        {
+            breadcrumbItem.SetCurrentValue(ContentControl.ContentProperty, item);
+            if (DisplayMemberBinding is not null)
+            {
+                breadcrumbItem[!ContentControl.ContentProperty] = DisplayMemberBinding;
+            }
+        }
+        if (!breadcrumbItem.IsSet(ContentControl.ContentTemplateProperty) && this.ItemTemplate != null)
+        {
+            breadcrumbItem.SetCurrentValue(ContentControl.ContentTemplateProperty, this.ItemTemplate);
+        }
+        if (!breadcrumbItem.IsSet(BreadcrumbItem.IconProperty) && IconBinding != null)
+        {
+            breadcrumbItem[!BreadcrumbItem.IconProperty] = IconBinding;
+        }
+        if (!breadcrumbItem.IsSet(BreadcrumbItem.CommandProperty) && CommandBinding != null)
+        {
+            breadcrumbItem[!BreadcrumbItem.CommandProperty] = CommandBinding;
+        }
+        if (!breadcrumbItem.IsSet(BreadcrumbItem.IconTemplateProperty) && IconTemplate != null)
+        {
+            breadcrumbItem.IconTemplate = IconTemplate;
+        }
+    }
+
+    private static object? GetSeparatorInstance(object? separator) => separator switch
+    {
+        null => null,
+        string s => s,
+        ITemplate<Control?> t => t.Build(),
+        _ => separator.ToString()
+    };
+}

src/Ursa/Controls/Breadcrumb/BreadcrumbItem.cs

@@ -0,0 +1,69 @@
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Templates;
+using Avalonia.Input;
+using Avalonia.LogicalTree;
+
+namespace Ursa.Controls;
+
+[PseudoClasses(PC_Last)]
+public class BreadcrumbItem: ContentControl
+{
+    public const string PC_Last = ":last";
+    public static readonly StyledProperty<object?> SeparatorProperty =
+        AvaloniaProperty.Register<BreadcrumbItem, object?>(
+            nameof(Separator));
+
+    public object? Separator
+    {
+        get => GetValue(SeparatorProperty);
+        set => SetValue(SeparatorProperty, value);
+    }
+
+    public static readonly StyledProperty<object?> IconProperty = AvaloniaProperty.Register<BreadcrumbItem, object?>(
+        nameof(Icon));
+
+    public object? Icon
+    {
+        get => GetValue(IconProperty);
+        set => SetValue(IconProperty, value);
+    }
+
+    public static readonly StyledProperty<ICommand?> CommandProperty = AvaloniaProperty.Register<BreadcrumbItem, ICommand?>(
+        nameof(Command));
+
+    public ICommand? Command
+    {
+        get => GetValue(CommandProperty);
+        set => SetValue(CommandProperty, value);
+    }
+
+    public static readonly StyledProperty<IDataTemplate?> IconTemplateProperty = AvaloniaProperty.Register<BreadcrumbItem, IDataTemplate?>(
+        nameof(IconTemplate));
+
+    public IDataTemplate? IconTemplate
+    {
+        get => GetValue(IconTemplateProperty);
+        set => SetValue(IconTemplateProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> IsReadOnlyProperty = AvaloniaProperty.Register<BreadcrumbItem, bool>(
+        nameof(IsReadOnly));
+
+    public bool IsReadOnly
+    {
+        get => GetValue(IsReadOnlyProperty);
+        set => SetValue(IsReadOnlyProperty, value);
+    }
+
+    protected override void OnPointerPressed(PointerPressedEventArgs e)
+    {
+        base.OnPointerPressed(e);
+        if (!IsReadOnly)
+        {
+            Command?.Execute(null);
+        }
+    }
+}