Avalonia开发实践（六）——实现Breadcrumb(面包屑)控件

已于 2025-06-17 13:47:18 修改
阅读量479 收藏 9
点赞数 4
CC 4.0 BY-SA版权
分类专栏： Avalonia 文章标签： Avalonia
于 2025-04-16 16:48:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wsadcg/article/details/147276286

引言

面包屑控件是在单窗体应用中常用的一种控件，用来指示当前页面的路由信息，以及提供导航功能。本文将完整地呈现一个面包屑控件的诞生过程。

一、面包屑控件的结构

面包屑控件由一个主体Breadcrumb和内部的BreadcrumbItem集合组成，这种关系自然而然让人联想到ItemsControl。以下是具体的控件实现：

Breadcrumb控件

Breadcrumb 控件继承自 ItemsControl，并实现了 ICommandSource 接口。它的主要功能是管理面包屑项并处理导航事件。

/// <summary>
/// Represents a breadcrumb control that displays a hierarchical navigation path.
/// </summary>
public class Breadcrumb : ItemsControl, ICommandSource
{
    #region 指定子项容器
    /// <inheritdoc/>
    protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
    {
        return new BreadcrumbItem();
    }

    /// <inheritdoc/>
    protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
    {
        return NeedsContainer<BreadcrumbItem>(item, out recycleKey);
    }
    #endregion

    #region 样式化属性
    /// <summary>
    /// Gets or sets the separator used between breadcrumb items.
    /// </summary>
    public static readonly StyledProperty<object> SeparatorProperty =
        AvaloniaProperty.Register<Breadcrumb, object>(nameof(Separator), "/");

    /// <summary>
    /// Gets or sets the separator used between breadcrumb items.
    /// </summary>
    public object Separator
    {
        get => GetValue(SeparatorProperty);
        set => SetValue(SeparatorProperty, value);
    }
    #endregion

    #region 路由事件
    /// <summary>
    /// Defines the <see cref="NavigateTo"/> event.
    /// </summary>
    public static readonly RoutedEvent<CustomRoutedEventArgs<string>> NavigateToEvent =
        RoutedEvent.Register<Breadcrumb, CustomRoutedEventArgs<string>>(nameof(NavigateTo), RoutingStrategies.Bubble);

    /// <summary>
    /// Occurs when navigation is requested.
    /// </summary>
    public event EventHandler<CustomRoutedEventArgs<string>> NavigateTo
    {
        add => AddHandler(NavigateToEvent, value);
        remove => RemoveHandler(NavigateToEvent, value);
    }
    #endregion

    #region 命令实现
    private bool _commandCanExecute = true;

    /// <summary>
    /// Gets or sets the command to be executed when a breadcrumb item is clicked.
    /// </summary>
    public ICommand Command
    {
        get { return GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }

    /// <summary>
    /// Defines the <see cref="Command"/> property.
    /// </summary>
    public static readonly StyledProperty<ICommand> CommandProperty = AvaloniaProperty.Register<Breadcrumb, ICommand>(nameof(Command));

    /// <summary>
    /// Gets or sets the parameter to be passed to the <see cref="Command"/>.
    /// </summary>
    public object? CommandParameter
    {
        get { return GetValue(CommandParameterProperty); }
        set { SetValue(CommandParameterProperty, value); }
    }

    /// <summary>
    /// Defines the <see cref="CommandParameter"/> property.
    /// </summary>
    public static readonly StyledProperty<object?> CommandParameterProperty = AvaloniaProperty.Register<Breadcrumb, object?>(nameof(CommandParameter));

    /// <summary>
    /// Handles the CanExecuteChanged event of the command.
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">An EventArgs that contains the event data.</param>
    public void CanExecuteChanged(object sender, EventArgs e)
    {
        (var command, var parameter) = (Command, CommandParameter);
        CanExecuteChanged(command, parameter);
    }

    /// <summary>
    /// Updates the command execution state.
    /// </summary>
    /// <param name="command">The command to check.</param>
    /// <param name="parameter">The command parameter.</param>
    private void CanExecuteChanged(ICommand? command, object? parameter)
    {
        if (!((ILogical)this).IsAttachedToLogicalTree)
        {
            return;
        }

        var canExecute = command is null || command.CanExecute(parameter);

        if (canExecute != _commandCanExecute)
        {
            _commandCanExecute = canExecute;
            UpdateIsEffectivelyEnabled();
        }
    }
    #endregion

    #region 构造函数
    /// <summary>
    /// Initializes a new instance of the <see cref="Breadcrumb"/> class.
    /// </summary>
    public Breadcrumb()
    {
        this.AddHandler(BreadcrumbItem.NavigateToEvent, (s, e) =>
        {
            var arg = new CustomRoutedEventArgs<string>(NavigateToEvent)
            {
                Data = e.Data
            };
            RaiseEvent(arg);

            (var command, var parameter) = (Command, CommandParameter ?? e.Data);
            if (!arg.Handled && command is not null && command.CanExecute(parameter))
            {
                command.Execute(parameter);
                arg.Handled = true;
            }
        });
    }
    #endregion
}

BreadcrumbItem 控件

BreadcrumbItem 控件表示单个面包屑项，继承自 HeaderedContentControl。它包含一个 To 属性，用于指定导航目标，并定义了 NavigateTo 事件。

/// <summary>
/// Represents an individual item within a <see cref="Breadcrumb"/> control.
/// </summary>
public class BreadcrumbItem : HeaderedContentControl, ICommandSource
{
    #region 样式化属性
    /// <summary>
    /// Defines the <see cref="To"/> property.
    /// </summary>
    public static readonly StyledProperty<string> ToProperty =
        AvaloniaProperty.Register<BreadcrumbItem, string>(nameof(To));

