政务公开及网站建设意见,网站的策划方案怎么写,内容社交电商平台,网站项目案例在我们之前的开发框架中#xff0c;往往都是为了方便#xff0c;对附件的管理都会进行一些简单的封装#xff0c;目的是为了方便快速的使用#xff0c;并达到统一界面的效果#xff0c;本篇随笔介绍我们基于SqlSugar开发框架的WPF应用端#xff0c;对于附件展示和控件的一…在我们之前的开发框架中往往都是为了方便对附件的管理都会进行一些简单的封装目的是为了方便快速的使用并达到统一界面的效果本篇随笔介绍我们基于SqlSugar开发框架的WPF应用端对于附件展示和控件的一些封装处理界面效果供大家参考斧正。 1、回顾附件管理Winform端以及VueElement的前端界面效果 由于我们统一了附件的处理方式底层同时支持多种上传方式FTP文件上传、常规文件上传、以及OSS的文件上传等方式因此界面展示也是统一的话就可以在各个界面端达到统一的UI效果使用起来更加方便。 例如我们在Winform的系统界面中编辑信息的一个界面里面分门别类管理很多影像学的图片资料通过查看附件可以看到其中一些图片附件的缩略图需要进一步查看可以双击图片即可实现预览效果。 上面的界面中可以查看单项的附件数量以及查看具体的附件列表信息。 由于Winform端的附件管理已经封装好控件了所以在使用的时候拖动到界面即可。 而对于VueElement的BS前端界面我们也可以通过自定义组件的方式实现统一的界面效果。
为了管理好这些附件图片等文件信息我们在前端界面提供一些条件供查询如下是Vue3Element Plus的前端管理界面。 业务表单中展示附件的效果用户界面展示如下所示。 2、WPF应用端的附件管理界面 通过以上的界面参考我们可以借鉴的用于WPF应用端的界面设计中设计一些自定义组件用来快速、统一展示附件信息WPF应用端的附件列表展示界面如下所示。 而业务表中的附件列表展示我们参考Winform端的用户控件设计方式先展示附件的汇总信息然后可以查看具体的附件列表如下界面所示。 需要查看可以单击【打开附件】进行查看具体的附件列表如下界面所示。 用户控件的界面代码如下所示。 UserControlx:ClassWHC.SugarProject.WpfUI.Controls.AttachmentControlxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:coreclr-namespace:SugarProject.Core;assemblySugarProjectCorexmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:hchttps://handyorg.github.io/handycontrolxmlns:helpersclr-namespace:WHC.SugarProject.WpfUI.Helpersxmlns:localclr-namespace:WHC.SugarProject.WpfUI.Controlsxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006NameAttachmetd:DesignHeight100d:DesignWidth300mc:IgnorabledGrid Width{Binding Width, ElementNameAttachmet} MinWidth250Grid.ColumnDefinitionsColumnDefinition WidthAuto /ColumnDefinition WidthAuto /ColumnDefinition Widthauto //Grid.ColumnDefinitionsTextBlockGrid.Column0MinWidth100Margin5,0,10,0VerticalAlignmentCenterText{Binding PathText, ElementNameAttachmet} /TextBlockx:NametxtTipsGrid.Column1Margin10,0,10,0VerticalAlignmentCenter /ButtonGrid.Column2Margin10,0,10,0VerticalAlignmentCenterCommand{Binding OpenAttachmentCommand, ElementNameAttachmet}CommandParameter{Binding PathAttachmentGUID, ElementNameAttachmet}Content打开附件Style{StaticResource ButtonSuccess} //Grid
/UserControl 后端的代码和常规的自定义控件类似定义一些属性名称以及相关的事件处理即可如下代码所示。 namespace WHC.SugarProject.WpfUI.Controls
{/// summary/// AttachmentControl.xaml 的交互逻辑/// /summarypublic partial class AttachmentControl : UserControl{private static string TipsContent 共有【{0}】个附件;/// summary/// 标题/// /summarypublic 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/// /summarypublic 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/returnsprivate 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/// 默认构造函数/// /summarypublic 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);}}}
} 最后我们通过打开一个新的页面展示附件列表即可附件列表可以通过代码生成工具快速生成根据数据库结构生成相关的界面展示代码。 关于WPF应用端界面生成有兴趣可以参考《循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码》
界面生成后合并到系统中即可使用。 我们可以切换列表页面为图片列表的方式展示如下界面所示。 如果是图片文件我们提供一个预览的入口利用HandyControl的图片预览控件ImageBrowser 控件实现图片的预览处理。 DataGridTemplateColumn Width* Header预览/文件DataGridTemplateColumn.CellTemplateDataTemplateStackPanelTextBlock Text{Binding SavePath} Visibility{Binding IsImage, Converter{StaticResource Boolean2VisibilityReConverter}} /ImageHeight50Margin2MouseLeftButtonDownImage_MouseLeftButtonDownSource{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端附件、图片列表的一些处理界面设计以及一些操作过程。 文章转载自伍华聪
原文链接https://www.cnblogs.com/wuhuacong/p/17864501.html
