如何在Expression Blend中访问自定义用户控件的UI元素

时间:2013-12-03 05:12:50

标签: wpf silverlight xaml custom-controls

我是Expression Blend的新手。我想创建一个自定义用户控件,它由一个图像控件组成。我希望能够为自定义控件的每个实例设置不同的图像源。我可以在代码隐藏中执行此操作,但我无法在Expression Blend中直接执行此操作(就像在属性面板中可以对图像控件执行的操作一样)。自定义控件内的图像控件无法在可视树中访问。如果我更改自定义控件xaml中的图像源,它将应用于所有实例。

例如,在此窗口可视化树中,自定义用户控件仅显示为一个项目,我无法访问其中的图像控件。

Project Visual Tree

所以我想知道是否可以在Expression Blend中配置自定义用户控件的UI元素?如果是这样,怎么样?

我问的原因是因为我正在使用Silverlight for Embedded。所以xaml和代码隐藏在不同的项目中。是否可以这样做会对我放置图像资源的位置产生影响。

谢谢!

1 个答案:

答案 0 :(得分:0)

public partial class UserControl1 : UserControl
    {

        public ImageSource MyImage
        {
            get { return (ImageSource)GetValue(MyImageProperty); }
            set { SetValue(MyImageProperty, value); }
        }

        public static readonly DependencyProperty MyImageProperty =
            DependencyProperty.Register("MyImage", typeof(ImageSource), typeof(UserControl1));


        public UserControl1()
        {

            InitializeComponent();            
        }
    }

在XAML上

<UserControl x:Class="WpfApplication1.UserControl1"
             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" 
             xmlns:me="clr-namespace:WpfApplication1"
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Image Source="{Binding MyImage, RelativeSource={RelativeSource 
            Mode=FindAncestor, AncestorType={x:Type me:UserControl1}}}" />
    </Grid>
</UserControl>

现在您的用户控件具有MyImage属性。从Expression Blend

将图像设置为此属性

在银光上

<Grid>
            <Image Source="{Binding MyImage}" name="MYIMG" />
        </Grid>

中的代码

public UserControl1()
            {

                InitializeComponent();   
                MYIMG.DataContext = this;// THIS IS IMPORTANT;         
            }