WPF中UserControl的屬性和事件

       WPF中自定義控件有兩種，一種是繼承自control的自定義控件，另一種是繼承自UserControl的用戶控件。用戶控件可以認為是一系列原生控件的集合。本文主要介紹如何創建一個用戶控件，以及用戶控件的自定義屬性和事件。

 一、創建一個用戶控件

         1、一種是直接創建用戶控件工程，這樣會生成DLL，使用時調用DLL

 

 

        2、在當前工程中直接創建

 

     

        創建之后會生成一個xaml文件和cs文件，如下圖

        

       建議使用第二種方法，這樣其他人在使用或修改該控件時溯源比較容易。

二、添加自定義屬性

       1、首先在xaml文件中添加需要的原生控件，如下：

<Grid>
        <Grid.Background>
            <ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/man_bg.png"/>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="1.6*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="1" >
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock x:Name="txtName" Grid.Row="0" Style="{StaticResource TextBlockStyleSmall}" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type local:CustomInfoControl}},Path=CustomName}"></TextBlock>
            <TextBox x:Name="txtCardID" Grid.Row="1" Style="{StaticResource TextBoxStyle}"  Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type local:CustomInfoControl}},Path=CardID}"></TextBox>
        </Grid>
        <Grid Grid.Column="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="3*"/>
            </Grid.RowDefinitions>
            <Image x:Name="imageDelete" Grid.Row="0" Grid.Column="1" 
                   Source="pack://siteoforigin:,,,/Resources/deleteSign.png"
                   MouseDown="btnDelete"></Image>
            <TextBlock x:Name="txtSeatNo" Grid.Row="1" Grid.Column="0" Style="{StaticResource TextBlockStyleBig}"  Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type local:CustomInfoControl}},Path=SeatNo}"></TextBlock>
        </Grid>
    </Grid>

       此例中添加了一個兩個TextBlock，一個TextBox,一個 Image.

       Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type local:CustomInfoControl}},Path=CardID}"對應第二步中的依賴屬性，此句一定要加，否則無法將屬性值綁定到控件上。

       2、在對應的后台代碼中添加依賴屬性

//定義依賴項屬性
        public static readonly DependencyProperty CustomNameProperty =
            DependencyProperty.Register("CustomName", typeof(string), typeof(CustomInfoControl), new PropertyMetadata(""));
        public static readonly DependencyProperty CardIDProperty =
            DependencyProperty.Register("CardID", typeof(string), typeof(CustomInfoControl), new PropertyMetadata(""));
        public static readonly DependencyProperty SeatNoProperty =
            DependencyProperty.Register("SeatNo", typeof(string), typeof(CustomInfoControl), new PropertyMetadata(""));

        //聲明屬性        
        /// <summary>
        /// 旅客姓名.
        /// </summary>
        /// <value>
        /// The name of the custom.
        /// </value>
        public string CustomName
        {
            get { return (string)GetValue(CustomNameProperty); }
            set { SetValue(CustomNameProperty, value); }
        }

        /// <summary>
        /// 旅客卡號.
        /// </summary>
        /// <value>
        /// The card identifier.
        /// </value>
        public string CardID
        {
            get { return (string)GetValue(CardIDProperty); }
            set { SetValue(CardIDProperty, value); }
        }

        /// <summary>
        /// 座位號.
        /// </summary>
        /// <value>
        /// The seat no.
        /// </value>
        public string SeatNo
        {
            get { return (string)GetValue(SeatNoProperty); }
            set { SetValue(SeatNoProperty, value); }
        }

 三、添加自定義事件

       1、添加自定義事件DeleteInfo

/// <summary>
        /// The delete event
        /// </summary>
        public static readonly RoutedEvent deleteEvent =
             EventManager.RegisterRoutedEvent("DeleteInfo", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(CustomInfoControl));

        /// <summary>
        /// 刪除該控件的操作.
        /// </summary>
        public event RoutedEventHandler DeleteInfo
        {
            add
            {
                AddHandler(deleteEvent, value);
            }

            remove
            {
                RemoveHandler(deleteEvent, value);
            }
        }

       2、在UserControl中添加自定義事件的調用點，本例中點擊叉號圖片時，觸發該自定義事件。

 

/// <summary>
        /// 點擊刪除按鈕時的事件.
        /// </summary>
        /// <param name="sender">The sender.</param>
        /// <param name="e">The <see cref="MouseButtonEventArgs"/> instance containing the event data.</param>
        public void btnDelete(object sender, MouseButtonEventArgs e)
        {
            RoutedEventArgs args = new RoutedEventArgs(deleteEvent, this);
            RaiseEvent(args);
        }

 四、使用控件

        1、使用控件時，先在xaml中添加調用。 xmlns:usercontrols="clr-namespace:Client.UserControls.CustomInfoControl"

        2、自定義屬性使用方法如下：

<usercontrols:CustomInfoControl x:Name="customInfoControl" CustomName="張三" CardID="12345"  SeatNo="12A"></usercontrols:CustomInfoControl>

或者在后台代碼中添加customInfoControl.CustomName = "張三"

       3、可以給自定義事件添加操作

        customInfoControl.DeleteInfo += new RoutedEventHandler(DeleteCustomInfo);

 public void DeleteCustomInfo(object sender, RoutedEventArgs e)
        {
                //TODO，請添加自定義操作
        }

至此，該控件已經可以使用。