    /// <summary>
    /// Gets or sets the target location or identifier for this breadcrumb item.
    /// </summary>
    public string To
    {
        get => GetValue(ToProperty);
        set => SetValue(ToProperty, value);
    }
    #endregion

    #region 路由事件
    /// <summary>
    /// Defines the NavigateToEvent.
    /// </summary>
    public static readonly RoutedEvent<CustomRoutedEventArgs<string>> NavigateToEvent =
        RoutedEvent.Register<BreadcrumbItem, CustomRoutedEventArgs<string>>(nameof(NavigateTo), RoutingStrategies.Bubble);

    /// <summary>
    /// Event handler for the NavigateTo event.
    /// </summary>
    public event EventHandler<CustomRoutedEventArgs<string>> NavigateTo
    {
        add => AddHandler(NavigateToEvent, value);
        remove => RemoveHandler(NavigateToEvent, value);
    }
    #endregion

    #region 命令实现
    private bool _commandCanExecute = true;

    /// <summary>
    /// Gets or Sets the <see cref="Command"/>
    /// </summary>
    public ICommand Command
    {
        get { return GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }

    /// <summary>
    /// Defines the <see cref="Command"/> property.
    /// </summary>
    public static readonly StyledProperty<ICommand> CommandProperty = AvaloniaProperty.Register<BreadcrumbItem, ICommand>(nameof(Command));

    /// <summary>
    /// Gets or Sets the <see cref="CommandParameter"/>
    /// </summary>
    public object? CommandParameter
    {
        get { return GetValue(CommandParameterProperty); }
        set { SetValue(CommandParameterProperty, value); }
    }

    /// <summary>
    /// Gets or sets a parameter to be passed to the <see cref="Command"/>
    /// </summary>
    public static readonly StyledProperty<object?> CommandParameterProperty = AvaloniaProperty.Register<BreadcrumbItem, object?>(nameof(CommandParameter));

    /// <inheritdoc/>
    public void CanExecuteChanged(object sender, EventArgs e)
    {
        (var command, var parameter) = (Command, CommandParameter);
        CanExecuteChanged(command, parameter);
    }

    private void CanExecuteChanged(ICommand? command, object? parameter)
    {
        if (!((ILogical)this).IsAttachedToLogicalTree)
        {
            return;
        }

        var canExecute = command is null || command.CanExecute(parameter);

        if (canExecute != _commandCanExecute)
        {
            _commandCanExecute = canExecute;
            UpdateIsEffectivelyEnabled();
        }
    }
    #endregion

    #region 默认实现
    /// <inheritdoc/>
    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
    {
        base.OnApplyTemplate(e);
        var breadcrumb = this.FindAncestorOfType<Breadcrumb>();
        if (breadcrumb != null && breadcrumb.DisplayMemberBinding != null)
        {
            this[!ContentProperty] = breadcrumb.DisplayMemberBinding;
        }

        var button = e.NameScope.Find("PART_NavButton") as Button;
        if (button != null)
        {
            button.Click += NavButton_Click;
        }
    }

    private void NavButton_Click(object? sender, RoutedEventArgs e)
    {
        var arg = new CustomRoutedEventArgs<string>(NavigateToEvent)
        {
            Data = To
        };
        RaiseEvent(arg);

        (var command, var parameter) = (Command, CommandParameter ?? arg.Data);
        if (!arg.Handled && command is not null && command.CanExecute(parameter))
        {
            command.Execute(parameter);
            arg.Handled = true;
        }
    }
    #endregion
}

以上代码中用到了带自定义参数的RoutedEventArgs对象，实现如下：

/// <summary>
/// 通用的带自定义参数的路由事件参数对象
/// </summary>
/// <typeparam name="T"></typeparam>
public class CustomRoutedEventArgs<T> : RoutedEventArgs
{
    /// <summary>
    /// 事件参数
    /// </summary>
    public T Data { get; set; }

