Passing color (as string) to background of button using data binding

Question

In following snippet, I'm trying to pass a color (as a string) to a control and use binding to assign a color to the background of a button. However, it is ignored. Any idea what goes wrong?

Here is the XAML:

<Window x:Class="SDKSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SDKSample"
        Title="MainWindow" Height="350" Width="525">

    <DockPanel>
        <DockPanel.Resources>
            <local:MyData x:Key="myDataSource"   />
        </DockPanel.Resources>
        <DockPanel.DataContext>
            <Binding Source="{StaticResource myDataSource}" />
        </DockPanel.DataContext>
        <!--<Button Background="Red" Width="250" Height="25">RED</Button>-->
        <Button Background="{Binding Source={StaticResource myDataSource}, Path=ColorName}" Width="150" Height="30">I'm bound to be red</Button>

    </DockPanel>        
</Window>

Here is the code behind:

namespace SDKSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            MyData md = new MyData("Red");
            this.DataContext = md.ColorName;

        }
    }

    public class MyData
    {
        private Color colorname;
        public MyData()
        {
        }

        public MyData(string value)
        {
            Color col = (Color)ColorConverter.ConvertFromString(value);
            this.colorname = col;
        }

        public Color ColorName
        {
            get { return colorname; }
            set
            {
                this.colorname = value;
            }
        }
    }
}

sa_ddam213 · Accepted Answer · 2013-02-22 01:50:21Z

There are a couple of problems here, The first one is quite common, a lot of people try assign a Color to a Brush, you can not do this directly, one way around this is to assign the color to a SolidColorbrush of the Background.

Example:

<Button Content="I'm bound to be red" Width="150" Height="30">
    <Button.Background>
        <SolidColorBrush Color="{Binding ElementName=UI,Path=MyData.ColorName}" />
    </Button.Background>
</Button>

The other problem is the way you are assigning the DataContext, all you really need to do is make a MyData property on your window and assign that to your Button.

Here is an example.

Xaml:

<Window x:Class="WpfApplication7.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="124" Width="464" Name="UI" >

        <DockPanel DataContext="{Binding ElementName=UI}"> <!--set the DataContext to your Window (using the Name of the Window)-->
            <Button Content="I'm bound to be red" Width="150" Height="30">
                <Button.Background>
                    <SolidColorBrush Color="{Binding MyData.ColorName}" />
                </Button.Background>
            </Button>
        </DockPanel>
</Window>

Code

public partial class MainWindow : Window, INotifyPropertyChanged
{
    private MyData _myData;

    public MainWindow()
    { 
        InitializeComponent();
        MyData = new MyData("Red");
    }

    public MyData MyData
    {
        get { return _myData; }
        set { _myData = value; NotifyPropertyChanged("MyData"); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string property)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(property));
        }
    }
}

Collectives™ on Stack Overflow

Passing color (as string) to background of button using data binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related