1. 程式人生 > >WPF自定義控制元件(五)の使用者控制元件(完結)

WPF自定義控制元件(五)の使用者控制元件(完結)

原文: WPF自定義控制元件(五)の使用者控制元件(完結)

使用者控制元件,WPF中是繼承自UserControl的控制元件,我們可以在裡面融合我們的業務邏輯。

示例:(一個厭惡選擇的使用者控制元件)

後端:

using iMicClassBase;
using iMicClassBase.BaseControl;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Forms;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace iMicClassUI.HomeToolControls
{
    /**
     * @控制元件名:HomeToolBackgroundPanel
     * @功能  :切換黑板介面背景
     * @作者  :tjer
     * @時間  :2017.05.19
     * **/

    /// <summary>
    /// HomeToolBackgroundPanel.xaml 的互動邏輯
    /// </summary>
    public partial class HomeToolBackgroundPanel : System.Windows.Controls.UserControl
    {
        #region 委託及事件
        /// <summary>
        /// 背景改變事件委託
        /// </summary>
        /// <param name="sender">源</param>
        /// <param name="type">型別</param>
        /// <param name="ChangeObj">改變物件</param>
        public delegate void BackGroundSelectedChangeDelegate(object sender, BBBackGroundType type,object ChangeObj);

        /// <summary>
        /// 背景改變事件
        /// </summary>
        public BackGroundSelectedChangeDelegate BackGroundSelectedChange = null;

        /// <summary>
        /// 選項卡改變事件
        /// </summary>
        public static readonly RoutedEvent TabItemChangeEvent = EventManager.RegisterRoutedEvent
        ("TabItemChange", RoutingStrategy.Bubble, typeof(RoutedEventArgs), typeof(HomeToolBackgroundPanel));
        public event RoutedEventHandler TabItemChange
        {
            add { AddHandler(TabItemChangeEvent, value); }
            remove { RemoveHandler(TabItemChangeEvent, value); }
        }
        #endregion

        #region 變數
        /// <summary>
        /// 呼叫系統顏色框
        /// </summary>
        private ColorDialog SysColorDia = new ColorDialog();
        #endregion

        #region 屬性及依賴屬性
        /// <summary>
        /// 當前選項卡背景型別
        /// </summary>
        public BBBackGroundType SelectedOption
        {
            get;
            set;
        } = BBBackGroundType.ColorType;

        /// <summary>
        /// 當前顏色
        /// </summary>
        public static readonly DependencyProperty CurrentColorProperty =
            DependencyProperty.Register("CurrentColor", typeof(System.Windows.Media.Color), typeof(HomeToolBackgroundPanel), new PropertyMetadata((Color)ColorConverter.ConvertFromString("#FF18311B"), OnCurrentColorChanged));
        [Description("當前顏色"), Browsable(false)]        
        public System.Windows.Media.Color CurrentColor
        {
            get { return (System.Windows.Media.Color)GetValue (CurrentColorProperty); }
            set { SetValue(CurrentColorProperty, value); }
        }

        /// <summary>
        /// 當前本地圖片背景,從1開始,預設是無效0
        /// <summary>
        public static readonly DependencyProperty CurrentSysBgIndexProperty =
            DependencyProperty.Register("CurrentSysBgIndex", typeof(int), typeof(HomeToolBackgroundPanel), new PropertyMetadata(0, OnCurrentSysBgIndexChanged));

        [Description("當前系統圖片背景索引"), Browsable(false)]
        public int CurrentSysBgIndex
        {
            get { return (int)GetValue(CurrentSysBgIndexProperty); }
            set { SetValue(CurrentSysBgIndexProperty ,value); }
        }

        /// <summary>
        /// 當前本地圖片路徑
        /// </summary>
        public static readonly DependencyProperty CurrentLocalImageBgURIProperty =
            DependencyProperty.Register("CurrentLocalImageBgURI", typeof(string), typeof(HomeToolBackgroundPanel), new PropertyMetadata(string.Empty, OnCurrentLocalImageBgURIChanged));
        [Description("當前本地圖片路徑"), Browsable(false)]
        public string CurrentLocalImageBgURI
        {
            get { return (string)GetValue(CurrentLocalImageBgURIProperty); }
            set { SetValue(CurrentLocalImageBgURIProperty, value); }
        }
        #endregion

        #region 窗體事件
        /// <summary>
        /// 構造
        /// </summary>
        public HomeToolBackgroundPanel()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 初始化,每次顯示的時候呼叫,可以展示當前黑板背景狀態
        /// </summary>
        /// <param name="type">當前黑板背景型別</param>
        /// <param name="obj">背景內容物件</param>
        public void Init(BBBackGroundType type,object obj)
        {
            switch (type)
            {
                case BBBackGroundType.ColorType:
                    tabPanel.SelectedIndex = 0;
                    CurrentColor = (System.Windows.Media.Color)obj ;
                    break;
                case BBBackGroundType.ImageType:
                    tabPanel.SelectedIndex = 1;
                    CurrentSysBgIndex = (int)obj;
                    break;
                case BBBackGroundType.LocalType:
                    tabPanel.SelectedIndex = 2;
                    CurrentLocalImageBgURI = (string)obj;
                    break;
            }
        }
        #endregion

        #region 依賴事件
        /// <summary>
        /// 顏色改變事件
        /// </summary>
        /// <param name="d">依賴物件</param>
        /// <param name="e">事件</param>
        private static void OnCurrentColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (e.OldValue == e.NewValue)
            {
                return;
            }

            if ((Color)e.NewValue== (Color)ColorConverter.ConvertFromString("#FF18311B"))
            {
                return;
            }

            HomeToolBackgroundPanel control = (HomeToolBackgroundPanel)d;
            control.CurrentSysBgIndex = 0;
            control.CurrentLocalImageBgURI = string.Empty;
            control.BackGroundSelectedChange?.Invoke(control, BBBackGroundType.ColorType,control.CurrentColor);
        }

         /// <summary>
         /// 背景索引改變事件
         /// </summary>
         /// <param name="d">依賴物件</param>
         /// <param name="e">事件</param>
        private static void OnCurrentSysBgIndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (e.OldValue == e.NewValue)
            {
                return;
            }

            if ((int)e.NewValue==0)
            {
                return;
            }
                   
            HomeToolBackgroundPanel control = (HomeToolBackgroundPanel)d;
            control.CurrentColor = (Color)ColorConverter.ConvertFromString("#FF18311B"); 
            control.CurrentLocalImageBgURI = string.Empty;
            control.BackGroundSelectedChange?.Invoke(control, BBBackGroundType.ImageType, control.CurrentSysBgIndex);
        }

        /// <summary>
        /// 本地背景路徑改變
        /// </summary>
        /// <param name="d">依賴物件</param>
        /// <param name="e">事件</param>
        private static void OnCurrentLocalImageBgURIChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (e.OldValue == e.NewValue)
            {
                return;
            }

            if ((string)e.NewValue == string.Empty)
            {
                return;
            }

            HomeToolBackgroundPanel control = (HomeToolBackgroundPanel)d;
            control.CurrentColor = (Color)ColorConverter.ConvertFromString("#FF18311B");
            control.CurrentSysBgIndex = 0;
            control.BackGroundSelectedChange?.Invoke(control, BBBackGroundType.LocalType, control.CurrentLocalImageBgURI);
        }
        #endregion

        #region 內部操作事件
        /// <summary>
        /// 選項卡改變事件
        /// </summary>
        /// <param name="sender">事件源</param>
        /// <param name="e">事件</param>
        private void TabItem_Select(object sender, RoutedEventArgs e)
        {
            //選項卡改變,背景型別改變
            switch (tabPanel.SelectedIndex)
            {
                case 0:
                    SelectedOption = BBBackGroundType.ColorType;
                    break;
                case 1:
                    SelectedOption = BBBackGroundType.ImageType;
                    break;
                case 2:
                    SelectedOption = BBBackGroundType.LocalType;
                    break;

            }
            RoutedEventArgs routedEventArgs = new RoutedEventArgs(TabItemChangeEvent, e.OriginalSource);
            RaiseEvent(routedEventArgs);
        }

        /// <summary>
        /// 面板顏色值選擇
        /// </summary>
        /// <param name="sender">事件源</param>
        /// <param name="e">事件</param>
        private void ColorPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            colorPanelCurrent.Color = (sender as ColorPanel).Color;
            if ((sender as ColorPanel).Color == (Color)(ColorConverter.ConvertFromString("#FF18311B")))     //保證顏色值是設定色的時候也會觸發
            {
                btnBg1.IsSelected = false;
                btnBg2.IsSelected = false;
                btnBg3.IsSelected = false;
                btnBg4.IsSelected = false;
                CurrentSysBgIndex = 0;
                CurrentLocalImageBgURI = string.Empty;
                BackGroundSelectedChange?.Invoke(this, BBBackGroundType.ColorType, CurrentColor);
            }
        }

        /// <summary>
        /// 點選更多顏色
        /// </summary>
        /// <param name="sender">事件源</param>
        /// <param name="e">事件</param>
        private void btnMoreColor_Click(object sender, RoutedEventArgs e)
        {
            DialogResult result = SysColorDia.ShowDialog();
            if (result == System.Windows.Forms.DialogResult.OK)
            {
                colorPanelCurrent.Color = ColorConverterHelp.ConvertToMediaColor(SysColorDia.Color);
            }
        }

        /// <summary>
        /// 本地背景選擇
        /// </summary>
        /// <param name="sender">事件源</param>
        /// <param name="e">事件</param>
        private void SelectButton_ButtonSelected(object sender, EventArgs e)
        {
            int index = Convert.ToInt32((sender as SelectButton).Tag);

            switch (index)
            {
                case 1:
                    btnBg2.IsSelected = false;
                    btnBg3.IsSelected = false;
                    btnBg4.IsSelected = false;
                    CurrentSysBgIndex = 1;
                    break;
                case 2:
                    btnBg1.IsSelected = false;
                    btnBg3.IsSelected = false;
                    btnBg4.IsSelected = false;
                    CurrentSysBgIndex = 2;
                    break;
                case 3:
                    btnBg1.IsSelected = false;
                    btnBg2.IsSelected = false;
                    btnBg4.IsSelected = false;
                    CurrentSysBgIndex = 3;
                    break;
                case 4:
                    btnBg1.IsSelected = false;
                    btnBg2.IsSelected = false;
                    btnBg3.IsSelected = false;
                    CurrentSysBgIndex = 4;
                    break;
            }

        }

        /// <summary>
        /// 點選選擇本地圖片
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btnAddLoaclImage_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog localBg = new OpenFileDialog();
            localBg.DefaultExt = ".png";
            localBg.Filter = "(背景)|*.png";
            if (localBg.ShowDialog() == DialogResult.OK)
            {
                btnBg1.IsSelected = false;
                btnBg2.IsSelected = false;
                btnBg3.IsSelected = false;
                btnBg4.IsSelected = false;
                CurrentSysBgIndex = 0;
                CurrentLocalImageBgURI = System.IO.Path.GetFullPath(localBg.FileName);
            }
        }

        #endregion
    }
}

  前端:

