WPF自定義控制元件(五)の使用者控制元件(完結)
阿新 • • 發佈:2018-11-11
原文:
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自定義控制元件(五)の使用者控制元件