Winform開發框架之肖像顯示保存控件的實現

我們在開發一些Winform程序的時候，除了常規的顯示普通數據外，有的時候需要顯示一些人員肖像或者一些車輛等物體的圖片，一般這些內容較小，所以以二進制存儲在數據庫是一個不錯的方案。但由於它們雖然很常用，設計數據庫保存的邏輯又會使得整個控件的封裝顯得麻煩很多。本文介紹的肖像顯示保存控件，通過事件的封裝處理，讓數據的保存不在依賴於數據庫存儲模塊，實現更加通用的特性。

1、肖像顯示保存控件的需求

我們在一些程序了里面，可能需要顯示一些人員頭像，車輛圖片，物件圖片等，這些圖片可以從電腦上選取，也可以拍照，當然最重要的是，方便使用，並能存儲到數據庫里面，這個就是我們一般的需求了。

1）人員肖像顯示效果：

2）車輛圖片展示效果

控件的工具條上，提供了編輯圖片，保存圖片，恢復默認圖片，拍照等功能，當然我們希望控件和整個界面一起，實現圖片數據的方便加載和保存操作。

 

2、肖像顯示保存控件的設計

前面我們看了一些常用的場景，對我們設計這個通用性的肖像顯示保存控件有很好的指導意義，我們只需要把圖片顯示部分作為一個控件，然后公布一些事件給外部實現，從而實現我們需要的數據加載、數據保存等操作，至於其他的功能，我們可以集成到里面去。

我們設計一個用戶自定義控件，上面放一個圖片顯示框，然后增加一些按鈕在上面，並設置好工具欄的圖片顯示，效果如下所示。

由於我們需要給外部處理數據的綁定（需要從數據庫加載）和數據的保存（保存到數據庫里面），因此拋出兩個委托代理定義。

    /// <summary>
    /// 保存圖片的處理代理定義
    /// </summary>
    /// <param name="id">記錄ID</param>
    /// <param name="imageBytes">圖片數據</param>
    /// <param name="imageType">圖片類型</param>
    /// <returns></returns>
    public delegate bool SavePortraitHandler(string id, byte[] imageBytes, string imageType);

    /// <summary>
    /// 綁定圖片數據的代理定義
    /// </summary>
    /// <param name="id">記錄ID</param>
    /// <param name="imageType">圖片類型</param>
    /// <returns></returns>
    public delegate byte[] BindPortraitHandler(string id, string imageType);