<UserControl
             x:Name="homeToolBackgroundPanel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:iMicClassUI.HomeToolControls"
             xmlns:iMicClassBase="clr-namespace:iMicClassBase;assembly=iMicClassBase"
             x:Class="iMicClassUI.HomeToolControls.HomeToolBackgroundPanel"
             mc:Ignorable="d" 
             d:DesignHeight="110" 
             d:DesignWidth="180">


    <Grid>
        <Border BorderBrush="White" BorderThickness="0" ClipToBounds="True" SnapsToDevicePixels="True"
                CornerRadius="5" Width="180" Height="110">
            <TabControl x:Name="tabPanel" Style="{StaticResource TabControlStyle2}" SelectionChanged="TabItem_Select">
                <!--顏色選項卡-->
                <TabItem x:Name="TabItemOnlyColor" Header="純色" Cursor="Hand" IsSelected="True" Style="{DynamicResource TabItemStyle3}">
                    <StackPanel Height="80" Width="180">
                        <Line x:Name="LINEONE" Stroke="#FF56C253" X1="18" Y1="0.5" X2="48" Y2="0.5" StrokeThickness="2"/>
                        <WrapPanel  Height="80" ItemHeight="40" ItemWidth="40">
                            <StackPanel  Margin="0,5,0,0" ToolTip="當前顏色">
                                <iMicClassBase:ColorPanel Name="colorPanelCurrent" 
                                                          Color="{Binding CurrentColor ,ElementName=homeToolBackgroundPanel,Mode=TwoWay}" 
                                                          Margin="0,5,0,0" Width="15" Height="15"/>
                                <TextBlock Text="當前" FontSize="12" Foreground="Black" 
                                           VerticalAlignment="Top" HorizontalAlignment="Center"/>
                            </StackPanel>
                            <iMicClassBase:ColorPanel Color="#FF18311B" Margin="2" MouseLeftButtonDown="ColorPanel_MouseLeftButtonDown"/>
                            <iMicClassBase:ColorPanel Color="#FF000000" Margin="2" MouseLeftButtonDown="ColorPanel_MouseLeftButtonDown"/>
                            <iMicClassBase:ColorPanel Color="#FF787878" Margin="2" MouseLeftButtonDown="ColorPanel_MouseLeftButtonDown"/>
                            <iMicClassBase:ColorPanel Color="#FFD1D1D1" Margin="2" MouseLeftButtonDown="ColorPanel_MouseLeftButtonDown"/>
                            <iMicClassBase:ColorPanel Color="#FFFFFFFF" Margin="2" MouseLeftButtonDown="ColorPanel_MouseLeftButtonDown"/>
                            <iMicClassBase:ColorPanel Color="#FF996C33" Margin="2" MouseLeftButtonDown="ColorPanel_MouseLeftButtonDown"/>
                            <iMicClassBase:CustomButton  Name="btnMoreColor" Content="更多" FontSize="14"
                                                         Foreground="#FF56C255" ToolTip="點選獲取更多顏色"
                                                         TextBlock.TextAlignment="Center"
                                                         Padding="1,2,1,1"
                                                         Height="25" Width="40" VerticalAlignment="Center" Click="btnMoreColor_Click"/>
                        </WrapPanel>
                    </StackPanel>
                </TabItem>
                <!--圖片選項卡-->
                <TabItem x:Name="TabItemImage" Header="圖片" Cursor="Hand" Style="{DynamicResource TabItemStyle3}" >
                    <StackPanel Height="80" Width="180">
                        <Line x:Name="LINETWO" Stroke="#FF56C253" X1="73" Y1="0.5" X2="103" Y2="0.5" StrokeThickness="2"/>
                        <WrapPanel Height="44" ItemHeight="42" ItemWidth="42" Margin="6,15,6,10">
                            <iMicClassBase:SelectButton  Name="btnBg1" Margin="2" Tag="1"
                                                         ButtonSelected="SelectButton_ButtonSelected">

                                <iMicClassBase:SelectButton.Background>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg1_nor.png" />
                                </iMicClassBase:SelectButton.Background>
                                <iMicClassBase:SelectButton.BackgroundDefault>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg1_nor.png" />
                                </iMicClassBase:SelectButton.BackgroundDefault>
                                <iMicClassBase:SelectButton.BackgroundInvalid>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg1_nor.png" />
                                </iMicClassBase:SelectButton.BackgroundInvalid>
                                <iMicClassBase:SelectButton.BackgroundOver>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg1_click.png" />
                                </iMicClassBase:SelectButton.BackgroundOver>
                                <iMicClassBase:SelectButton.BackgroundPress>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg1_click.png" />
                                </iMicClassBase:SelectButton.BackgroundPress>
                                <iMicClassBase:SelectButton.BackgroundSelect>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg1_click.png" />
                                </iMicClassBase:SelectButton.BackgroundSelect>
                            </iMicClassBase:SelectButton>
                            <iMicClassBase:SelectButton  Name="btnBg2" Margin="2" Tag="2"
                                                         ButtonSelected="SelectButton_ButtonSelected">
                                <iMicClassBase:SelectButton.Background>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg2_nor.png" />
                                </iMicClassBase:SelectButton.Background>

                                <iMicClassBase:SelectButton.BackgroundDefault>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg2_nor.png" />
                                </iMicClassBase:SelectButton.BackgroundDefault>

                                <iMicClassBase:SelectButton.BackgroundInvalid>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg2_nor.png" />
                                </iMicClassBase:SelectButton.BackgroundInvalid>

                                <iMicClassBase:SelectButton.BackgroundOver>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg2_click.png" />
                                </iMicClassBase:SelectButton.BackgroundOver>

                                <iMicClassBase:SelectButton.BackgroundPress>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg2_click.png" />
                                </iMicClassBase:SelectButton.BackgroundPress>

                                <iMicClassBase:SelectButton.BackgroundSelect>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg2_click.png" />
                                </iMicClassBase:SelectButton.BackgroundSelect>
                            </iMicClassBase:SelectButton>
                            <iMicClassBase:SelectButton  Name="btnBg3" Margin="2" Tag="3"
                                                         ButtonSelected="SelectButton_ButtonSelected">
                                <iMicClassBase:SelectButton.Background>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg3_nor.png" />
                                </iMicClassBase:SelectButton.Background>
                                <iMicClassBase:SelectButton.BackgroundDefault>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg3_nor.png" />
                                </iMicClassBase:SelectButton.BackgroundDefault>
                                <iMicClassBase:SelectButton.BackgroundInvalid>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg3_nor.png" />
                                </iMicClassBase:SelectButton.BackgroundInvalid>
                                <iMicClassBase:SelectButton.BackgroundOver>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg3_click.png" />
                                </iMicClassBase:SelectButton.BackgroundOver>
                                <iMicClassBase:SelectButton.BackgroundPress>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg3_click.png" />
                                </iMicClassBase:SelectButton.BackgroundPress>
                                <iMicClassBase:SelectButton.BackgroundSelect>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg3_click.png" />
                                </iMicClassBase:SelectButton.BackgroundSelect>
                            </iMicClassBase:SelectButton>
                            <iMicClassBase:SelectButton  Name="btnBg4" Margin="2" Tag="4"
                                                         ButtonSelected="SelectButton_ButtonSelected">
                                <iMicClassBase:SelectButton.Background>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg4_nor.png" />
                                </iMicClassBase:SelectButton.Background>
                                <iMicClassBase:SelectButton.BackgroundDefault>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg4_nor.png" />
                                </iMicClassBase:SelectButton.BackgroundDefault>
                                <iMicClassBase:SelectButton.BackgroundInvalid>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg4_nor.png" />
                                </iMicClassBase:SelectButton.BackgroundInvalid>
                                <iMicClassBase:SelectButton.BackgroundOver>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg4_click.png" />
                                </iMicClassBase:SelectButton.BackgroundOver>
                                <iMicClassBase:SelectButton.BackgroundPress>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg4_click.png" />
                                </iMicClassBase:SelectButton.BackgroundPress>
                                <iMicClassBase:SelectButton.BackgroundSelect>
                                    <ImageBrush ImageSource="/iMicClassBase;component/Images/HomeToolControlImages/bgimg4_click.png" />
                                </iMicClassBase:SelectButton.BackgroundSelect>
                            </iMicClassBase:SelectButton>
                        </WrapPanel>
                    </StackPanel>
                </TabItem>
                <!--本地選項卡-->
                <TabItem x:Name="TabItemLocal" Header="本地" Cursor="Hand" Style="{DynamicResource TabItemStyle3}" >
                    <StackPanel Height="80" Width="180">
                        <Line x:Name="LINETHR" Stroke="#FF56C253" X1="128" Y1="0.5" X2="158" Y2="0.5" StrokeThickness="2"/>
                        <iMicClassBase:CustomButton Name="btnAddLoaclImage" Margin="0,18" Content="選擇本地" Padding="8,4,8,4"
                                                    Click="btnAddLoaclImage_Click"  Height="30" Width="80"/>
                    </StackPanel>
                </TabItem>
            </TabControl>

        </Border>
    </Grid>
</UserControl>

  

其實使用者控制元件是我們常用的,沒什麼可說的,在此做個說明,只想保持博文隊形整齊。

自定義控制元件系列博文連結:

WPF自定義控制元件(一)の控制元件分類 
WPF自定義控制元件(二)の重寫原生控制元件樣式模板
WPF自定義控制元件(三)の擴充套件控制元件 
WPF自定義控制元件(四)の自定義控制元件
WPF自定義控制元件(五)の使用者控制元件