Bind Control's Property to Variable, Bind Variable to Another Control - wpf

Question

Its hard to understand something from the Title, but its also hard for me to explain but I will try.
I have custom control to pick color.
The custom control has Property called SelectedColor:
/// <summary>
/// SelectedColor property backing ReadOnly DependencyProperty.
/// </summary>
private static readonly DependencyPropertyKey SelectedColorPropertyKey
= DependencyProperty.RegisterReadOnly("SelectedColor", typeof(Color), typeof(ImageColorPicker)
, new FrameworkPropertyMetadata(Colors.Transparent
, FrameworkPropertyMetadataOptions.AffectsRender));
/// <summary>
/// Gets or sets the color selected.
/// </summary>
/// <value>The color selected.</value>
public Color SelectedColor
{
get { return (Color)GetValue(SelectedColorPropertyKey.DependencyProperty); }
}
I want to bind that Property to a variable I have in my ViewModel which is called TabColor:
public event PropertyChangedEventHandler PropertyChanged; //Event to notify when Property changed.
/// <summary>
/// Notify that Property has Changed.
/// </summary>
/// <param name="propertyName">The name of the Property</param>
protected void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
private Brush _tabColor; //Color of the Tab.
//Return/Set the color of the Tab.
public Brush TabColor
{
get
{
return _tabColor;
}
set
{
_tabColor = value;
NotifyPropertyChanged("TabColor");
}
}
Now, I want to bind the TabColor to Properties on my Style:
<Style TargetType="{x:Type MetroStyle:MetroTabItem}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Header" Value="{Binding TabTitle}" />
<Setter Property="Foreground" Value="{Binding TabColor}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MetroStyle:MetroTabItem}">
<Grid Height="26" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Margin="5,0" HorizontalAlignment="Left" VerticalAlignment="Center" ContentSource="Header">
<ContentPresenter.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type MetroStyle:MetroTabItem}}}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
<StackPanel Grid.Column="1" Height="16" Margin="0,0,1,0" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
<Button Width="16" Click="ShowHide_Click" Content="🌕" Style="{StaticResource CustomizedMetroTabItemButton}" ToolTip="Hide" Visibility="{Binding WindowsVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Button Width="16" Click="ShowHide_Click" Content="🌑" Style="{StaticResource CustomizedMetroTabItemButton}" ToolTip="Show" Visibility="{Binding WindowsVisible, Converter={StaticResource InverseBooleanToVisibilityConverter}}" />
<Button Width="16" Click="Clear_Click" Content="" Style="{StaticResource CustomizedMetroTabItemButton}" ToolTip="Clear" />
<ToggleButton Width="16" x:Name="Edit" Content="" Style="{StaticResource CustomizedMetroTabItemToggleButton}" ToolTip="Edit" />
<Popup IsOpen="{Binding IsChecked, Mode=TwoWay, ElementName=Edit}" StaysOpen="False" PlacementTarget="{Binding ElementName=Edit}" Placement="Left" VerticalOffset="{Binding ActualHeight, ElementName=Edit}" HorizontalOffset="{Binding Width, ElementName=Edit}" PopupAnimation="Slide">
<StackPanel>
<local:ImageColorPicker x:Name="ColorPicker" Source="Images/ColorWheel.png" HorizontalAlignment="Center" Width="100" Height="100"/>
</StackPanel>
</Popup>
</StackPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Background" Value="#EFEFF2" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFFFFF" />
<Setter Property="Foreground" Value="{Binding TabColor}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{Binding TabColor}" />
<Setter Property="Foreground" Value="#FFFFFF" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The reason why I use the variable as a "connector" is because I cant bind Properties out of the Tree - right? (I mean I cant do this: <Setter Property="Foreground" Value="{Binding ElementName=ColorPicker, Path=SelectedColor, Converter={StaticResource ColorToBrushConverter}}" />
I also have an Image that should simplify what I am asking:
If you have another solution as long as I will achieve what I need - I will accept.
Thanks!
EDIT:
I have a converter which converts from Color to SolidColorBrush but still, I dont know how to do the binding I want:
[ValueConversion(typeof(Color), typeof(Brush))]
public class ColorToBrushConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
Color color = (Color)value;
return new SolidColorBrush(color);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
EDIT2:
Sample code with everything above
EDIT3:
A new picture (maybe it will be more understandable)

Answer 1

I believe all you need to do is set up a binding on Selected Color, something like:
<local:ImageColorPicker x:Name="ColorPicker" Source="Images/ColorWheel.png" HorizontalAlignment="Center" Width="100" Height="100" SelectedColor="{Binding Path=TabColor, Converter={StaticResource ColorToBrushConverter}}/>
You can always set a binding on a dependency property (but nothing else). Hopefully that clears up "Binding properties out of the tree". If not, please clarify what you don't understand and I would be happy to try and address it.
Also, the dependency property isn't set up how I am used to seeing it, so if you are still running into trouble, you might look into setting it up with the dpprop code snippet, or follow the example on MSDN.
Comments
Bindings have multiple modes, and if you specifically want just one you just set the mode variable. In your case, you would change the binding to:
SelectedColor="{Binding Path=TabColor, Converter={StaticResource ColorToBrushConverter, Mode=OneWay}}
That way, any changes to the "TabColor" property won't propagate to the ColorPicker, but changes from the ColorPicker will set the "TabColor" property. For reference the other modes are: TwoWay (the default), OneTime (get the default just on initialization), and OneWayToSource(like OneWay, but it only changes the source, and never picks up updates).
When I mentioned the "unusual" dependency property, I was referring to the style of the "SelectedColor" DP. Of course TabColor will not be a DP :).
Finally, I believe that you can bind the Value property as described. Have you tried it? The only restriction on binding is that it must be done on a DP.
Update
I could not get the ColorPicker to update the view model. Everything I've read indicates that it should be able to, but I wasn't able to figure it out. If that is an important requirement, I would suggest starting from scratch and get just that working, then keep going.
That being said, I did get the color to update. Try changing your XAML to:
<TabItem Header="Test" Foreground="{Binding ElementName=ColorPicker, Path=SelectedColor, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}">
<Grid>
<local:ImageColorPicker x:Name="ColorPicker" Source="ColorWheel.png" HorizontalAlignment="Center"/>
</Grid>
</TabItem>
For some reason, I had to rebuild a couple times to make this work. Again, I'm sorry I couldn't get the original request working.
Update 2
Apparently all you need to do is add "BindsTwoWayByDefault" to the metadata options. This will cause the "ConvertBack" function to be called since you are updating the ViewModel.
You could probably get away with having "OneWay" bindings on all the controls EXCEPT the ImageColorPicker so that they don't accidentally set the color, but in general TwoWay should be fine.