Binding Boder.Background to LinearGradientBrush from Resource Dictionary

Question

I'd like to Bind the Background of a Border Property to elements in a list.

I have a Dictionary holding the follwing:

<LinearGradientBrush x:Key="ConfigurationItemBackground" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFAABBCC" Offset="1"/>
    <GradientStop Color="#FFCCDDEE" Offset="0.7"/>
</LinearGradientBrush>    

<LinearGradientBrush x:Key="NavigationItemBackground" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FFD97825" Offset="1"/>
    <GradientStop Color="#FFFF9A2E" Offset="0.7"/>
</LinearGradientBrush>

Now I fill a ObservableCollection holding Objects that contain a Property called "BackgroundStyle". When I fill a list box with styled background I'd like to bind the Background to "BackgroundStyle"

<Border x:Name="Border" BorderThickness="1" CornerRadius="4" Width="120" Height="80"
        VerticalAlignment="Center" HorizontalAlignment="Center" Padding="4"
        BorderBrush="Black" Background="{Binding Path=BackgroundStyle}">

This works well, if BackgroundStyle="Red" or "Green" but it won't work if I use "ConfigurationItemBackground".

Any suggestions? Thanks for your help ;)

-Tim-

How is your ObservableCollection related to the Border? Do you set it in the DataContext of the border, or any of its direct parents? — Philipp Schmid, Oct 24 '11 at 22:42
@PhilippSchmid: His `ListBox` has that collection as its `ItemsSource`, it sounds like. The `Border` looks like it's the `DataTemplate`, and he's binding `Background` to the `BackgroundStyle` property. — Adam Robinson, Oct 24 '11 at 22:45

score 0 · Answer 1 · edited May 23 '17 at 12:19

You can't do exactly what you're trying to do, which is essentially to use data binding to store the key of a resource within your bound object. The closest you can get would be the answer to this question, which basically uses a ValueConverter to get the resource from the application's resources.

Unfortunately, this won't work with what you want to do, which is use a local resource. For that, you'd be better off writing your own custom ValueConverter that converts your string value into a brush.

You could do something generic like this:

[ValueConversion(typeof(string), typeof(object))]
public class ResourceKeyConverter : IValueConverter
{
    public ResourceKeyConverter()
    {
        Resources = new ResourceDictionary();
    }

    public ResourceDictionary Resources { get; private set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    { 
        return Resources[(string)value];
    }

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

Then use it like this:

<Window.Resources>
    <my:ResourceKeyConverter x:Key="keyConverter">
        <ResourceKeyConverter.Resources>
            <LinearGradientBrush x:Key="ConfigurationItemBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFAABBCC" Offset="1"/>
                <GradientStop Color="#FFCCDDEE" Offset="0.7"/>
            </LinearGradientBrush>    

            <LinearGradientBrush x:Key="NavigationItemBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFD97825" Offset="1"/>
                <GradientStop Color="#FFFF9A2E" Offset="0.7"/>
            </LinearGradientBrush>
        </ResourceKeyConverter.Resources>
    </my:ResourceKeyConverter>
</Window.Resources>

...

<Border Background="{Binding BackgroundStyle, Converter={StaticResource keyConverter}}">
</Border>

(I'm at home and don't have Visual Studio in front of me, so this might require some tweaking, but it should be largely correct).

Binding Boder.Background to LinearGradientBrush from Resource Dictionary

1 Answers1