WPF 用户控件

         WPF中的用户控件一般结合依赖属性使用,从而让用户在使用控件的时候可以给控件的属性自由赋值,下面就用一个简单的自定义按钮实例来说明其用法。

1、新建项目,选择"WPF用户控件库"。

2、定义一个按钮类,新建三个依赖属性:ImageSourceNormal、ImageSourceMouseOver、ImageSourcePress,分别描述按钮在正常状态、鼠标经过、鼠标按下时显示的图片。

namespace MyControl
{
    /// <summary>
    /// 自定义按钮的分部类
    /// </summary>
    partial class UserButton : UserControl
    {
        #region 正常状态下显示的背景图片
        public ImageSource ImageSourceNormal
        {
            get { return (ImageSource)GetValue(ImageSourceNormalProperty); }
            set { SetValue(ImageSourceNormalProperty, value); }
        }

        public static readonly DependencyProperty ImageSourceNormalProperty =
            DependencyProperty.Register("ImageSourceNormal", typeof(ImageSource), typeof(UserButton), 
            new PropertyMetadata(new BitmapImage(new Uri("pack://application:,,,/MyControl;component/Images/1.bmp"))));
        #endregion

        #region 鼠标经过时显示的背景图片
        public ImageSource ImageSourceMouseOver
        {
            get { return (ImageSource)GetValue(ImageSourceMouseOverProperty); }
            set { SetValue(ImageSourceMouseOverProperty, value); }
        }

        public static readonly DependencyProperty ImageSourceMouseOverProperty =
            DependencyProperty.Register("ImageSourceMouseOver", typeof(ImageSource), typeof(UserButton), 
            new PropertyMetadata(new BitmapImage(new Uri("pack://application:,,,/MyControl;component/Images/2.bmp"))));
        #endregion

        #region 鼠标按下时显示的背景图片
        public ImageSource ImageSourcePress
        {
            get { return (ImageSource)GetValue(ImageSourcePressProperty); }
            set { SetValue(ImageSourcePressProperty, value); }
        }

        public static readonly DependencyProperty ImageSourcePressProperty =
            DependencyProperty.Register("ImageSourcePress", typeof(ImageSource), typeof(UserButton), 
            new PropertyMetadata(new BitmapImage(new Uri("pack://application:,,,/MyControl;component/Images/3.bmp"))));
        #endregion
    }
}


3、在xaml文件里定义按钮的模板样式

<UserControl x:Class="MyControl.UserButton"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="23" Width="72">
    <Grid>
        <Button Width="72" Height="23">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="border" BorderBrush="Blue" BorderThickness="1" CornerRadius="3,3,3,3">
                        <Border.Background>
                            <ImageBrush ImageSource="{Binding ImageSourceNormal}"></ImageBrush>
                        </Border.Background>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="Background">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding ImageSourceMouseOver}"></ImageBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="border" Property="Background">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding ImageSourcePress}"></ImageBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</UserControl>


4、在cs文件里定义上下文

namespace MyControl
{
    /// <summary>
    /// UserButton.xaml 的交互逻辑
    /// </summary>
    public partial class UserButton : UserControl
    {
        public UserButton()
        {
            InitializeComponent();

            this.DataContext = this;
        }
    }
}

5、编译用户控件库,生成MyControl.dll。

6、新建项目,选择"WPF 应用程序"。

7、在xaml中引用MyControl命名空间,注意得在引用命名空间的字符串里加上程序集的名称

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="clr-namespace:MyControl;assembly=MyControl"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <mc:UserButton Margin="222,112,223,181"></mc:UserButton>
        <mc:UserButton ImageSourceNormal=".\Images\10.bmp"
                       ImageSourceMouseOver=".\Images\11.bmp"
                       ImageSourcePress=".\Images\12.bmp"
                       Margin="222,189,223,102"></mc:UserButton>
    </Grid>
</Window>

8、运行程序,就可以看到两个用户控件的效果,第一个显示的默认属性,第二个显示的是指定的属性。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值