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自定义控件（五）の用户控件