    /// <summary>
    /// 构造函数
    /// </summary>
    /// <param name="routedEvent">路由事件</param>
    /// <param name="source">事件发起者</param>
    public CustomRoutedEventArgs(RoutedEvent routedEvent, object source) : base(routedEvent, source)
    {
    }

    /// <summary>
    /// 构造函数
    /// </summary>
    /// <param name="routedEvent">路由事件</param>
    public CustomRoutedEventArgs(RoutedEvent routedEvent) : base(routedEvent)
    {
    }
}

二、面包屑控件的模板及样式

在Avalonia中，使用ControlTheme定义控件的模板，在Styles中定义控件的样式。

控件模板

<ControlTheme x:Key="{x:Type local:Breadcrumb}" TargetType="local:Breadcrumb">
	<Setter Property="Background" Value="Transparent"/>
	<Setter Property="BorderBrush" Value="Transparent"/>
	<Setter Property="BorderThickness" Value="0"/>
	<Setter Property="Padding" Value="0"/>
	<Setter Property="ItemsPanel">
		<Setter.Value>
			<ItemsPanelTemplate>
				<StackPanel Orientation="Horizontal"/>
			</ItemsPanelTemplate>
		</Setter.Value>
	</Setter>
	<Setter Property="Template">
		<ControlTemplate>
			<Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
				<ItemsPresenter Margin="{TemplateBinding Padding}" ItemsPanel="{TemplateBinding ItemsPanel}"/>
			</Border>
		</ControlTemplate>
	</Setter>
</ControlTheme>

<ControlTheme x:Key="{x:Type local:BreadcrumbItem}" TargetType="local:BreadcrumbItem">
	<Setter Property="Padding" Value="5,0"/>
	<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType=local:Breadcrumb}, Path=Foreground}"/>
	<Setter Property="Header" Value="{Binding RelativeSource={RelativeSource AncestorType=local:Breadcrumb}, Path=Separator}"/>
	<Setter Property="Template">
		<ControlTemplate>
			<StackPanel Orientation="Horizontal">
				<ContentPresenter x:Name="PART_Header"
                                Content="{TemplateBinding Header}"
                                Margin="5,0"
                                VerticalAlignment="Center"
								IsVisible="{TemplateBinding Header,Converter={x:Static ObjectConverters.IsNotNull}}"/>

				<ContentPresenter x:Name="PART_Content"
									Content="{TemplateBinding Content}"
									Margin="{TemplateBinding Padding}"
									IsVisible="{TemplateBinding To,Converter={x:Static StringConverters.IsNullOrEmpty}}"
									VerticalAlignment="Center"/>
				<Button x:Name="PART_NavButton"
                        Classes="text"
                        Foreground="{TemplateBinding Foreground}"
						Content="{TemplateBinding Content}"
						Padding="{TemplateBinding Padding}"
                        IsVisible="{TemplateBinding To,Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
                        VerticalAlignment="Center"/>
			</StackPanel>
		</ControlTemplate>
	</Setter>
</ControlTheme>

控件样式

<!-- 第一个元素不显示分隔符 -->
<Style Selector="local|BreadcrumbItem:nth-child(1) /template/ ContentPresenter#PART_Header">
	<Setter Property="IsVisible" Value="False"/>
</Style>

<!--文本样式的按钮-->
<Style Selector="Button.text">
	<Setter Property="BorderThickness" Value="0"/>
	<Setter Property="Background" Value="Transparent"/>
	<Setter Property="HorizontalAlignment" Value="Center"/>
	<Setter Property="VerticalAlignment" Value="Center"/>
	<Setter Property="Padding" Value="0"/>
	<Setter Property="Template">
		<ControlTemplate>
			<Border Background="{TemplateBinding Background}"
					BorderBrush="{TemplateBinding BorderBrush}"
					BorderThickness="{TemplateBinding BorderThickness}"
					CornerRadius="{TemplateBinding CornerRadius}">
				<ContentPresenter x:Name="content"
									Content="{TemplateBinding Content}"
									HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
									VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
									Margin="{TemplateBinding Padding}"/>
			</Border>
		</ControlTemplate>
	</Setter>

	<!-- PointerOver state -->
	<Style Selector="^:pointerover">
		<Setter Property="Opacity" Value="0.6"/>
	</Style>

	<!-- Pressed state -->
	<Style Selector="^:pressed">
		<Setter Property="Opacity" Value="0.8"/>
	</Style>

	<!-- Disabled state -->
	<Style Selector="^:disabled">
		<Setter Property="Opacity" Value="0.5"/>
	</Style>
