UserControl具有传播到内部控件的绑定

时间:2012-07-04 16:24:22

标签: c# wpf mvvm wpf-controls

这可能不是一个火箭科学问题,所以请原谅我成为新人! 我有一个用于设置人名的UserControl(出于测试目的而简单)。

PersonNameControl.xaml:

<UserControl x:Class="BindingPropagationTest.Controls.PersonNameControl"
             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" Width="120" Height="23" Margin="0,0,0,0"
             >
    <TextBox Name="TextBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</UserControl>

正如您所看到的,它包含一个TextBox,它是“真正的”文本框。背后的代码看起来像这样。

PersonNameControl.xaml.cs:

using System.Windows.Controls;
using System.Windows;
using System.Diagnostics;

namespace BindingPropagationTest.Controls
{
    public partial class PersonNameControl : UserControl
    {
        public static DependencyProperty nameProperty
            = DependencyProperty.Register("PersonName", typeof(string), typeof(PersonNameControl));

        public string PersonName
        {
            get
            {
                Debug.WriteLine("get PersonNameControl.PersonName = " + TextBox.Text);
                return TextBox.Text;
            }

            set
            {
                Debug.WriteLine("set PersonNameControl.PersonName = " + value);
                TextBox.Text = value;
            }
        }

        public PersonNameControl()
        {
            InitializeComponent();
        }
    }
}

我在MainWindow.xaml中使用usercontrol:

<Window x:Class="BindingPropagationTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:BindingPropagationTest.Controls"
        xmlns:items="clr-namespace:BindingPropagationTest.ComboBoxItems"
        Title="Testing binding in UserControl"
        Width="179" Height="310">
  <Canvas Height="241" Width="144">

        <Label Canvas.Left="11" Canvas.Top="10" Content="Name" Height="28" Padding="0" />
        <my:PersonNameControl x:Name="nameControl"
                Width="120" Height="23"
                HorizontalAlignment="Left" VerticalAlignment="Top"
                PersonName="{Binding name}"
                Canvas.Left="11" Canvas.Top="28" />

        <Label Canvas.Left="11" Canvas.Top="57" Content="Address" Height="28" Padding="0" />
        <TextBox Canvas.Left="11" Canvas.Top="75" Width="120" Text="{Binding address}"></TextBox>

        <Label Canvas.Left="11" Canvas.Top="103" Content="Age" Height="28" Padding="0" />
        <TextBox Canvas.Left="11" Canvas.Top="122" Height="23" Name="textBox1" Width="120" Text="{Binding age}" />

        <ComboBox Canvas.Left="11" Canvas.Top="173" Height="23"
                Name="comboBox1" Width="120" SelectionChanged="comboBox1_SelectionChanged">
            <items:PersonComboBoxItem age="41" name="Donald Knuth" address="18 Donut Street" Height="23" />
            <items:PersonComboBoxItem age="23" name="Vladimir Putin" address="15 Foo Street" Height="23" />
            <items:PersonComboBoxItem age="32" name="Mike Hammer" address="10 Downing Street" Height="23" />
        </ComboBox>
    </Canvas>
</Window>

和你可以看到的一些普通的TextBox一起。

在MainWindow背后的代码中

MainWindow.xaml.cs:

using System.Windows;
using System.Windows.Controls;
using BindingPropagationTest.ComboBoxItems;

namespace BindingPropagationTest
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new Person();
        }

        private void comboBox1_SelectionChanged
            (object sender, SelectionChangedEventArgs e)
        {
            updateForm();
        }

        private void updateForm()
        {
            var item = (PersonComboBoxItem)comboBox1.SelectedItem;

            DataContext = new Person()
            { age = item.age, name = item.name, address = item.address };           
        }
    }
}

您看到我将DataContext设置为“person”。

Person.cs:

namespace BindingPropagationTest
{
    public class Person
    {
        public string name {get; set; }
        public int age { get; set; }
        public string address { get; set; }
    }
}

正如您所注意到我发明了一个像这样的自己的ComboBoxItem。 PersonComboBoxItem.cs:

using System.Windows.Controls;
using System.Diagnostics;

namespace BindingPropagationTest.ComboBoxItems
{
    public class PersonComboBoxItem : ComboBoxItem
    {
        private string _name = "";
        public string name
        {
            get
            {
                return _name;
            }
            set
            {
                _name = value;
                Content = _name;
            }
        }

        public int age { get; set; }
        public string address { get; set; }

        public override string ToString()
        {
            Debug.WriteLine("name: " + name);
            return name;
        }
    }
}

运行此应用程序会为您提供以下窗口:

enter image description here

选择一个组合框项目可以为您提供:

enter image description here

如您所见,该名称将不会被填写。 为什么不呢?

1 个答案:

答案 0 :(得分:2)

你几乎就在那里,需要改变一些事情

使用依赖属性,如

    public static DependencyProperty NameProperty = DependencyProperty.Register(
    "Name",
    typeof(string),
    typeof(PersonNameControl));

    public string Name
    {
        get
        {
            return (string)GetValue(NameProperty);
        }
        set
        {
            SetValue(NameProperty, value);
        }
    }

依赖属性需要非常严格的约定。如果属性名为Name,则必须将其命名为“NameProperty”。此外,该属性只是设置并获取依赖属性。

您可以将文本框绑定到usercontrol中的属性,如

<UserControl x:Class="BindingPropagationTest.Controls.PersonNameControl"
         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" 
         x:Name="UserControl"
         mc:Ignorable="d" Width="120" Height="23" Margin="0,0,0,0"
         >
    <TextBox Text="{Binding ElementName=UserControl, Path=Name}" Name="TextBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</UserControl>

我在顶部添加了x:Name =“UserControl”指令,您可以将其命名为任何内容,只要它与Binding中的ElementName匹配

关于如何填充comboBox的额外说明

您可以在MainWindow上添加属性

    private ObservableCollection<Person> _thePeople;
    public ObservableCollection<Person> ThePeople
    {
        get
        {
            if (_thePeople == null)
            {
                List<Person> list = new List<Person>()
                {
                    new Person() { name = "Bob" , address = "101 Main St." , age = 1000 },
                    new Person() { name = "Jim" , address = "101 Main St." , age = 1000 },
                    new Person() { name = "Mip" , address = "101 Main St." , age = 1000 },
                };
                _thePeople = new ObservableCollection<Person>(list);
            }
            return _thePeople;
        }
    }

然后你可以在你的主窗口中添加usercontrol上使用的x:Name指令说

x:Name="TheMainWindow"

然后您可以在组合框中使用datatemplate,如下所示

    <ComboBox ItemsSource="{Binding ElementName=TheMainWindow, Path=ThePeople}"
          Height="23"
          Name="comboBox1" Width="120" >
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding name}" />
                    <TextBlock Text="{Binding address}" />
                    <TextBlock Text="{Binding age}" />
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

因为在代码隐藏中使用了ObservableCollection,只要代码隐藏添加或删除“ThePeople”集合中的项目,组合框就会自动添加或删除项目。只需致电

ThePeople.Add(new Person());

并且组合框将自动填充新条目