在我們之前的開發(fā)框架中，往往都是為了方便，對(duì)附件的管理都會(huì)進(jìn)行一些簡(jiǎn)單的封裝，目的是為了方便快速的使用，并達(dá)到統(tǒng)一界面的效果。本文主要介紹基于SqlSugar開發(fā)框架的WPF應(yīng)用端，對(duì)于附件展示和控件的一些封裝處理界面效果，供大家參考。

PS：給大家推薦一個(gè)C#開發(fā)可以用到的界面組件——DevExpress WPF，它擁有120+個(gè)控件和庫，將幫助您交付滿足甚至超出企業(yè)需求的高性能業(yè)務(wù)應(yīng)用程序。通過DevExpress WPF能創(chuàng)建有著強(qiáng)大互動(dòng)功能的XAML基礎(chǔ)應(yīng)用程序，這些應(yīng)用程序?qū)Ｗ⒂诋?dāng)代客戶的需求和構(gòu)建未來新一代支持觸摸的解決方案。

DevExpress技術(shù)交流群9：909157416      歡迎一起進(jìn)群討論

1. 回顧附件管理，WinForm端以及VueElement的前端界面效果

由于我們統(tǒng)一了附件的處理方式，底層同時(shí)支持多種上傳方式，F(xiàn)TP文件上傳、常規(guī)文件上傳、以及OSS的文件上傳等方式，因此界面展示也是統(tǒng)一的話，就可以在各個(gè)界面端達(dá)到統(tǒng)一的UI效果，使用起來更加方便。

例如我們?cè)赪inform的系統(tǒng)界面中，編輯信息的一個(gè)界面里面分門別類管理很多影像學(xué)的圖片資料，通過查看附件，可以看到其中一些圖片附件的縮略圖，需要進(jìn)一步查看，可以雙擊圖片即可實(shí)現(xiàn)預(yù)覽效果。

上面的界面中，可以查看單項(xiàng)的附件數(shù)量，以及查看具體的附件列表信息。

由于Winform端的附件管理已經(jīng)封裝好控件了，所以在使用的時(shí)候，拖動(dòng)到界面即可。

而對(duì)于Vue+Element的BS前端界面，我們也可以通過自定義組件的方式，實(shí)現(xiàn)統(tǒng)一的界面效果。

為了管理好這些附件圖片等文件信息，我們?cè)谇岸私缑嫣峁┮恍?條件供查詢，如下是Vue3+Element Plus的前端管理界面。

業(yè)務(wù)表單中展示附件的效果，用戶界面展示如下所示。

2. WPF應(yīng)用端的附件管理界面

通過以上的界面參考，我們可以借鑒的用于WPF應(yīng)用端的界面設(shè)計(jì)中，設(shè)計(jì)一些自定義組件，用來快速、統(tǒng)一展示附件信息，WPF應(yīng)用端的附件列表展示界面如下所示。

而業(yè)務(wù)表中的附件列表展示，我們參考Winform端的用戶控件設(shè)計(jì)方式，先展示附件的匯總信息，然后可以查看具體的附件列表，如下界面所示。

需要查看，可以單擊【打開附件】進(jìn)行查看具體的附件列表，如下界面所示。

用戶控件的界面代碼如下所示。

<UserControl
x:Class="WHC.SugarProject.WpfUI.Controls.AttachmentControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:core="clr-namespace:SugarProject.Core;assembly=SugarProjectCore"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:hc="http://handyorg.github.io/handycontrol"
xmlns:helpers="clr-namespace:WHC.SugarProject.WpfUI.Helpers"
xmlns:local="clr-namespace:WHC.SugarProject.WpfUI.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Name="Attachmet"
d:DesignHeight="100"
d:DesignWidth="300"
mc:Ignorable="d">
<Grid Width="{Binding Width, ElementName=Attachmet}" MinWidth="250">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
MinWidth="100"
Margin="5,0,10,0"
VerticalAlignment="Center"
Text="{Binding Path=Text, ElementName=Attachmet}" />
<TextBlock
x:Name="txtTips"
Grid.Column="1"
Margin="10,0,10,0"
VerticalAlignment="Center" />

