在我们之前的开发框架中往往都是为了方便对附件的管理都会进行一些简单的封装目的是为了方便快速的使用并达到统一界面的效果。本文主要介绍基于SqlSugar开发框架的WPF应用端对于附件展示和控件的一些封装处理界面效果供大家参考。PS给大家推荐一个C#开发可以用到的界面组件——DevExpress WPF它拥有120个控件和库将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。DevExpress新旧版本帮助文档下载可进QQ qun获取1697253161. 回顾附件管理WinForm端以及VueElement的前端界面效果由于我们统一了附件的处理方式底层同时支持多种上传方式FTP文件上传、常规文件上传、以及OSS的文件上传等方式因此界面展示也是统一的话就可以在各个界面端达到统一的UI效果使用起来更加方便。例如我们在Winform的系统界面中编辑信息的一个界面里面分门别类管理很多影像学的图片资料通过查看附件可以看到其中一些图片附件的缩略图需要进一步查看可以双击图片即可实现预览效果。上面的界面中可以查看单项的附件数量以及查看具体的附件列表信息。由于Winform端的附件管理已经封装好控件了所以在使用的时候拖动到界面即可。而对于VueElement的BS前端界面我们也可以通过自定义组件的方式实现统一的界面效果。为了管理好这些附件图片等文件信息我们在前端界面提供一些条件供查询如下是Vue3Element Plus的前端管理界面。业务表单中展示附件的效果用户界面展示如下所示。2. WPF应用端的附件管理界面通过以上的界面参考我们可以借鉴的用于WPF应用端的界面设计中设计一些自定义组件用来快速、统一展示附件信息WPF应用端的附件列表展示界面如下所示。而业务表中的附件列表展示我们参考Winform端的用户控件设计方式先展示附件的汇总信息然后可以查看具体的附件列表如下界面所示。需要查看可以单击【打开附件】进行查看具体的附件列表如下界面所示。用户控件的界面代码如下所示。UserControl x:ClassWHC.SugarProject.WpfUI.Controls.AttachmentControl xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml xmlns:coreclr-namespace:SugarProject.Core;assemblySugarProjectCore xmlns:dhttp://schemas.microsoft.com/expression/blend/2008 xmlns:hchttps://handyorg.github.io/handycontrol xmlns:helpersclr-namespace:WHC.SugarProject.WpfUI.Helpers xmlns:localclr-namespace:WHC.SugarProject.WpfUI.Controls xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006 NameAttachmet d:DesignHeight100 d:DesignWidth300 mc:Ignorabled Grid Width{Binding Width, ElementNameAttachmet} MinWidth250 Grid.ColumnDefinitions ColumnDefinition WidthAuto / ColumnDefinition WidthAuto / ColumnDefinition Widthauto / /Grid.ColumnDefinitions TextBlock Grid.Column0 MinWidth100 Margin5,0,10,0 VerticalAlignmentCenter Text{Binding PathText, ElementNameAttachmet} / TextBlock x:NametxtTips Grid.Column1 Margin10,0,10,0 VerticalAlignmentCenter / Button Grid.Column2 Margin10,0,10,0 VerticalAlignmentCenter Command{Binding OpenAttachmentCommand, ElementNameAttachmet} CommandParameter{Binding PathAttachmentGUID, ElementNameAttachmet} Content打开附件 Style{StaticResource ButtonSuccess} / /Grid /UserControl后端的代码和常规的自定义控件类似定义一些属性名称以及相关的事件处理即可如下代码所示。namespace WHC.SugarProject.WpfUI.Controls { /// summary /// AttachmentControl.xaml 的交互逻辑 /// /summary public partial class AttachmentControl : UserControl { private static string TipsContent 共有【{0}】个附件; /// summary /// 标题 /// /summary public string Text { get { return (string)GetValue(TextProperty); } set { SetValue(TextProperty, value); } } public static readonly DependencyProperty TextProperty DependencyProperty.Register( nameof(Text), typeof(string), typeof(AttachmentControl), new FrameworkPropertyMetadata(文本说明, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault)); /// summary /// 附件组的GUID /// /summary public string? AttachmentGUID { get { return (string?)GetValue(AttachmentGUIDProperty); } set { SetValue(AttachmentGUIDProperty, value); } } public static readonly DependencyProperty AttachmentGUIDProperty DependencyProperty.Register( nameof(AttachmentGUID), typeof(string), typeof(AttachmentControl), new FrameworkPropertyMetadata(, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnAttachmentGUIDPropertyChanged))); private static async void OnAttachmentGUIDPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is not AttachmentControl control) return; if (control ! null) { var oldValue (string?)e.OldValue; // 旧的值 var newValue (string?)e.NewValue; // 更新的新的值 //更新数据源 await control.InitData(newValue); } } /// summary /// 更新数据源 /// /summary /// param nameattachmentGuid附件GUID/param /// returns/returns private async Task InitData(string attachmentGuid) { int count 0; if (!attachmentGuid.IsNullOrEmpty() !this.IsInDesignMode()) { var itemList await BLLFactoryIFileUploadService.Instance.GetByAttachGUID(attachmentGuid); if (itemList ! null) { count itemList.Count; } } //多语言处理提示信息 var newTipsContent JsonLanguage.Default.GetString(TipsContent); this.txtTips.Text string.Format(newTipsContent, count); } /// summary /// 默认构造函数 /// /summary public AttachmentControl() { InitializeComponent(); } /// summary /// 打开附件列表 /// /summary [RelayCommand] private async Task OpenAttachment(string attachmentGuid) { var dlg App.GetServiceFileUploadViewPage(); dlg!.AttachmentGUID attachmentGuid; if(dlg.ShowDialog() true) { await this.InitData(attachmentGuid); } } } }最后我们通过打开一个新的页面展示附件列表即可附件列表可以通过代码生成工具快速生成根据数据库结构生成相关的界面展示代码。界面生成后合并到系统中即可使用。我们可以切换列表页面为图片列表的方式展示如下界面所示。如果是图片文件我们提供一个预览的入口利用HandyControl的图片预览控件ImageBrowser 控件实现图片的预览处理。DataGridTemplateColumn Width* Header预览/文件 DataGridTemplateColumn.CellTemplate DataTemplate StackPanel TextBlock Text{Binding SavePath} Visibility{Binding IsImage, Converter{StaticResource Boolean2VisibilityReConverter}} / Image Height50 Margin2 MouseLeftButtonDownImage_MouseLeftButtonDown Source{Binding Converter{StaticResource FileUploadImagePathConverter}} ToolTip单击打开图片预览 Visibility{Binding IsImage, Converter{StaticResource Boolean2VisibilityConverter}} / /StackPanel /DataTemplate /DataGridTemplateColumn.CellTemplate /DataGridTemplateColumn预览的事件代码如下所示。private void Image_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) { var image sender as Image; if (image ! null) { var path ((BitmapImage)image.Source).UriSource.AbsoluteUri; var dlg new ImageBrowser(new Uri(path)); dlg.ShowTitle false; dlg.KeyDown (s, e) { if (e.Key System.Windows.Input.Key.Escape) { dlg.Close(); } }; dlg.ShowDialog(); } }预览界面效果图如下所示。以上就是我们在处理WPF端附件、图片列表的一些处理界面设计以及一些操作过程。本文转载自博客园 - 伍华聪