正确绑定IValueConverter

Question

I am trying to create some sort of label with a glowing background. To achieve this I decided to use a style on a content control. The glow effect comes from two DropShadowEffects , which I wish to bind to the Foreground Property of the content control. The Foreground Property is of type Brush and the DropShadowEffect.Color is of type Color , so I need to convert between those two.

Whenever I try to set the glow color via the converter the glow effect stays black. It seems like the converter code never even gets passed. I did return a pre-defined color (no conversion) in the converter and even added a Debug.Break(), to no avail.

Can you tell me what I am doing wrong, or whether there are alternative, possibly better ways to implement a label with a glowing background.

The converter:

public class ColorToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value == null) return null;

        if (value is Color)
        {
            Color color = (Color)value;
            BrushConverter bc = new BrushConverter();
            return bc.ConvertFrom(color);
        }

        Type type = value.GetType();
        throw new InvalidOperationException("Unsupported type ["+type.Name+"]");            
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {

        if (value is Brush)
        {
            Brush brush = (Brush)value;
            BrushConverter bc = new BrushConverter();
            return bc.ConvertTo(brush, typeof(Color));
        }

        Type type = value.GetType();
        throw new InvalidOperationException("Unsupported type ["+type.Name+"]");            
    }
}

In a resource dictionary:

<local:ColorToBrushConverter x:Key="Color2BrushConverter" />

<Style x:Key="ContentControlGlowStyle" TargetType="{x:Type ContentControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ContentControl}">
                <Border>
                    <Border.Effect>
                        <DropShadowEffect
                                BlurRadius="15"
                                Color="{Binding Path=Foreground, Converter={StaticResource Color2BrushConverter}}"
                                ShadowDepth="2"
                                Direction="0"/>

                    </Border.Effect>

                    <TextBlock Name="Highlight" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" Margin="10,5,0,0">
                        <TextBlock.Effect>  
                            <DropShadowEffect
                                BlurRadius="15"
                                Color="{Binding Path=Foreground,Converter={StaticResource Color2BrushConverter}}"
                                ShadowDepth="2"
                                Direction="0"/>

                        </TextBlock.Effect>

                    </TextBlock>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and in XAML:

<ContentControl Name="cc2" Style="{DynamicResource ContentControlGlowStyle}"
    FontSize="24"
    Foreground="LightBlue"
    Background="LightBlue"
    Content="some content to display"
    FontFamily="Verdana" />

Answer 1

To fix the problem you are facing you need to set the Relative source to the color binding. The trick to knowing that it is not an issue with your converter is the fact it is never called and VS doesn't spit out any errors meaning that a default has been picked.

Answer 2

Firstly, your converter seems backwards -- you're converting a Brush to Color , and you've created a ColorToBrushConverter to do so.

Also, I'm not sure why you're redefining the control template in the ContentControl style. You should just set a DropShadowEffect , that has its Color bound to the ContentControl 's Foreground .

Try this instead:

public class BrushToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var solidColorBrush = value as SolidColorBrush;
        if (solidColorBrush == null) return null;

        return solidColorBrush.Color;
    }

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

and

<local:BrushToColorConverter x:Key="BrushToColorConverter" />

<Style x:Key="ContentControlGlowStyle" TargetType="{x:Type ContentControl}">
    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect
                        BlurRadius="15"
                        Color="{Binding Foreground,RelativeSource={RelativeSource AncestorType=ContentControl}, Converter={StaticResource BrushToColorConverter}}"
                        ShadowDepth="2"
                        Direction="0"/>
            </Setter.Value>
       </Setter>
</Style>

use it like

<ContentControl 
    Foreground="Yellow" 
    Style="{DynamicResource ContentControlGlowStyle}">
    <TextBlock Text="TEST" FontSize="72"/>
</ContentControl>