Want to add event handler to PopupContentTemplate using style

WPF Studio, Themes, and Shared Library for WPF Forum

Posted 2 years ago by Daniel Graham
Version: 22.1.2
Avatar

Hi There,

My app has two PopupMenu buttons to allow color picking - one for foreground one for back. So I created a reusable DataTemplate for the gallery like so:

<DataTemplate x:Key="ColourPopupContentTemplate">
<Border Width="200">
<ribbon:ColorPickerGallery InitialColumnCount="10" HorizontalAlignment="Center" CanFilter="True" IsPreviewEnabled="True">
<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>

I then want to reuse this in each of my PopupMenu's, for example like this (the interesting bit, being the PopupContentTemplate which allows me to pick up the DataTemplate above:

<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">
<shared:PopupButton.Content>
<StackPanel Orientation="Horizontal">
<Rectangle Height="15" Width="15" Fill="{Binding FillColorArgb, Mode=TwoWay}" />
</StackPanel>
</shared:PopupButton.Content>
</shared:PopupButton>

This all works.

However - I now want to add a different event handler for each PopupButton as one interacts with the foreground and the other with the background.

I hoped I might be able to do something like this:

<shared:PopupButton.Style>
<Style TargetType="{x:Type ribbon:ColorPickerGallery}">
<EventSetter Event="ItemClick" Handler="FillColorChanged" />
<EventSetter Event="SelectedItem" Handler="{Binding FillColorArgb, Mode=TwoWay, Converter={StaticResource StringColorConverter}}" />
</Style>
</shared:PopupButton.Style>

However - Visual Studio / WPF doesn't like it - giving me the error "'ColorPickerGallery' TargetType does not match type of element 'PopupButton'"

Any idea how I could style the PopupContentTemplate from this location? If I can fix that, the rest works.

Thanks

[Modified 2 years ago]

Comments (10)

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

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.


Actipro Software Support

Posted 2 years ago by Daniel Graham
Avatar

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

[Modified 2 years ago]

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

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!


Actipro Software Support

Posted 2 years ago by Daniel Graham
Avatar

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.

[Modified 2 years ago]

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

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!


Actipro Software Support

Posted 2 years ago by Daniel Graham
Avatar

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.

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

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>


Actipro Software Support

Posted 2 years ago by Daniel Graham
Avatar

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

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

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.


Actipro Software Support

Answer - Posted 2 years ago by Daniel Graham
Avatar

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>
The latest build of this product (v24.1.1) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.