Silverlight 用户控件中的自定义依赖项属性与控件绑定的几种方法
在创建用户控件时,我们难免会创建依赖项属性,这样有利于用户控件的灵活性,例如:我写了一个控件MenuButton,这个MenuButton就是为Button写了一个模板,Image用来显示图片,ContentPresenter用来显示文本。我们肯定不是在用户控件中将图片和文字预先设置好,而是通过用户控件属性来设置,在这里说一些额外的话,建议用依赖项属性,因为依赖项属性支持例如:设计器集成、Binding、动画、样式、动态资源等,而属性则不支持的。看以下MenuButton.xaml代码片段:
<UserControl 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:local="clr-namespace:SL.Application" mc:Ignorable="d" x:Class="SL.Application.MenuButton"> <UserControl.Resources> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Rectangle x:Name="rectangle" Fill="#FFCCCCD6" Height="41" RadiusX="8" RadiusY="8" Stroke="#FF5A5353"/> <StackPanel Orientation="Horizontal"> <Image HorizontalAlignment="Center" Height="32" Margin="10,0,0,0" Source="{Binding Source}" Stretch="Fill" Width="32" VerticalAlignment="Center"/> <ContentPresenter VerticalAlignment="Center" Width="22" Margin="10,0" Content="{Binding Text}"/> </StackPanel> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot"> <Button Style="{StaticResource ButtonStyle}"/> </Grid> </UserControl>
using System; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SL.Application { public partial class MenuButton : UserControl { public MenuButton() { // 为初始化变量所必需 InitializeComponent(); } public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(ImageSource), typeof(MenuButton), new PropertyMetadata(default(ImageSource))); public ImageSource Source { get { return (ImageSource)GetValue(SourceProperty); } set { SetValue(SourceProperty, value); } } public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(MenuButton), new PropertyMetadata(default(string))); public string Text { get { return (string)GetValue(TextProperty); } set { SetValue(TextProperty, value); } } } }
该准备的咱们也准备好了,现在进入主题,如何将自定义的依赖项属性Source绑定到Image,Text绑定到Content上?在这里在啰唆一句,以下每种方法修改的代码都是以上面所指出的代码为根本,就是在开始每种方法前请将代码还原成以上代码。
第一种方法:在XAML中为UserControl指定x:Name值,Binding通过ElementName进行绑定。
好吧,如上所说,我们为UserControl指定x:Name值,如下(改动的代码是红色的):
MenuButton.xaml文件:
<UserControl
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:local="clr-namespace:SL.Application"
mc:Ignorable="d"
x:Class="SL.Application.MenuButton" x:Name="UserControl_MenuButton">
MenuButton.xaml文件:
<Image HorizontalAlignment="Center" Height="32" Margin="10,0,0,0" Source="{Binding ElementName=UserControl_MenuButton, Path=Source}" Stretch="Fill" Width="32" VerticalAlignment="Center"/> <ContentPresenter VerticalAlignment="Center" Width="22" Margin="10,0" Content="{Binding ElementName=UserControl_MenuButton, Path=Text}"/>
第二种方法:在MenuButton.xaml.cs中的MenuButton实例构造器中将this.DataContext=this;这样,其实和上一种实现的方式差不多,不过这样不用为UserControl指定x:Name值,也不会出现上面所提到的神马已经定义UserControl_MenuButton异常。看下面代码(改动的代码是红色的):
MenuButton.xaml.cs文件
public MenuButton()
{
// 为初始化变量所必需
InitializeComponent();
this.DataContext = this;
}
第三种方法:在XAML中设置UserControl的DataContext绑定自身。请看一下代码(改动的代码是红色的):
MenuButton.xaml文件:
<UserControl
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:local="clr-namespace:SL.Application"
mc:Ignorable="d"
x:Class="SL.Application.MenuButton" DataContext="{Binding RelativeSource={RelativeSource Self}}">
其实还有其他方法,例如可以在依赖项属性元数据更改回调中给Image和ContentPresenter赋值(这种好麻烦⊙﹏⊙b)等。哎呦,好像我要讲的话都讲完了,讲完了,讲完,完。