如何在WPF中将内部控件的属性暴露给其父UserControl

Question

我有一个 DialogPrompt UserControl，其中将包含一个 Image 和一个 TextBlock。以下是模板：

    <UserControl>   
      <Button x:Name="_OkButton" Content="OK"/>
      <DockPanel >
        <Image/>
        <TextBlock x:Name="_DialogTextBox" />
      </DockPanel>
    </UserControl>

我该如何在自定义控件(UserControl)中暴露(Image的Source属性和TextBlock的Text属性)？

- eYe

Answer 1

我会创建两个DependencyProperties，一个用于Text，另一个用于Image Source。

Image Source DependencyProperty 在更新时会自动设置内部Image控件的源。同样地，Text DependencyProperty 也会设置内部TextBlock控件的Text。

这是设定：

    public partial class MyUserControl : UserControl
    {
        #region ImageSource
        public static readonly DependencyProperty ImageSourceProperty = 
            DependencyProperty.Register
            ( 
                "ImageSource", 
                typeof(Uri),
                typeof(MyUserControl), 
                new FrameworkPropertyMetadata(new PropertyChangedCallback(OnImageSourceChanged))
            );
     
        public Uri ImageSource
        {
            get { return (Uri)GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }
        }
        #endregion ImageSource
    
        #region Text
        public static readonly DependencyProperty TextProperty = 
            DependencyProperty.Register
            ( 
                "Text", 
                typeof(string),
                typeof(MyUserControl), 
                new FrameworkPropertyMetadata("")
            );
     
        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }
        #endregion Text
    
        public MyUserControl()
        {
            InitializeComponent();
        }
    
        private static void OnImageSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            var myUserControl = sender as MyUserControl;
            if (myUserControl != null)
            {
                myUserControl.ImageSource.Source = new BitmapImage((Uri) e.NewValue);
            }
        }
    } 

每当Image Source发生更改时，这会自动更新内部Image控件的源。请注意，我们需要进行一些转换，因为Image控件本身使用ImageSource类型。

XAML然后可以更新为：

       <UserControl x:Name="ControlName">   
          <Button x:Name = "OkButton" Content="OK"/>
          <DockPanel >
            <Image x:Name = "MyImage" />
            <TextBlock x:Name = "DialogTextBox" Text="{Binding ElementName=ControlName, Path=Text}"/>
          </DockPanel>
        </UserControl>

在这里，内部的TextBlock控件只是绑定到父级（主UserControl）的Text DependencyProperty。

- d.moncada

Answer 2

在您的代码后端中，添加2个DependencyProperties，并将它们绑定到您的Image Source和TextBlock Text。

这里有一个关于如何使用和创建Dependency Properties的教程： http://www.wpftutorial.net/dependencyproperties.html 对于您在xaml中的绑定，这里是一个示例：

<Image Source="{Binding YourProperty, RelativeSource={RelativeSource FindAncestor, AncestorType=YourUserControl}}/>

- mgarant

---

+1 对于第一个正确答案，然而@d.moncada的回答更好，因为它包含了更详细的解释（而不仅仅是一个链接）。 - Yann Duran