Binding to Gallery.SelectedItem with Live Preview - Ribbon for WPF Forum

Posted 16 years ago by Bryan Livingston

Version: 3.5.0426

I would like to bind a SelectedItem property of a pop up gallery and still use Live Preview. Currently binding to SelectedItem works fine but it doesn't get live preview updates.

Attached is some sample code of what I'm tring to do. The top color picker is setup the way that I'd like to use it.

In the second color picker, I made the ActiveItem property the source instead of the target of the binding. I don't want to have to hook up my objects like that and it doesn't quite work right as ActiveItem seems to get cleared after an item is selected (that might just be because the gallery is still getting shown).

Is there a chance you could make ActiveItem a Dependency Property or create something like a PreviewedSelectedItem Dependency Property that I could bind to?

<Window
    x:Class="Vector.TestWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ribbon="http://schemas.actiprosoftware.com/winfx/xaml/ribbon"
    xmlns:media="clr-namespace:System.Windows.Media;assembly=PresentationCore"
    >
    <StackPanel>
        <ribbon:ColorPickerGallery
            InitialColumnCount="10"
            HorizontalAlignment="Center"
            SelectedItem="{Binding ElementName=TargetButton, Path=Background, Mode=TwoWay}"
            IsPreviewEnabled="True"
            >
            <ribbon:ColorPickerGallery.CategorizedItemsSource>
                <x:Array Type="{x:Type media:SolidColorBrush}">
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#FFFFFF" ribbon:ScreenTipService.ScreenTipHeader="White" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#000000" ribbon:ScreenTipService.ScreenTipHeader="Black" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#EEECE1" ribbon:ScreenTipService.ScreenTipHeader="Tan" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#1F497D" ribbon:ScreenTipService.ScreenTipHeader="Dark Blue" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#4F81BD" ribbon:ScreenTipService.ScreenTipHeader="Blue" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#C0504D" ribbon:ScreenTipService.ScreenTipHeader="Red" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#9BBB59" ribbon:ScreenTipService.ScreenTipHeader="Olive Green" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#8064A2" ribbon:ScreenTipService.ScreenTipHeader="Purple" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#4BACC6" ribbon:ScreenTipService.ScreenTipHeader="Aqua" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#F79646" ribbon:ScreenTipService.ScreenTipHeader="Orange" />
                </x:Array>
            </ribbon:ColorPickerGallery.CategorizedItemsSource>
        </ribbon:ColorPickerGallery>
        <Button x:Name="TargetButton" Background="Red">Target Button</Button>

        <ribbon:ColorPickerGallery
            InitialColumnCount="10"
            HorizontalAlignment="Center"            
            IsPreviewEnabled="True"
            x:Name="ColorPicker2"
            >
            <ribbon:ColorPickerGallery.CategorizedItemsSource>
                <x:Array Type="{x:Type media:SolidColorBrush}">
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#FFFFFF" ribbon:ScreenTipService.ScreenTipHeader="White" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#000000" ribbon:ScreenTipService.ScreenTipHeader="Black" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#EEECE1" ribbon:ScreenTipService.ScreenTipHeader="Tan" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#1F497D" ribbon:ScreenTipService.ScreenTipHeader="Dark Blue" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#4F81BD" ribbon:ScreenTipService.ScreenTipHeader="Blue" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#C0504D" ribbon:ScreenTipService.ScreenTipHeader="Red" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#9BBB59" ribbon:ScreenTipService.ScreenTipHeader="Olive Green" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#8064A2" ribbon:ScreenTipService.ScreenTipHeader="Purple" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#4BACC6" ribbon:ScreenTipService.ScreenTipHeader="Aqua" />
                    <media:SolidColorBrush ribbon:PopupGallery.Category="Theme Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#F79646" ribbon:ScreenTipService.ScreenTipHeader="Orange" />
                </x:Array>
            </ribbon:ColorPickerGallery.CategorizedItemsSource>
        </ribbon:ColorPickerGallery>
        <Button x:Name="TargetButton2" Background="{Binding ElementName=ColorPicker2, Path=ActiveItem}">Target Button</Button>
    </StackPanel>
</Window>

Comments (8)

Posted 16 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Bryan,

In your sample moving over the first gallery does nothing but does update when an item is clicked. Moving of the second gallery updates when moving over items but clears when clicked.

So are you asking for something that is the combination of the two, where it's normally the SelectedItem but then also reflects what you are over if the mouse is over something for previewing?

Could you also provide some more info on how you plan on using this in your app? Thanks!

Actipro Software Support

Posted 16 years ago by Bryan Livingston

That's exactly what I'm asking for. Essentially a SelectedItem property that also gets the live mouse over preview updates. If you think it's appropriate to make those updates to the existing SelectedItem property then a different property wouldn't be needed.

For my app, I'm converting the button design interface (which can be seen in a screenshot at the bottom of http://vectorstudio.com) to use the ribbon interface instead of a design dialog. There's several enumeration values that I am also reworking to use galleries, so it's not just the color picker gallery that I'd like to be able to get live previews on.

Posted 16 years ago by Bryan Livingston

This is a bit of a different issue, but I just tried using the ActiveItemChanged event and there doesn't seem to be a way to get the Commit or PreviewCancel state within that event handler.

Posted 16 years ago by Actipro Software Support - Cleveland, OH, USA

For the next maintenance release we have changed ActiveItem to be the same as SelectedItem when the mouse is not previewing another item, instead of being null. This should be what you want.

ActiveItemChanged just indicates when the ActiveItem property value changes. It doesn't do anything else or allow cancellation.

Actipro Software Support

Posted 16 years ago by Bryan Livingston

Thank you, that will be an improvement.

I still can't bind to ActiveItem the way I would like to since it is read only. I get the following error when I try to:

ActiveItem="{Binding ElementName=TargetButton2, Path=Background, Mode=TwoWay}"

'ActiveItem' property is read-only and cannot be set from markup.

There's probably another way that I need to declare the binding.

Posted 16 years ago by Actipro Software Support - Cleveland, OH, USA

Well ActiveItem is just a read-only property and reflects what the mouse is over (and otherwise the selected item) so unfortunately you wouldn't be able to bind that way.

Actipro Software Support

Posted 16 years ago by Bryan Livingston

Okay. I had to give up on the binding entirely, both the read only and me needing to integrate my undo system caused me to use the events instead.

I'm planning on trying to use live preview with ribbon:ComboBox as well. It has an IsPreviewEnabled property, but doesn't have an ActiveItemChanged event. Could that event be added?

Posted 16 years ago by Actipro Software Support - Cleveland, OH, USA

ComboBox.ActiveItemChanged has been added for the next maintenance release.

Actipro Software Support

The latest build of this product (v24.1.1) was released 2 months ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.