WPF自定義控件建立

WPF自定義控件建立

本文簡單的介紹一下WPF自定義控件的開發。

首先，咱們打開VisualStudio建立一個WPF自定義控件庫，以下圖：

而後，咱們能夠看到建立的解決方案以下：

在解決方案中，咱們看到了一個Themes文件夾和一個CS文件。

其中CS文件，就是咱們須要編寫的自定義控件，裏面的類繼承了Control類；而Themes則存放該控件的樣式。即，WPF自定義控件，是經過樣式給咱們的編輯的控件類披上外衣而造成的。

下面，咱們來編寫一個簡單的時間控件。

咱們先將CustomControl1文件更名爲KibaDateTime，而後打開KibaDateTime.cs文件，看到了一些控件應用提示，這些提示寫的是自定義控件的應用方式，咱們先不看這些提示，由於他寫的不是很好理解。

接下來咱們開始編寫時間控件，修改KibaDateTime類以下：

public class KibaDateTime : TextBox
    {
        private static Regex regex = new Regex("[0-9]+");
        #region 小時
        public static readonly DependencyProperty HourProperty = DependencyProperty.Register(
             "Hour", typeof(int), typeof(KibaDateTime), new FrameworkPropertyMetadata(00));
       
        public int Hour
        {
            get
            {
                return (int)GetValue(HourProperty);
            }
            set
            {
                SetValue(HourProperty, value);
            }
        } 
        #endregion
        #region 分鐘
        public static readonly DependencyProperty MinuteProperty = DependencyProperty.Register(
             "Minute", typeof(int), typeof(KibaDateTime), new FrameworkPropertyMetadata(00));
        
        public int Minute
        {
            get
            {
                return (int)GetValue(MinuteProperty);
            }
            set
            {
                SetValue(MinuteProperty, value);
            }
        }
        #endregion
        #region 秒
        public static readonly DependencyProperty SecondProperty = DependencyProperty.Register(
             "Second", typeof(int), typeof(KibaDateTime), new FrameworkPropertyMetadata(00)); 
        public int Second
        {
            get
            {
                return (int)GetValue(SecondProperty);
            }
            set
            {
                SetValue(SecondProperty, value);
            }
        }
        #endregion
        static KibaDateTime()
        {
            //當此依賴項屬性位於指定類型的實例上時爲其指定替換元數據，以在該依賴項屬性繼承自基類型時重寫該屬性已存在的元數據。
            DefaultStyleKeyProperty.OverrideMetadata(typeof(KibaDateTime), new FrameworkPropertyMetadata(typeof(KibaDateTime))); 
        }
    }

如上述代碼所示，咱們修改了KibaDateTime繼承的類；將Control改成了TextBox。

這樣，咱們就能夠在KibaDateTime控件的樣式中，用使用TextBox的屬性，進行綁定了。

而後，咱們在控件類裏定義三個依賴屬性，小時、分鐘、秒；以後，咱們會把這個三個屬性，綁定到樣式中。

如今咱們打開Theme文件下的Generic.xaml文件，看到樣式代碼以下：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:KibaCustomControl">
    <Style TargetType="{x:Type local:KibaDateTime}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:KibaDateTime}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style> 
</ResourceDictionary>

從代碼中能夠看到，系統已經爲咱們定義好了KibaDateTime控件的外殼樣式。

咱們須要作的就是將樣式內容添加進去。

咱們在Border中，添加TextBox，而後進行小時、分鐘、秒的綁定，這裏要用Binding來綁定。

添加的TextBox代碼以下，咱們進行了一些簡單寬高和間距設置。

<TextBox Text="{Binding Hour,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent},UpdateSourceTrigger=PropertyChanged}" Width="24" Height="24" Padding="2,3,0,0" FontSize="12" ></TextBox>
<TextBox Text="{Binding Minute,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent},UpdateSourceTrigger=PropertyChanged}" Width="24" Height="24" Padding="2,3,0,0" FontSize="12" ></TextBox>
<TextBox Text="{Binding Second,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent},UpdateSourceTrigger=PropertyChanged}" Width="24" Height="24" Padding="2,3,0,0" FontSize="12" ></TextBox>

上述代碼使用了【RelativeSource={RelativeSource TemplatedParent}】來尋找綁定源，注意，這裏必定要用TemplatedParent，否則沒法綁定到咱們控件類。

自定義控件到此爲止，就已經定義好了。而後咱們使用下剛剛定義好的控件。

WPF自定義控件應用

首先建立一個WPF項目，而後引用KibaCustomControl這個程序集。以下圖：

而後，在MainWindow.xaml頁面中，使用該控件。

修改MainWindow.xaml頁面代碼以下：

<Window x:Class="KibaTestControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:c="clr-namespace:KibaCustomControl;assembly=KibaCustomControl"
        xmlns:local="clr-namespace:KibaTestControl"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <StackPanel VerticalAlignment="Top" Margin="10" Orientation="Horizontal">
            <c:KibaDateTime Name="dtHour"></c:KibaDateTime> 
            <Button Content="查看時間" Click="Button_Click" Width="75"/>
        </StackPanel>
    </DockPanel>
</Window>

其中【xmlns:c="clr-namespace:KibaCustomControl;assembly=KibaCustomControl"】這句話是將咱們自定義的程序集內的控件，引入到當前頁。

【<c:KibaDateTime Text="00" ></c:KibaDateTime>】這句話就是咱們自定義控件的應用了。

應用界面以下圖所示：

其中查看時間的事件代碼以下：

private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("小時："+dtHour.Hour+":"+dtHour.Minute + ":" + dtHour.Second);
}

修改時間，點擊查看時間，獲得結果以下：

到此，這個簡單的WPF控件，就開發完了。

----------------------------------------------------------------------------------------------------

代碼已經傳到Github上了，歡迎你們下載。

Github地址：https://github.com/kiba518/KibaWpfCustomControl

----------------------------------------------------------------------------------------------------

注：此文章爲原創，歡迎轉載，請在文章頁面明顯位置給出此文連接！
若您以爲這篇文章還不錯，請點擊下右下角的【推薦】，很是感謝！