Binding to ColorPickerGallery from within a DataGrid

Ribbon for WPF Forum

The latest build of this product (v21.1.1) was released 3 months ago, which was before this thread was created.
Posted 13 days ago by Miles Merckel
Version: 21.1.1
Avatar

I’m trying to bind the SelectedItem of a ColorPickerGallery to a binding within a DataGrid. I have a List of objects the DataGrid ItemSource is bound to, this works as expected with a number of different bindings. The ColorPickerGallery is an entry to a ContextMenu, essentially it is copied from your "Gallery Color Pickers Sample" though I am not using the Command hence binding to SelectedItem instead.

The binding gets from my “TraceColour” binding (I can see this debugging) it doesn’t set the appropriate Color though this doesn’t bother me. Selecting doesn’t raise the setter at all for the binding, I have tried all different Modes and update triggers. The ItemClick and SelectedItemChanged gets raised but I am unable to access the TraceColour property from within. There is a setter for TraceColour with an appropriate OnPropertyChanged setup, this binding works in other areas of my application.

Possibly my incorrect use of DataGrid but there appears to be no similar example to compare with. Any help on my issue would be appreciated.

Thanks

<DataGrid ItemsSource="{Binding OpTraceItems}" HeadersVisibility="Column" CanUserAddRows="False" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Line" >
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate >
                    <Line X2="50" StrokeThickness="4" VerticalAlignment="Center" Margin="10">
                        <Line.Stroke>
                            <SolidColorBrush Color="{Binding TraceColour}"/>
                        </Line.Stroke>
                        <Line.ContextMenu>
                            <ContextMenu >
                                <ribbon:ColorPickerGallery InitialColumnCount="10" HorizontalAlignment="Center" Width="245" 
                                                            SelectedItem="{Binding TraceColour, Mode=TwoWay, Converter={StaticResource Brush2Color}}" 
                                                            ItemClick="ColorPickerGallery_ItemClick" SelectedItemChanged="ColorPickerGallery_SelectedItemChanged">
                                    
                                    <ribbon:ColorPickerGallery.ItemTemplate>
                                        <DataTemplate>
                                            <Rectangle Fill="{Binding BindsDirectlyToSource=True}" Width="20" Height="20" />
                                        </DataTemplate>
                                    </ribbon:ColorPickerGallery.ItemTemplate>

                                    <ribbon:ColorPickerGallery.CategorizedItemsSource>
                                        <x:Array Type="{x:Type media:SolidColorBrush}">
                                            <media:SolidColorBrush ribbon:PopupGallery.Category="Standard Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#C00000" ribbon:ScreenTipService.ScreenTipHeader="Dark Red" />
                                            <media:SolidColorBrush ribbon:PopupGallery.Category="Standard Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#FF0000" ribbon:ScreenTipService.ScreenTipHeader="Red" />
                                            <media:SolidColorBrush ribbon:PopupGallery.Category="Standard Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#FFC000" ribbon:ScreenTipService.ScreenTipHeader="Orange" />
                                            <media:SolidColorBrush ribbon:PopupGallery.Category="Standard Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#FFFF00" ribbon:ScreenTipService.ScreenTipHeader="Yellow" />
                                            <media:SolidColorBrush ribbon:PopupGallery.Category="Standard Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#92D050" ribbon:ScreenTipService.ScreenTipHeader="Light Green" />
                                            <media:SolidColorBrush ribbon:PopupGallery.Category="Standard Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#00B050" ribbon:ScreenTipService.ScreenTipHeader="Green" />
                                            <media:SolidColorBrush ribbon:PopupGallery.Category="Standard Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#00B0F0" ribbon:ScreenTipService.ScreenTipHeader="Light Blue" />
                                            <media:SolidColorBrush ribbon:PopupGallery.Category="Standard Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#0070C0" ribbon:ScreenTipService.ScreenTipHeader="Blue" />
                                            <media:SolidColorBrush ribbon:PopupGallery.Category="Standard Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#002060" ribbon:ScreenTipService.ScreenTipHeader="Dark Blue" />
                                            <media:SolidColorBrush ribbon:PopupGallery.Category="Standard Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#7030A0" ribbon:ScreenTipService.ScreenTipHeader="Purple" />
                                        </x:Array>
                                    </ribbon:ColorPickerGallery.CategorizedItemsSource>

                                </ribbon:ColorPickerGallery>

                            </ContextMenu>
                        </Line.ContextMenu>
                    </Line>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

Comments (2)

Posted 13 days ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Miles,

The gallery's OnSelectedItemPropertyValueChanged handler only updates the visual "selected" state of an item when IsSelectionHighlightVisible is set to true.

It's hard to say what's wrong without having a simple sample to debug with.  When looking at the code snippet, I notice the gallery's items are an array of Brushes, and you are binding the gallery's SelectedItem to a Color value.  You have a Brush2Color converter, but I wonder if that is the right "direction".  Shouldn't it be Color2Brush, since the gallery's items are Brushes?


Actipro Software Support

Answer - Posted 13 days ago by Miles Merckel
Avatar

Hi thanks for the reply,

I’ve set IsSelectionHighlightVisible to True but noticed it doesn’t highlight the first time opening up the picker, opening the picker from then onwards the appropriate item is selected. The color saved when the object is serialized matches the ColorPickerGallery set though I’m not worried about this issue.

I had casting errors when running the program related to the SelectedItem binding so changed the converter types to match, allowing it to execute without any errors but I didn’t updated the name of the converter to correctly describe it. Hence the converter was named "Brush2Color" when I should have named it "Color2Brush".

I tried another approach creating an additional Brush property on the object which copies across to the Color property when set and vice versa. Binding directly to the new Brush property solved the problem and now allows the Brush/Color to get and set as appropriate. Something it didn't like about my converter though it compiled and executed ok without errors or exceptions.

Many thanks for you help

Add Comment

Please log in to a validated account to post comments.