然后我們在用戶控件里面增加一些屬性和事件定義，部分代碼如下所示。

    /// <summary>
    /// 圖片數據顯示和采集控件
    /// </summary>
    public partial class PortraitControl : XtraUserControl
    {
        #region 事件及屬性定義
        /// <summary>
        /// 保存圖片操作的事件
        /// </summary>
        public event SavePortraitHandler OnSavePortrait;

        /// <summary>
        /// 綁定圖片數據的事件
        /// </summary>
        public event BindPortraitHandler OnBindPortait;

        /// <summary>
        /// 記錄ID
        /// </summary>
        public string ID { get; set; }

        /// <summary>
        /// 圖片是否被修改過
        /// </summary>
        public bool ImageIsDirty { get; set; }

然后我們需要實現的就是，公布兩個公共方法，分別是數據的綁定，綁定到界面控件的操作函數，我們主要注意的是，這里調用了事件OnBindPortait，以實現數據庫的解耦，代碼如下所示。

        /// <summary>
        /// 綁定圖片的操作，觸發綁定事件處理
        /// </summary>
        /// <param name="id">記錄ID</param>
        public void BindPicture(string id)
        {
            try
            {
                this.ID = id; //設置控件的ID值

                #region 更新圖片顯示操作

                if (OnBindPortait == null)
                {
                    MessageDxUtil.ShowTips("控件未指定OnBindPortait事件處理");
                    return;
                }

                byte[] imageBytes = OnBindPortait(id, ImageType); if (imageBytes != null)
                {
                    this.picPortrait.Image = ImageHelper.ImageFromBytes(imageBytes);
                }
                else
                {
                    ResetDefaultImage(ImageType);
                }

                #endregion
            }
            catch (Exception ex)
            {
                MessageDxUtil.ShowError(ex.Message);
                LogTextHelper.Error(ex);
            }
        }

數據庫保存的實現，和上面思路差不多，也是實現事件的處理即可，通過調用事件OnSavePortrait，實現數據庫的解耦。

        /// <summary>
        /// 保存圖片到服務器
        /// </summary>
        public bool SavePicture(string id)
        {
            this.ID = id;//設置控件的ID值

            if (string.IsNullOrEmpty(id))
            {
                MessageDxUtil.ShowTips("記錄ID未指定，無法保存，請先保存數據！");
                return false;
            }
            if (OnSavePortrait == null)
            {
                MessageDxUtil.ShowTips("控件未指定OnSavePortrait處理事件！");
                return false;
            }

            if (picPortrait.Image != null)
            {
                try
                {
                    byte[] imageBytes = ImageHelper.ImageToBytes(this.picPortrait.Image);

                    bool sucess = false;
                    if (OnSavePortrait != null)
                    {
                        sucess = OnSavePortrait(this.ID, imageBytes, ImageType);
                    }
                    return sucess;

                }
                catch (Exception ex)
                {
                    MessageDxUtil.ShowError(ex.Message);
                    LogTextHelper.Error(ex);
                }
            }
            return false;
        }

 

3、肖像顯示保存控件的使用

完成以上控件的設計和處理后，編譯后，模塊將增加一個用戶控件，這樣我們就可以在需要的界面模塊里面，把這個控件拖動到設計界面里面去了，設計效果和下圖類似。

這個時候，肖像顯示保存控件就作為一個整體進行使用了。

由於我們設計控件的時候，我們把它和外部數據庫存儲和加載進行了隔離，因此這里需要進行整合，通過事件進行整合處理。調用代碼如下所示。

    public partial class FrmEditDriver : BaseEditForm
    {
        public FrmEditDriver()
        {
            InitializeComponent();

            this.portraitControl1.ImageType = "個人肖像"; this.portraitControl1.OnBindPortait += new BindPortraitHandler(portraitControl1_OnBindPortait); this.portraitControl1.OnSavePortrait += new SavePortraitHandler(portraitControl1_OnSavePortrait);
        }

 然后實現其中自動增加的事件函數即可，主要就是調用業務類實現數據的存儲和加載處理邏輯，代碼如下所示。

        bool portraitControl1_OnSavePortrait(string id, byte[] imageBytes, string imageType)
        {
            return BLLFactory<Driver>.Instance.UpdateImageBytes(id, imageBytes, imageType);
        }

        byte[] portraitControl1_OnBindPortait(string id, string imageType)
        {
            return BLLFactory<Driver>.Instance.GetImageBytes(id, imageType);
        }

在數據的顯示函數里面，我們主動調用控件的函數實現界面數據的綁定顯示。

        /// <summary>
        /// 數據顯示的函數
        /// </summary>
        public override void DisplayData()
        {
            InitDictItem();//數據字典加載（公用）

            if (!string.IsNullOrEmpty(ID))
            {
                #region 顯示信息
                DriverInfo info = BLLFactory<Driver>.Instance.FindByID(ID);
                if (info != null)
                {
                    tempInfo = info;//重新給臨時對象賦值，使之指向存在的記錄對象

                    txtHandNo.Text = info.HandNo;
                    txtName.Text = info.Name;
                    txtMobile.Text = info.Mobile;
                    txtDept.Text = info.Dept;
                    txtStartDriveDate.SetDateTime(info.StartDriveDate);
                    txtSex.Text = info.Sex;
                    txtBirthday.SetDateTime(info.Birthday);
                    txtNote.Text = info.Note;
                }
                #endregion
            }
            else
            {
            }

            //綁定圖片
            this.portraitControl1.BindPicture(tempInfo.ID);
        }

而在保存按鈕實現數據保存的時候，我們也可以調用控件自身的保存操作函數，實現數據的存儲。

        /// <summary>
        /// 新增狀態下的數據保存
        /// </summary>
        /// <returns></returns>
        public override bool SaveAddNew()
        {
            DriverInfo info = tempInfo;//必須使用存在的局部變量，因為部分信息可能被附件使用
            SetInfo(info);

            try
            {
                #region 新增數據

                bool succeed = BLLFactory<Driver>.Instance.Insert(info);
                if (succeed)
                {
                    //可添加其他關聯操作
                    this.portraitControl1.SavePicture(tempInfo.ID); return true;
                }
                #endregion
            }
            catch (Exception ex)
            {
                LogTextHelper.Error(ex);
                MessageDxUtil.ShowError(ex.Message);
            }
            return false;
        }

 

通過和數據庫操作實現解耦，我們可以對這個控件進行更方便的重用，而代碼也很簡單，這樣也就實現了我們統一化、簡單化、可復用性的目標了。