Невозможно связать свойство цвета UserControl с фоном ToggleButton

Question

Я не понимаю ... Я сделал простой UserControl, сделанный из переключателя, чтобы открыть всплывающее окно, содержащее CustomControl, colorpicker.

Нет проблем открыть или закрыть всплывающее окно, только если я пишу название цвета для цвета фона переключателя.

Но если я пытаюсь связать свойство 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); } 
} 

Есть идеи?

Спасибо

EDIT __

Я попытался это:

<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's DataContext.SelectedColor. Модель DataContext - это viewmodel. Вероятно, это тот же DataContext, что и у ToggleButton. Поэтому вам не нужно идти в ColorPicker, чтобы найти его. Но ColorPicker не привязывает его SelectedColor к свойству viewmodel, так что это, вероятно, просто недоразумение. Избавьтесь от DataContext в этом привязке, он просто отправляет привязку на дикую гонящую погоню в никуда.

Тогда вы получили неправильное имя. Вы назвали colorpicker "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}}"