<Button
Grid.Column="2"
Margin="10,0,10,0"
VerticalAlignment="Center"
Command="{Binding OpenAttachmentCommand, ElementName=Attachmet}"
CommandParameter="{Binding Path=AttachmentGUID, ElementName=Attachmet}"
Content="打開附件"
Style="{StaticResource ButtonSuccess}" />
</Grid>
</UserControl>

后端的代碼和常規(guī)的自定義控件類似，定義一些屬性名稱，以及相關(guān)的事件處理即可，如下代碼所示。

namespace WHC.SugarProject.WpfUI.Controls
{
/// <summary>
/// AttachmentControl.xaml 的交互邏輯
/// </summary>
public partial class AttachmentControl : UserControl
{
private static string TipsContent = "共有【{0}】個(gè)附件";

/// <summary>
/// 標(biāo)題
/// </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; // 更新的新的值

//更新數(shù)據(jù)源
await control.InitData(newValue);
}
}

/// <summary>
/// 更新數(shù)據(jù)源
/// </summary>
/// <param name="attachmentGuid">附件GUID</param>
/// <returns></returns>
private async Task InitData(string attachmentGuid)
{
int count = 0;
if (!attachmentGuid.IsNullOrEmpty() && !this.IsInDesignMode())
{
var itemList = await BLLFactory<IFileUploadService>.Instance.GetByAttachGUID(attachmentGuid);
if (itemList != null)
{
count = itemList.Count;
}
}

//多語言處理提示信息
var newTipsContent = JsonLanguage.Default.GetString(TipsContent);
this.txtTips.Text = string.Format(newTipsContent, count);
}

/// <summary>
/// 默認(rèn)構(gòu)造函數(shù)
/// </summary>
public AttachmentControl()
{
InitializeComponent();
}

/// <summary>
/// 打開附件列表
/// </summary>
[RelayCommand]
private async Task OpenAttachment(string attachmentGuid)
{
var dlg = App.GetService<FileUploadViewPage>();
dlg!.AttachmentGUID = attachmentGuid;
if(dlg.ShowDialog() == true)
{
await this.InitData(attachmentGuid);
}
}
}
}

最后我們通過打開一個(gè)新的頁面，展示附件列表即可，附件列表，可以通過代碼生成工具快速生成，根據(jù)數(shù)據(jù)庫結(jié)構(gòu)生成相關(guān)的界面展示代碼。

界面生成后，合并到系統(tǒng)中即可使用。

我們可以切換列表頁面為圖片列表的方式展示，如下界面所示。

 如果是圖片文件，我們提供一個(gè)預(yù)覽的入口，利用HandyControl的圖片預(yù)覽控件ImageBrowser 控件實(shí)現(xiàn)圖片的預(yù)覽處理。

<DataGridTemplateColumn Width="*" Header="預(yù)覽/文件">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding SavePath}" Visibility="{Binding IsImage, Converter={StaticResource Boolean2VisibilityReConverter}}" />
<Image
Height="50"
Margin="2"
MouseLeftButtonDown="Image_MouseLeftButtonDown"
Source="{Binding Converter={StaticResource FileUploadImagePathConverter}}"
ToolTip="單擊打開圖片預(yù)覽"
Visibility="{Binding IsImage, Converter={StaticResource Boolean2VisibilityConverter}}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

預(yù)覽的事件代碼如下所示。

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();
}
}

預(yù)覽界面效果圖如下所示。

以上就是我們?cè)谔幚鞼PF端附件、圖片列表的一些處理界面設(shè)計(jì)，以及一些操作過程。

本文轉(zhuǎn)載自：