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，请添加自定义操作
        }

至此，该控件已经可以使用。