ColorPicker Binding...

Nov 11, 2010 at 6:36 PM

What is the best way to bind the colorpicker to say, the ribbon control background property?

I've tried several methods, and none have worked.

Nov 11, 2010 at 7:52 PM

Well, you just have to make sure your binding syntax is correct.  Maybe something like Binding="{Binding ElementName=_myRibbonControl, Path=Background}"

Nov 11, 2010 at 10:42 PM

Thanks for responding Brian!

I had tried that, and I have a short sample here that I'm trying to do the same thing with...

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="100" Width="200" xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended" 
        Name="Window" Background="blue">
    <Grid>
        <extToolkit:ColorPicker Name="colorPicker1" 
                                SelectedColor="{Binding ElementName=Window,Path=Background}" 
                                CurrentColor="{Binding ElementName=Window,Path=Background}" />
    </Grid>
</Window>
You gotta admit, the documentation of a single line isn't much to go on... especially for a newbie to WPF...
What I'm trying to do, is to pick up the window background color to populate the current color, 
and setting the new background color to the color picked.
I've also tried to use code behind, but so far, I haven't found an event trigger that works, so as an add on question, 
what event is triggered by the OK button of the color picker?

Nov 11, 2010 at 10:52 PM

I see your problem right away.  The ElementName property in the binding syntax is not the actual Type of element like a Window or Grid, etc..  You need to specifiy an x:Name on the element you wish to reference.  So on your Window add x:Name="Window" and then it will work.   Keep in mind the single line of documentation is only for the ColorPicker control, not WPF's data binding syntax.  Hope that helps.  There are currently no events fired yet.  A lot of the controls in the library provide base functionality for now.  Iw ill start enhancing them as I recieve feedback.

Nov 11, 2010 at 11:53 PM

Thanks Brian,

Sorry, but still no joy.

Reposting the fixed code as I interpreted it...

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="100" Width="200" xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended" 
        x:Name="Window" Background="blue">
    <Grid>
        <extToolkit:ColorPicker Name="colorPicker1" 
                                SelectedColor="{Binding ElementName=Window,Path=Background}" 
                                CurrentColor="{Binding ElementName=Window,Path=Background}" />
    </Grid>
</Window>

That's unfortunate that the events aren't fired yet.

The next code fixed the CurrentColor binding, but SelectedColor still doesn't change the window background. It appears to be one way binding, not 2 way.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="100" Width="200" xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended" 
        x:Name="Window" Background="{DynamicResource BackColor}">
    <Window.Resources>
        <Color x:Key="Color1">Blue</Color>
        <SolidColorBrush x:Key="BackColor" Color="{DynamicResource Color1}"/>
    </Window.Resources>
    
    
    <Grid>
        <extToolkit:ColorPicker Name="colorPicker1" 
                                SelectedColor="{DynamicResource Color1}" />
    </Grid>
</Window>

.


Nov 12, 2010 at 12:27 AM

Because Background is not of Type Color, it is of Type Brush.  Therefore you need an IValueConverter to convert a Color to a Brush.  here is a quick and dirty one:

 

   public class ColorToBrushConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value == null)
                return new SolidColorBrush();

            Color color = (Color)ColorConverter.ConvertFromString(value.ToString());

            return new SolidColorBrush(color);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value == null)
                return value;

            Color color = (Color)ColorConverter.ConvertFromString(value.ToString());

            return new SolidColorBrush(color);
        }
    }

Then set your binding accordingly.

 

<Window.Resources>
        <local:ColorToBrushConverter x:Key="ColorToBrushConverter" />
</Window.Resources>

<extToolkit:ColorPicker SelectedColor="{Binding ElementName=_window, Path=Background, Converter={StaticResource ColorToBrushConverter}}" />

That will change the background color when the SelectedColor changes.


Nov 12, 2010 at 12:32 AM

Actually I see a mistake change the convert method to this:

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
       if (value == null)
           return Colors.White;

       return (Color)ColorConverter.ConvertFromString(value.ToString());
}
You need to convert the Brush to a Color.
Nov 12, 2010 at 2:37 AM

Thanks for your trouble Brian, but still not working for me.

The problem was with the following code...

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

the compiler didn't like local:ColorToBrushConverter.
I'll try again tomorrow.
Nov 12, 2010 at 2:40 AM

This is because you need to add a namespace to the location of your value converter.  The one in my example looked like this:

xmlns:local="clr-namespace:WPFToolkit.Extended.Samples"

So create a namespace and point it to where you created the ColorToBrushConverter.

Nov 12, 2010 at 12:37 PM

Thanks Brian!

The got me where I needed to be.

WPF looks simple enough, but there is a long learning curve for sure.

Nov 18, 2010 at 9:24 PM

Just to let you know I just added a SelectedColorChanged event to the COlorPicker control.

Nov 19, 2010 at 11:29 AM

Thanks again Brian!

I've got it working the way I need it to however.

Now, If I can only straighten out my issues with the Net4 Ribbon control.

Did you know there are 2 versions of the ribbon control in 2010 express? The one that displays with a WPFRibbonControl application is different than that of a straight WPF app with the ribbon added.

The title bar is different, the application menu is different, the Ribbon app doesn't display the quick access bar, and the WPF ribbon added version doesn't recognize the ribbon minimized event.

I'll be attempting to communicate this to Microsoft today,

Nov 19, 2010 at 1:56 PM

I haven't experienced the issues you have described.  Have you downloaded the newest October 2010 release?

http://www.microsoft.com/downloads/en/details.aspx?displaylang=en&FamilyID=2bfc3187-74aa-4154-a670-76ef8bc2a0b4

Nov 20, 2010 at 8:19 PM

Seems I determined that I was indeed using 2 different versions. The WPF RibbonApp version is version 4 something. The one that I had added to the straight wpf application was version 3.5.

Looks like 3.5 version was more of a real ribbon look, but also less complete.. I'm back to using version 4.