原文:
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自定义控件(五)の用户控件