WPF應用開發之附件管理

在我們之前的開發框架中，往往都是為了方便，對附件的管理都會進行一些簡單的封裝，目的是為了方便快速的使用，並達到統一界面的效果，本篇隨筆介紹我們基於SqlSugar開發框架的WPF應用端，對於附件展示和控制項的一些封裝處理界面效果，供大家參考斧正。

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

由於我們統一了附件的處理方式，底層同時支持多種上傳方式，FTP文件上傳、常規文件上傳、以及OSS的文件上傳等方式，因此界面展示也是統一的話，就可以在各個界面端達到統一的UI效果，使用起來更加方便。

例如我們在Winform的系統界面中，編輯信息的一個界面裡面分門別類管理很多影像學的圖片資料，通過查看附件，可以看到其中一些圖片附件的縮略圖，需要進一步查看，可以雙擊圖片即可實現預覽效果。

上面的界面中，可以查看單項的附件數量，以及查看具體的附件列表信息。

由於Winform端的附件管理已經封裝好控制項了，所以在使用的時候，拖動到界面即可。

而對於Vue+Element的BS前端界面，我們也可以通過自定義組件的方式，實現統一的界面效果。

為了管理好這些附件圖片等文件信息，我們在前端界面提供一些條件供查詢，如下是Vue3+Element Plus的前端管理界面。

業務表單中展示附件的效果，用戶界面展示如下所示。

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

通過以上的界面參考，我們可以借鑒的用於WPF應用端的界面設計中，設計一些自定義組件，用來快速、統一展示附件信息，WPF應用端的附件列表展示界面如下所示。

而業務表中的附件列表展示，我們參考Winform端的用戶控制項設計方式，先展示附件的彙總信息，然後可以查看具體的附件列表，如下界面所示。

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

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

<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="https://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>

後端的代碼和常規的自定義控制項類似，定義一些屬性名稱，以及相關的事件處理即可，如下代碼所示。

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 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>
        /// 預設構造函數
        /// </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);
            }
        }
    }
}

最後我們通過打開一個新的頁面，展示附件列表即可，附件列表，可以通過代碼生成工具快速生成，根據資料庫結構生成相關的界面展示代碼。

關於WPF應用端界面生成，有興趣可以參考《循序漸進介紹基於CommunityToolkit.Mvvm 和HandyControl的WPF應用端開發(12) -- 使用代碼生成工具Database2Sharp生成WPF界面代碼》

界面生成後，合併到系統中即可使用。 

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

如果是圖片文件，我們提供一個預覽的入口，利用HandyControl的圖片預覽控制項ImageBrowser 控制項實現圖片的預覽處理。

<DataGridTemplateColumn Width="*" Header="預覽/文件">
    <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="單擊打開圖片預覽"
                    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端附件、圖片列表的一些處理界面設計，以及一些操作過程。