Want to add event handler to PopupContentTemplate using style

Hello Daniel,

Looking at the XAML you last posted, you are creating a Style that targets ribbon:ColorPickerGallery and are setting it to a shared:PopupButton.  Since those two control classes are not related in any way, VS is throwing a valid error.

To get the ribbon:ColorPickerGallery.SelectedItem bound, I would put your Binding right on the shared.PopupButton.PopupContent property instead and then in the template, bind the ColorPickerGallery.SelectedItem to the "{Binding}" value.  You would have to watch for value changes on PopupContent or in your view-model to detect when it changes.

I'm sorry - I can't work that out. Could you provide a code fragment?

I think you're saying to amend the Content DataTemplate as so:

<DataTemplate x:Key="ColourPopupContentTemplate">
<Border Width="200">
<ribbon:ColorPickerGallery InitialColumnCount="10" HorizontalAlignment="Center" CanFilter="True" IsPreviewEnabled="True" DataContext="{Binding FormatStyle, ElementName=formatStyleView}" SelectedItem="{Binding}">

...

But I cant work out how to amend the PopupButton.PopupContent

Yes that is correct because the "{Binding}" in the PopupContentTemplate should be the PopupContent property value.

Back in your main XAML, you'd just do:

<shared:PopupButton PopupContent="{Binding FillColorArgb, Mode=TwoWay, Converter={StaticResource StringColorConverter}}" ...>

By the way, please use the "Insert/edit code sample" toolbar button when inserting code snippets since it makes them a lot easier to read, with proper line feeds and syntax highlighting.  Thanks!

OK - we're getting closer. The code now looks a bit like this:

            <DataTemplate x:Key="ColourPopupContentTemplate">
                <Border Width="200">
                    <ribbon:ColorPickerGallery InitialColumnCount="10" HorizontalAlignment="Center" CanFilter="True" IsPreviewEnabled="True" SelectedItem="{Binding Path=., Mode=TwoWay}"  >
                        <ribbon:ColorPickerGallery.CategorizedItemsSource>
                            <x:Array Type="{x:Type media:SolidColorBrush}">
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#FFFFFF" ribbon:ScreenTipService.ScreenTipHeader="White" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#000000" ribbon:ScreenTipService.ScreenTipHeader="Black" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#EEECE1" ribbon:ScreenTipService.ScreenTipHeader="Tan" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#1F497D" ribbon:ScreenTipService.ScreenTipHeader="Dark Blue" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#4F81BD" ribbon:ScreenTipService.ScreenTipHeader="Blue" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#C0504D" ribbon:ScreenTipService.ScreenTipHeader="Red" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#9BBB59" ribbon:ScreenTipService.ScreenTipHeader="Olive Green" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#8064A2" ribbon:ScreenTipService.ScreenTipHeader="Purple" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#4BACC6" ribbon:ScreenTipService.ScreenTipHeader="Aqua" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#F79646" ribbon:ScreenTipService.ScreenTipHeader="Orange" />
                                <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>
                </Border>
            </DataTemplate>

In that code SelectedItem="{Binding}" had to become SelectedItem="{Binding Path=., Mode=TwoWay}" to prevent an application shutdown. To do with the TwoWay binding mode apparently.

I think it expects a SolidColorBrush as the type of the object being bound to.

Later on, I have my PopupButton which uses the template and looks like this

                    <shared:PopupButton Grid.Row="1" Grid.Column="2" Margin="10,10,0,0" Width="45" PopupContentTemplate="{StaticResource ColourPopupContentTemplate}" 
                                        HasDropShadow="True" themes:ThemeProperties.CornerRadius="3" Background="White" DataContext="{Binding FormatStyle, ElementName=formatStyleView}">
                        <shared:PopupButton.Content>
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Height="15" Width="15" Fill="{Binding GalleryColorArgb, Mode=TwoWay, Converter={StaticResource StringColorConverter}}" />
                            </StackPanel>
                        </shared:PopupButton.Content>
                    </shared:PopupButton>

This is bound to the DataContext which has a property GalleryColorArgb which should provide the string which is then converted to a colour brush. For reference I did try using the PopupContent property directly in the PopupButton as below 

<shared:PopupButton PopupContent="{Binding GalleryColorArgb, Mode=TwoWay, Converter={StaticResource StringColorConverter}}" ...>

In any case, both ways of doing the PopupContent, fail.

I'm unclear as to how the Tenplate using {Binding Path=.} would know to use the GalleryColorArgb property of the DataContext, so I tried amending the binding in the ColourPopupContentTemplate to {Binding Path=GalleryColorArgb} in the hope that that would hit the property - but no joy with that either.

Many thanks for your help - sorry to take up so much time.

Hi Daniel,

The ColorPickerGallery can be a little tricky to work with since its item template is using Brush values defined as the actual items.  I don't believe SolidColorBrush in WPF defines an Equals override, so it's important for you to either use one of the Brush values in the CategorizedItemsSource as the SelectedItem or the selection won't be made properly. 

Therefore it's probably best to bind the CategorizedItemsSource property value as well, instead of defining it in XAML.  Perhaps maintain a static pool of Brush values somewhere in your code that you can supply as the CategorizedItemsSource collection, as well as can pull from in your value converter.  If you design that Brush pool object so it has a method to look through its known Brushes for a specific Color value pass, you can then make sure everything is in sync so that setting the selection uses one of those pooled Brush objects and selection functions properly.