</Style>

总结

通过以上的实现，就创建好了一个具备导航功能的面包屑控件，且支持数据绑定，可以用于各种场景。

上一篇：Avalonia开发实践（五）——如何用后台代码创建模板

下一篇：Avalonia开发实践（七）——实现全局的弹窗遮罩

avalonia开发海康SDK怎么在linux实现预览？
**My Coding Family**
09-07 1049
在Avalonia中实现海康SDK的摄像头预览功能，并在Linux上运行，可能需要处理特定的窗口句柄获取问题。通过使用和X11 API，可以在Linux上实现窗口句柄的获取和传递。同时，确保海康SDK在Linux上的依赖库和配置正确。希望如上措施及解决方案能够帮到有需要的你。PS：如若遇到采纳如下方案还是未解决的同学，希望不要抱怨&&急躁，毕竟影响因素众多，我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴，即把你未解决或者产生新Bug黏贴在评论区，我们大家一起来努力，一起帮你看看，可以不咯。
Avalonia.ExtendedToolkit：Avalonia UI的扩展控件
02-04
Avalonia.ExtendedTool希望将某些控件从WPF移植到Avalonia。 大多数样式/创意取自： 等等 欢迎贡献者。 Nugets 用法 请查看示例应用程序或有关如何使用控件的信息。 解决方案结构 Avalonia.Controlz：可以合并...
BreadCrumb控件
菜头
10-11 3707
BreadCrumb控件，如上图所示，即面包屑导航控件，类似于TreeCtrl，但不是一次显示所有的Item，VC++ 2010可以编译通过，稍微修改一下其他的也可以编译，源代码下载：http://download.csdn.net/detail/hemmingway/6380253    sample code //m_Breadcrumb.Create (rect, th
ASP.NET的面包屑导航控件、树形导航控件、菜单控件
pan_junbiao的博客
02-12 8478
ASP.NET的面包屑导航控件、树形导航控件、菜单控件。 1、 面包屑导航控件——SiteMapPath控件 SiteMapPath控件可以为站点提供“面包屑导航”的功能。 1.1 创建站点地图文件Web.sitemap 在ASP.NET中，有一个叫站点地图的XML文件。站点地图的文件名必须是Web.sitemap，而且需要放置于应用程序的根目录。 &lt;?xml version="...
Avalonia跨平台实战(二)，Avalonia相比WPF的便利合集(一)
最新发布
weixin_33669473的博客
06-11 37
TextBox Watermark="请输入账号"></TextBox><Grid></Grid>
C#跨平台开发桌面程序（Avalonia）
热门推荐
康康的博客
05-25 2万+
文章目录
Avalonia:自定义控件
weixin_42253874的博客
09-20 1965
如果希望它具有可以由_Avalonia UI_样式系统设置的属性，则需要定义一个静态只读字段并使用方法来注册样式化属性。样式化属性将在运行时和预览面板中均起作用。//静态属性字段: Name + Property//实例公开访问属性Background//属性涉及的更改变化= null)使用注册的维护了一个优先级列表，其中包含允许样式工作的值和绑定。样式属性通过调用AddOwner来添加一个所有者，指定该属性所属对象，进行限定-- 这与以下方式相同 -->
Avalonia学习（二十八）-OpenGL
jinyuttt的专栏
03-01 1556
Avalonia已经继承了opengl，详细的大家可以自己查阅。Avalonia里面启用opengl继承OpenGlControlBase类就可以了。分别是初始化、绘制、释放。这里把官方源码的例子扒出来给大家看一下。源码在我以前发布的单组件里面。地址在前面的界面总结博文里面。
Avalonia实现导航条自定义控件
07-24
Avalonia实现导航条自定义控件；Avalonia实现导航条自定义控件；Avalonia实现导航条自定义控件；Avalonia实现导航条自定义控件；Avalonia实现导航条自定义控件；Avalonia实现导航条自定义控件；Avalonia实现导航条...
用Avalonia实现的EasyUI控件
07-24
用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用Avalonia实现的EasyUI控件；用...
Avalonia 项目使用ReactiveUI实现的MVVM
06-13
Avalonia通过XAML提供了一个强大的界面描述语言，可以方便地声明控件和数据绑定，非常适合实现MVVM。在Avalonia中，View可以通过DataContext属性与ViewModel关联，一旦DataContext被设置，View中的控件就能自动绑定...
c# Avalonia 架构开发跨平台应用
babytiger的专栏
09-04 3650
下面写出界面代码 ，文件名 MainWindow.axaml，其后缀为axaml与wpf中常用的xaml多个a表示使用的是Avalonia架构。AvaloniaCalculatorApp: 一个基于Avalonia架构的c#简单的计算器应用，支持windows ,linux(ubuntu,kylin,uos),visual 2022开发 (gitee.com)通过判断用户按下的键来触发计算器的相应操作，例如输入数字、执行加减乘除等操作，并通过 ViewModel 中的命令绑定来更新界面和执行计算逻辑。
跨平台WPF框架Avalonia教程 九
让每一个想学习编程的人，都能学会，都能看懂，看了都有收获!
11-17 1569
​在 Avalonia 中，主题变体（theme variant）指的是基于选择的主题而具有的特定视觉外观的控件。通过使用主题变体，开发人员可以创建视觉吸引力强、一致性的用户界面，以适应不同的用户偏好或系统设置。例如，一个应用程序可以提供一个带有白色背景和黑色文本的浅色主题变体，以及一个带有黑色背景和白色文本的深色主题变体。用户可以选择他们喜欢的主题，应用程序将相应地调整其外观。Avalonia 内置的主题和无需额外代码即可无缝支持Dark和Light变体。
Avalonia的模板控件（Templated Controls）
dotNET跨平台
04-09 786
在Avalonia的UI框架中，TemplatedControl是一个核心组件，它提供了一种强大的方式来创建可重用且高度可定制的控件。本文将深入探讨TemplatedControl的概念、其带来的优势以及它在实际开发中的应用场景，并通过一个示例代码来展示其用法。什么是TemplatedControlTemplatedControl是Avalonia中一个特殊的控件类型，它允许开发者定义控件的模板结...
面包屑breadCrumb
不被定义的程序媛写的博客儿
04-05 2328
面包屑啦啦啦啦
使用Avalonia跨Linux平台
故里2130
11-24 1万+
Avalonia类似使用WPF的技术方法来开发，所以，需要会使用WPF，其中的一些语法和写法与WPF有所区别，但是他们相差不大，会WPF的话，基本上可以看看文档后，完全掌握Avalonia的使用，从而达到跨平台开发的任务。其实写法有些不一样，可以参考官网的说明，进行修改。2. 安装完成后，重启VS2022，我们可以看到1和2，其中1是使用MVVM模式开发，2是普通模式开发，我们选择2，建立项目。9.直接双击粉红色的文件，进行安装，输入密码，但是美中不足的是，好像没有图标，图标似乎需要单独去设置。
Avalonia开发（一）环境搭建
dotNET跨平台
09-18 746
一、介绍开源 GitHub：https://github.com/AvaloniaUI/Avalonia/多平台支持，包括Windows、mac OS、Linux、iOS、Android、Samsung Tizen（很快支持）、WebAssemblyIDE支持，Visual Studio扩展支持，JetBrains Rider & Resharper支持依托.NET平台社区支持MIT 协议...
Net跨平台UI框架Avalonia入门-安装和使用
海盗Sharp的博客
05-18 1万+
Avalonia UI是是Net的跨平台UI框架，支持 Windows、Linux、iOS 和 Android，与Net其他UI框架相比，主要是支持Linux。在国产化的需求下，对于C#开发的程序员，Avalonia适合用来开发Linux的桌面客户端。
【C#】跨平台UI库Avalonia的学习笔记（上）
一只爱做笔记的码农
09-12 8158
因为有这种需求，希望开发一个上位机软件，可以在Windows和Linux上同时运行，而且这个Linux很可能是arm平台的板子，其实就是可以代替一部分工控机的功能，省钱也节约设备占用的体积，鉴于自己现在不太清楚C++，也懒得去折腾QT(毕竟商用要钱，公司并没有整这个，但是公司买了VS)，找了找可以实现上位机界面软件的方法，可能这个跨平台UI库Avalonia就比较合适了，对C#已经略知一二的我，能够写Winform小工具，WPF也能了解些了，感觉可以来学一学这个东西了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值