WPF自定義控件的製做

  由於有時候須要定製化的控件,須要多個控件的組合及複雜功能的集成,這樣能夠考慮自定義用戶控件。下面分享一個簡單的數值增減功能的自定義控件做爲說明。express

效果圖以下:this

 

一、建立自定義用戶控件(添加->新建項->用戶控件)spa

 

二、編寫XAML線程

<UserControl x:Class="XXX.自定義控件.MyNumericUpDown"
             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:XXX.自定義控件"
             mc:Ignorable="d" 
             d:DesignHeight="30" d:DesignWidth="120">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="40*"/>
            <ColumnDefinition Width="40*"/>
        </Grid.ColumnDefinitions>

        <TextBox Name="TextBox_Num" Grid.Column="0" Text="1" FontSize="20" TextAlignment="Center" MinWidth="40" VerticalContentAlignment="Center"/>
        <Button Name="Button_Add" Grid.Column="1" Content="" Click="Button_Add_Click" Background="Aqua"/>
        <Button Name="Button_Sub" Grid.Column="2" Content="" Click="Button_Sub_Click" Background="Aqua"/>
        
    </Grid>
</UserControl>

UI比較簡單,我就不解釋了...code

 

二、編寫後臺代碼orm

 /// <summary>
    /// MyNumericUpDown.xaml 的交互邏輯
    /// </summary>
    public partial class MyNumericUpDown : UserControl
    {

        /// <summary>
        /// 當前值
        /// </summary>
        public int Num
        {
            get
            {
                int value = 0;
                this.Dispatcher.Invoke(new Action(() =>
                    value = Convert.ToInt32(this.TextBox_Num.Text.Trim())
                ));
                return value;
            }
            set
            {
                this.Dispatcher.Invoke(new Action(() =>
                {
                    this.TextBox_Num.Text = value.ToString();
                }));                
            }
        }

        public MyNumericUpDown()
        {
            InitializeComponent();
        }
        
        private void Button_Add_Click(object sender, RoutedEventArgs e)
        {
            int num = int.Parse(this.TextBox_Num.Text.Trim());
            if (num > 0)
            {
                this.TextBox_Num.Text = (num + 1).ToString();
            }
        }

        private void Button_Sub_Click(object sender, RoutedEventArgs e)
        {
            int num = int.Parse(this.TextBox_Num.Text.Trim());
            if (num > 0)
            {
                if ((num - 1) == 0)
                    return;
                this.TextBox_Num.Text = (num - 1).ToString();
            }
        }
    }

邏輯也比較簡單,兩個按鍵的點擊事件,每次加一或減一。值得說明的是公開的屬性(該例只有一個公開屬性就是控件的數值Num),屬性須要進行讀寫器的包裝,讀取器和設置器操做控件TextBox時最好須要Invoke回調UI線程進行操做,不然其餘線程操做時就會報錯(固然也能夠在外部Invoke)。xml

 

三、控件調用blog

用戶控件繼承UserControl,UserControl繼承於ContentControl,因此能夠和通常控件同樣調用,可是因爲命名空間不一致,須要聲明命名空間。繼承

xmlns:z="clr-namespace:XXX.自定義控件"  //Windows標籤中聲明命名空間
<z:MyNumericUpDown x:Name="MyNumericUpDown_PageNum" Width="120" Height="30"></z:MyNumericUpDown>

 

其實最好能夠把對外須要進行數據綁定的屬性寫成依賴項屬性,這樣就能擁有依賴項屬性的特色(如綁定),不過比較複雜,下次再具體說明。事件

相關文章
相關標籤/搜索