I hope that helps!

The problem is more in the other direction: when you select the item in the picker, the value isn't coming through to the GalleryColorArgb in the PopupButton.

It's hard to say what's happening in your scenario, but I did a test here and the SelectedItem does bind back to a binding source fine.  In this example, clicking on a color will show the color value in the Button:

<Button x:Name="button" DockPanel.Dock="Top" />
<ribbon:ColorPickerGallery DockPanel.Dock="Top" SelectedItem="{Binding ElementName=button, Path=Content, Mode=TwoWay}">
  <ribbon:ColorPickerGallery.CategorizedItemsSource>
    <x:Array Type="SolidColorBrush">
       <SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#FFFFFF" ribbon:ScreenTipService.ScreenTipHeader="White" />
       ...
    </x:Array>
  </ribbon:ColorPickerGallery.CategorizedItemsSource>
</ribbon:ColorPickerGallery>

I have that version working but you need to wrap that into a DataTemplate if you want to reuse the code in multiple places.

I've placed an example VisualStudio project for you to download here which exhibits the problem.

Thanks

Hi Daniel,

Thanks for the sample.  I think the problem here is that a two-way binding with "{Binding Path=., Mode=TwoWay}" doesn't seem to update the actual bound value.  My guess is that two-way bindings need to have a parent object frame of reference, and "Path=." doesn't provide one.

Whereas if your shared:PopupButton.PopupContent passes "{Binding}" (instead of "{Binding BackColorArgb, Mode=TwoWay}"), then you can update your DataTemplate property to be SelectedItem="{Binding Path=BackColorArgb, Mode=TwoWay}".  That does update the Brush value correctly.

Yes, you're right, the SolidColorBrush's need to be wrapped in some holding view model. For the benefit of those that follow, my working xaml looks like this:

<Window x:Class="GalleryTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:media="clr-namespace:System.Windows.Media;assembly=PresentationCore"
        xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
        xmlns:themes="http://schemas.actiprosoftware.com/winfx/xaml/themes"
        xmlns:ribbon="http://schemas.actiprosoftware.com/winfx/xaml/ribbon"
        xmlns:local="clr-namespace:GalleryTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="150" Width="300">
    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="ColourPopupContentTemplate">
                <Border Width="200">
                    <ribbon:ColorPickerGallery InitialColumnCount="10" HorizontalAlignment="Center" CanFilter="True" IsPreviewEnabled="True" SelectedItem="{Binding Path=GalleryColorArgb, Mode=TwoWay}">
                        <ribbon:ColorPickerGallery.CategorizedItemsSource>
                            <x:Array Type="{x:Type media:SolidColorBrush}">
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#FFFFFF" ribbon:ScreenTipService.ScreenTipHeader="White" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#000000" ribbon:ScreenTipService.ScreenTipHeader="Black" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#EEECE1" ribbon:ScreenTipService.ScreenTipHeader="Tan" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#1F497D" ribbon:ScreenTipService.ScreenTipHeader="Dark Blue" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#4F81BD" ribbon:ScreenTipService.ScreenTipHeader="Blue" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#C0504D" ribbon:ScreenTipService.ScreenTipHeader="Red" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#9BBB59" ribbon:ScreenTipService.ScreenTipHeader="Olive Green" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#8064A2" ribbon:ScreenTipService.ScreenTipHeader="Purple" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#4BACC6" ribbon:ScreenTipService.ScreenTipHeader="Aqua" />
                                <media:SolidColorBrush ribbon:PopupGallery.Category="Subtle Colors" ribbon:ColorPickerGallery.LayoutBehavior="Shaded" Color="#F79646" ribbon:ScreenTipService.ScreenTipHeader="Orange" />
                                <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>
                </Border>
            </DataTemplate>

        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,0,0,0">
            <TextBlock Text="Forecolor:" />
            <shared:PopupButton Margin="10,0,0,0" Width="45" PopupContentTemplate="{StaticResource ColourPopupContentTemplate}"
                                            PopupContent="{Binding ForeColorWrapper}"
                                        HasDropShadow="True" themes:ThemeProperties.CornerRadius="3" Background="White" />
            <Border BorderBrush="Black" BorderThickness="1" Margin="10,10,0,0" Height="20" Width="20">
                <Rectangle Height="15" Width="15" Fill="{Binding ForeColorWrapper.GalleryColorArgb}" />
            </Border>

        </StackPanel>

        <StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,0,0,0">
            <TextBlock Text="Backcolor:" />
            <shared:PopupButton Margin="10,0,0,0" Width="45"  PopupContentTemplate="{StaticResource ColourPopupContentTemplate}"
                                            PopupContent="{Binding BackColorWrapper}"
                                        HasDropShadow="True" themes:ThemeProperties.CornerRadius="3" Background="White" />
            <Border BorderBrush="Black" BorderThickness="1" Margin="10,10,0,0" Height="20" Width="20">
                <Rectangle Height="15" Width="15" Fill="{Binding BackColorWrapper.GalleryColorArgb}" />
            </Border>

        </StackPanel>
    </Grid>
</Window>