无法将UserControl颜色属性绑定到ToggleButton背景

Question

我不明白...我制作了一个简单的UserControl，由togglebutton组成，用于打开包含CustomControl（一个颜色选择器）的弹出窗口。

仅当我为切换背景色写入颜色名称时才能打开/关闭弹出窗口。

但是，如果我尝试绑定UserControl Color属性，在弹出窗口关闭时查看所选颜色，则切换按钮不会显示，并且根本不工作。

我必须somwhere缺少细节，因为我认为这是如此简单：

<ToggleButton 
    x:Name="OpenColorPicker" 
    Style="{DynamicResource ToggleColorPickerStyle}" 
    Background="{Binding DataContext.SelectedColor, ElementName=ColorPickerWidget, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
    /> 

遗憾的是没有..

以下是完整的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" 
mc:Ignorable="d" 
x:Class="CMiX.ColorSelector" 
xmlns:colorPicker="clr-namespace:ColorPicker;assembly=ColorPicker" 
xmlns:local="clr-namespace:CMiX" 
Height="Auto" Width="Auto" d:DesignWidth="44.533" d:DesignHeight="24.933" 
x:Name="ColorPickerWidget"> 

<UserControl.Resources> 
    <SolidColorBrush x:Key="BaseDarkColor" Color="#FF323232"/> 
    <local:ColorToBrushConverter x:Key="ColorToBrush"/> 
    <Style x:Key="ToggleColorPickerStyle" TargetType="{x:Type ToggleButton}"> 
     <Setter Property="FocusVisualStyle"> 
      <Setter.Value> 
       <Style> 
        <Setter Property="Control.Template"> 
         <Setter.Value> 
          <ControlTemplate> 
           <Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Background" Value="Red"/> 
     <Setter Property="BorderBrush" Value="Transparent"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="BorderThickness" Value="0"/> 
     <Setter Property="HorizontalContentAlignment" Value="Center"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Padding" Value="1"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToggleButton}"> 
        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> 
         <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 

<Grid> 
    <ToggleButton x:Name="OpenColorPicker" Style="{DynamicResource ToggleColorPickerStyle}" Background="{Binding DataContext.SelectedColor, ElementName=ColorPickerWidget, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> 
    <Popup x:Name="PopupColorPicker" SnapsToDevicePixels="True" AllowsTransparency="True" IsOpen="{Binding IsChecked, ElementName=OpenColorPicker}" StaysOpen="True" Placement="Right"> 
     <Border Margin="20, 20, 0, 20" Padding="5"> 
      <colorPicker:ColorPicker x:Name="ColorPicker" Background="{StaticResource BaseDarkColor}" Width="420" Height="210" SelectedColor="{Binding DataContext.SelectedColor, ElementName=ColorPickerWidget, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"> 
       <colorPicker:ColorPicker.Effect> 
        <DropShadowEffect BlurRadius="20" Opacity="1" Direction="0"/> 
       </colorPicker:ColorPicker.Effect> 
      </colorPicker:ColorPicker> 
     </Border> 
    </Popup> 
</Grid> 

UserControl调用ColorPickerWidget有这个适当的ty：

public static readonly DependencyProperty 
SelectedColorProperty = DependencyProperty.Register("SelectedColor", typeof(Color), typeof(ColorSelector)); 
public Color SelectedColor 
{ 
    get { return (Color)GetValue(SelectedColorProperty); } 
    set { SetValue(SelectedColorProperty, value); } 
} 

任何想法？

谢谢

编辑__

我尝试这样做：

<ToggleButton x:Name="OpenColorPicker" Background="{Binding SelectedColor, ElementName=ColorPicker, Converter={StaticResource ColorToBrush}}"/> 

有了这个转换器：

public class ColorToBrushConverter : IValueConverter 
{ 
    SolidColorBrush _red = new SolidColorBrush(), 
        _green = new SolidColorBrush(), 
        _blue = new SolidColorBrush(), 
        _alpha = new SolidColorBrush(), 
        _all = new SolidColorBrush(); 

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     var color = (Color)value; 
     switch ((string)parameter) 
     { 
      case "r": 
       _red.Color = Color.FromRgb(color.R, 0, 0); 
       return _red; 
      case "g": 
       _green.Color = Color.FromRgb(0, color.G, 0); 
       return _green; 
      case "b": 
       _blue.Color = Color.FromRgb(0, 0, color.B); 
       return _blue; 
      case "a": 
       _alpha.Color = Color.FromArgb(color.A, 
       128, 128, 128); 
       return _alpha; 
      case "all": 
       _all.Color = Color.FromArgb(color.A, color.R, color.G, color.B); 
       return _all; 

     } 
     return Binding.DoNothing; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

但同样的问题，该按钮的背景变得不变色。

Answer 1

您与ToggleButton.Background的绑定存在一些问题。首先，您要绑定到ColorPicker的DataContext.SelectedColor。 DataContext是视图模型。它可能与ToggleButton具有相同的DataContext。所以你不需要去ColorPicker找到它。但ColorPicker无论如何都不会将其SelectedColor绑定到视图模型属性，所以这可能只是一个误解。在那个绑定中摆脱DataContext，它只是发送绑定在一个疯狂的追逐无处不在。

然后你的名字错了。您将该颜色选择器命名为"ColorPicker"，但您告诉绑定器寻找"ColorPickerWidget"。而Mode=TwoWay毫无意义，因为ToggleButton无法更改它的Background并将颜色发送回颜色选择器。但它的背景不是一种颜色;这是一个Brush。所以这不可能工作。

而且因为它期望Brush，您需要一个转换器将颜色转换为画笔。 Brush XAML中的属性非常令人迷惑，因为您可以给它们诸如字符串"Green"或"#882266aa"之类的东西，并且它们可以工作。但那是因为它们与后台的TypeConverter相关联，将这些字符串转换为Brush。但是，如果您将Color值绑定到属性，那不起作用。这并不直观。

这个绑定是否适用于ToggleButton.Background？

Background="{Binding SelectedColor, ElementName=ColorPicker, Converter={StaticResource ColorToBrush}}"