WPF应用开发之附件管理

在我们之前的开发框架中，往往都是为了方便，对附件的管理都会进行一些简单的封装，目的是为了方便快速的使用，并达到统一界面的效果，本篇随笔介绍我们基于SqlSugar开发框架的WPF应用端，对于附件展示和控件的一些封装处理界面效果，供大家参考斧正。
1、回顾附件管理，Winform端以及VueElement的前端界面效果

由于我们统一了附件的处理方式，底层同时支持多种上传方式，FTP文件上传、常规文件上传、以及OSS的文件上传等方式，因此界面展示也是统一的话，就可以在各个界面端达到统一的UI效果，使用起来更加方便。
例如我们在Winform的系统界面中，编辑信息的一个界面里面分门别类管理很多影像学的图片资料，通过查看附件，可以看到其中一些图片附件的缩略图，需要进一步查看，可以双击图片即可实现预览效果。

上面的界面中，可以查看单项的附件数量，以及查看具体的附件列表信息。

由于Winform端的附件管理已经封装好控件了，所以在使用的时候，拖动到界面即可。

而对于Vue+Element的BS前端界面，我们也可以通过自定义组件的方式，实现统一的界面效果。
为了管理好这些附件图片等文件信息，我们在前端界面提供一些条件供查询，如下是Vue3+Element Plus的前端管理界面。

业务表单中展示附件的效果，用户界面展示如下所示。

 
2、WPF应用端的附件管理界面

通过以上的界面参考，我们可以借鉴的用于WPF应用端的界面设计中，设计一些自定义组件，用来快速、统一展示附件信息，WPF应用端的附件列表展示界面如下所示。

而业务表中的附件列表展示，我们参考Winform端的用户控件设计方式，先展示附件的汇总信息，然后可以查看具体的附件列表，如下界面所示。

需要查看，可以单击【打开附件】进行查看具体的附件列表，如下界面所示。

 用户控件的界面代码如下所示。

1. <UserControl
2.     x:Class="WHC.SugarProject.WpfUI.Controls.AttachmentControl"
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5.     xmlns:core="clr-namespace:SugarProject.Core;assembly=SugarProjectCore"
6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7.     xmlns:hc="https://handyorg.github.io/handycontrol"
8.     xmlns:helpers="clr-namespace:WHC.SugarProject.WpfUI.Helpers"
9.     xmlns:local="clr-namespace:WHC.SugarProject.WpfUI.Controls"
10.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
11.     Name="Attachmet"
12.     d:DesignHeight="100"
13.     d:DesignWidth="300"
14.     mc:Ignorable="d">
15.     <Grid Width="{Binding Width, ElementName=Attachmet}" MinWidth="250">
16.         <Grid.ColumnDefinitions>
17.             <ColumnDefinition Width="Auto" />
18.             <ColumnDefinition Width="Auto" />
19.             <ColumnDefinition Width="auto" />
20.         </Grid.ColumnDefinitions>
21.         <TextBlock
22.             Grid.Column="0"
23.             MinWidth="100"
24.             Margin="5,0,10,0"
25.             VerticalAlignment="Center"
26.             Text="{Binding Path=Text, ElementName=Attachmet}" />
27.         <TextBlock
28.             x:Name="txtTips"
29.             Grid.Column="1"
30.             Margin="10,0,10,0"
31.             VerticalAlignment="Center" />
33.         <Button
34.             Grid.Column="2"
35.             Margin="10,0,10,0"
36.             VerticalAlignment="Center"
37.             Command="{Binding OpenAttachmentCommand, ElementName=Attachmet}"
38.             CommandParameter="{Binding Path=AttachmentGUID, ElementName=Attachmet}"
39.             Content="打开附件"
40.             Style="{StaticResource ButtonSuccess}" />
41.     </Grid>
42. </UserControl>

复制代码

后端的代码和常规的自定义控件类似，定义一些属性名称，以及相关的事件处理即可，如下代码所示。

1. namespace WHC.SugarProject.WpfUI.Controls
2. {
3.     /// <summary>
4.     /// AttachmentControl.xaml 的交互逻辑
5.     /// </summary>
6.     public partial class AttachmentControl : UserControl
7.     {
8.         private static string TipsContent = "共有【{0}】个附件";
10.         /// <summary>
11.         /// 标题
12.         /// </summary>
13.         public string Text
14.         {
15.             get { return (string)GetValue(TextProperty); }
16.             set { SetValue(TextProperty, value); }
17.         }
18.         public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
19.             nameof(Text), typeof(string), typeof(AttachmentControl),
20.             new FrameworkPropertyMetadata("文本说明", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
23.         /// <summary>
24.         /// 附件组的GUID
25.         /// </summary>
26.         public string? AttachmentGUID
27.         {
28.             get { return (string?)GetValue(AttachmentGUIDProperty); }
29.             set { SetValue(AttachmentGUIDProperty, value); }
30.         }
32.         public static readonly DependencyProperty AttachmentGUIDProperty = DependencyProperty.Register(
33.             nameof(AttachmentGUID), typeof(string), typeof(AttachmentControl),
34.             new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, new PropertyChangedCallback(OnAttachmentGUIDPropertyChanged)));
37.         private static async void OnAttachmentGUIDPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
38.         {
39.             if (d is not AttachmentControl control)
40.                 return;
42.             if (control != null)
43.             {
44.                 var oldValue = (string?)e.OldValue;  // 旧的值
45.                 var newValue = (string?)e.NewValue; // 更新的新的值
47.                 //更新数据源
48.                 await control.InitData(newValue);
49.             }
50.         }
52.         /// <summary>
53.         /// 更新数据源
54.         /// </summary>
55.         /// <param name="attachmentGuid">附件GUID</param>
56.         /// <returns></returns>
57.         private async Task InitData(string attachmentGuid)
58.         {
59.             int count = 0;
60.             if (!attachmentGuid.IsNullOrEmpty() && !this.IsInDesignMode())
61.             {
62.                 var itemList = await BLLFactory<IFileUploadService>.Instance.GetByAttachGUID(attachmentGuid);
63.                 if (itemList != null)
64.                 {
65.                     count = itemList.Count;
66.                 }
67.             }
69.             //多语言处理提示信息
70.             var newTipsContent = JsonLanguage.Default.GetString(TipsContent);
71.             this.txtTips.Text = string.Format(newTipsContent, count);
72.         }
74.         /// <summary>
75.         /// 默认构造函数
76.         /// </summary>
77.         public AttachmentControl()
78.         {
79.             InitializeComponent();
80.         }
82.         /// <summary>
83.         /// 打开附件列表
84.         /// </summary>
85.         [RelayCommand]
86.         private async Task OpenAttachment(string attachmentGuid)
87.         {
88.             <strong>var dlg = App.GetService<FileUploadViewPage></strong><strong>();</strong>
89.             dlg!.AttachmentGUID = attachmentGuid;
90.             if(dlg.ShowDialog() == true)
91.             {
92.                 await this.InitData(attachmentGuid);
93.             }
94.         }
95.     }
96. }

复制代码

最后我们通过打开一个新的页面，展示附件列表即可，附件列表，可以通过代码生成工具快速生成，根据数据库结构生成相关的界面展示代码。
关于WPF应用端界面生成，有兴趣可以参考《循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码》
界面生成后，合并到系统中即可使用。 
我们可以切换列表页面为图片列表的方式展示，如下界面所示。

如果是图片文件，我们提供一个预览的入口，利用HandyControl的图片预览控件ImageBrowser 控件实现图片的预览处理。

1. <DataGridTemplateColumn Width="*" Header="预览/文件">
2.     <DataGridTemplateColumn.CellTemplate>
3.         <DataTemplate>
4.             <StackPanel>
5.                 <TextBlock Text="{Binding SavePath}" Visibility="{Binding IsImage, Converter={StaticResource Boolean2VisibilityReConverter}}" />
6.                 <Image
7.                     Height="50"
8.                     Margin="2"
9.                     MouseLeftButtonDown="<strong>Image_MouseLeftButtonDown</strong>"
10.                     Source="{Binding Converter={StaticResource FileUploadImagePathConverter}}"
11.                     ToolTip="单击打开图片预览"
12.                     Visibility="{Binding IsImage, Converter={StaticResource Boolean2VisibilityConverter}}" />
13.             </StackPanel>
14.         </DataTemplate>
15.     </DataGridTemplateColumn.CellTemplate>
16. </DataGridTemplateColumn>

复制代码

预览的事件代码如下所示。

1.     private void Image_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
2.     {
3.         var image = sender as Image;
4.         if (image != null)
5.         {
6.             var path = ((BitmapImage)image.Source).UriSource.AbsoluteUri;
7.             var dlg = new <strong>ImageBrowser</strong>(new Uri(path));
8.             dlg.ShowTitle = false;
9.             dlg.KeyDown += (s, e) =>
10.             {
11.                 if (e.Key == System.Windows.Input.Key.Escape)
12.                 {
13.                     dlg.Close();
14.                 }
15.             };
16.             dlg.ShowDialog();
17.         }
18.     }

复制代码

预览界面效果图如下所示。

 以上就是我们在处理WPF端附件、图片列表的一些处理界面设计，以及一些操作过程。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！