Question

我尝试将简单的拾色器构建为WPF UserControl，但我无法将所选颜色恢复到主窗口。

我的主窗口XAML看起来像这样：

<Window x:Class="ColorPicker.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:view="clr-namespace:ColorPicker"
        Title="TestWindow" SizeToContent="WidthAndHeight">
    <StackPanel Orientation="Horizontal">
        <Rectangle Fill="{Binding MyColor}" Margin="10,10,10,10" Width="100" Height="300"/>
        <view:WPFColorPicker SelectedColor="{Binding MyColor, Mode=TwoWay}" Width="200" Height="300"/>
    </StackPanel>
</Window>

以及视图模型和代码隐藏：

namespace ColorPicker
{
    public class TestViewModel
    {
        public TestViewModel()
        {
            MyColor = new SolidColorBrush(Color.FromRgb(255, 0, 0));
        }

        public Brush MyColor { get; set; }
    }

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new TestViewModel();
        }
    }
}

WPFColorPicker usercontrol XAML是：

<UserControl x:Class="ColorPicker.WPFColorPicker"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel>
        <Rectangle x:Name="rtlfill" Fill="{Binding SelectedColor}" HorizontalAlignment="Stretch" Height="60" Margin="10,10,10,10" Stroke="Black" VerticalAlignment="Top"/>
        <ListBox HorizontalAlignment="Stretch" SelectedValue="{Binding SelectedColor}" VerticalAlignment="Stretch" Margin="0,0,0,81" ScrollViewer.HorizontalScrollBarVisibility="Disabled" x:Name="colorList">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Rectangle Fill="{Binding .}" Margin="0,0,0,5" Width="20" Height="20" Stroke="#FF211E1E" OpacityMask="Black" StrokeThickness="1" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</UserControl>

和代码隐藏：

namespace ColorPicker
{
    public partial class WPFColorPicker : UserControl
    {
        List<Brush> brushList;

        public WPFColorPicker()
        {
            InitializeComponent();

            brushList = new List<Brush>() {
                new SolidColorBrush(Color.FromRgb(255,  0,  0)),
                new SolidColorBrush(Color.FromRgb(  0,255,  0)),
                new SolidColorBrush(Color.FromRgb(  0,  0,255))};

            this.colorList.ItemsSource = brushList;
            DataContext = this;
        }

        public static readonly DependencyProperty SelectedColorProperty = DependencyProperty.Register("SelectedColor",
            typeof(Brush),
            typeof(WPFColorPicker),
            new FrameworkPropertyMetadata(new SolidColorBrush(Colors.Red), 
            FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

        public Brush SelectedColor
        {
            get { return (Brush)GetValue(SelectedColorProperty); }
            set { SetValue(SelectedColorProperty, value); }
        }
    }
}

所以，我遇到的问题是对SelectedColor的绑定（使用TestViewModel中的MyColor）并不起作用。

通过查看StackOverflow和各种教程的其他问题，我认为UserControl设置正确，可以将SelectedColor绑定为TwoWay DependencyProperty，但它不起作用。

有人能为我提供一些见解吗？

Answer 1

每个FrameworkElement只能有一个DataContext，所以当你做

时

DataContext = this;

在UserControl构造函数中，您覆盖DataContext通常通过可视树继承，并影响WPFColorPicker和所有子项的默认绑定上下文，包括

<view:WPFColorPicker SelectedColor="{Binding MyColor, Mode=TwoWay}" .../>

从WPFColorPicker构造函数中删除该行，而是为UserControl提供一些名称

<UserControl x:Class="ColorPicker.WPFColorPicker" ... x:Name="myUserControl">

并更改UserControl内的绑定以使用该名称

<Rectangle ... Fill="{Binding ElementName=myUserControl, Path=SelectedColor}"/>
<ListBox ... SelectedValue="{Binding ElementName=myUserControl, Path=SelectedColor}">

修改

作为旁注，您需要注意Brush是通过引用进行比较的，因此ListBox.SelectedValue不会预先选择值，除非它是来自brushList的实例之一，这是不可能的你每次都创建列表。基本上两个不同的SolidColorBrush实例，即使具有相同的Color，对于相等性检查也是不同的

Answer 2

假设您的Window的DataContext设置为您的ViewModel。

您的颜色选择器是UserControl，因此具有以下绑定：

SelectedColor="{Binding MyColor, Mode=TwoWay}"

尝试在UserControl的DataContext中找到MyColor，而不是父窗口。

您可以为窗口指定名称并使用ElementName绑定：

SelectedColor="{Binding DataContext.MyColor, ElementName=windowName, Mode=TwoWay}"

甚至更好，使用相对源绑定：

SelectedColor="{Binding DataContext.MyColor, RelativeSource={RelativeSource AncestorType={x:Type Window}}, Mode=TwoWay}"

WPF UserControl上的TwoWay绑定

2 个答案: