Custom Control ContextMenu ItemSource doesn't update when bound DependencyProperty is set

Question

I have created a custom control with a style. Everything is working fine but the ContextMenu I'm trying to add doesn't show any items.

ButtonAnalysisControl (Custom Control)

internal class ButtonAnalysisControl : Control
{
    static ButtonAnalysisControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ButtonAnalysisControl), new FrameworkPropertyMetadata(typeof(ButtonAnalysisControl)));
    }

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public Brush BackgroundBrush
    {
        get { return (Brush)GetValue(BackgroundBrushProperty); }
        set { SetValue(BackgroundBrushProperty, value); }
    }

    public ObservableCollection<ViewCommand> ChildCommands
    {
        get { return (ObservableCollection<ViewCommand>)GetValue(ChildCommandsProperty); }
        set { SetValue(ChildCommandsProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(ButtonAnalysisControl), new UIPropertyMetadata(string.Empty));

    public static readonly DependencyProperty BackgroundBrushProperty =
        DependencyProperty.Register("BackgroundBrush", typeof(Brush), typeof(ButtonAnalysisControl), new UIPropertyMetadata(Brushes.Transparent));

    public static readonly DependencyProperty ChildCommandsProperty =
        DependencyProperty.Register("ChildCommands", typeof(ObservableCollection<ViewCommand>), typeof(ButtonAnalysisControl), new UIPropertyMetadata(null));

}

Generic.xaml (ButtonAnalysisControl style)

<Style TargetType="anal:ButtonAnalysisControl">

    <Style.Triggers>
        <EventTrigger RoutedEvent="MouseDown">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="ContextMenu.IsOpen">
                            <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True"/>
                        </BooleanAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="anal:ButtonAnalysisControl">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

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

                    <TextBlock TextAlignment="Center"
                               VerticalAlignment="Stretch" 
                               Foreground="{StaticResource CommandBarForeground}" 
                               Background="{StaticResource MainForegroundBrush}"
                               FontFamily="{StaticResource FontFamily}"
                               FontSize="10"
                               Grid.Column="0" 
                               Grid.Row="0">
                        <TextBlock.Text>
                            <Binding Path="Text" StringFormat="{}{0}%" RelativeSource="{RelativeSource TemplatedParent}" />
                        </TextBlock.Text>                            
                    </TextBlock>
                    <Rectangle Grid.Column="0" 
                               Grid.Row="1">
                        <Rectangle.Fill>
                            <Binding Path="BackgroundBrush" RelativeSource="{RelativeSource TemplatedParent}" />
                        </Rectangle.Fill>
                    </Rectangle>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Setter Property="ContextMenu">
        <Setter.Value>
            <ContextMenu>
                <ContextMenu.ItemsSource>
                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="ChildCommands"/>
                </ContextMenu.ItemsSource>
                <ContextMenu.ItemContainerStyle>
                    <Style TargetType="{x:Type MenuItem}">
                        <Setter Property="MenuItem.Header" Value="{Binding Command.Text}"/>
                    </Style>
                </ContextMenu.ItemContainerStyle>
            </ContextMenu>
        </Setter.Value>
    </Setter>
</Style>

ButtonAnalysisControls are created at runtime and they are set as the content of an adorner (this happens in the constructor of the adorner). Relevant code:

public ButtonAnalysisAdorner(UIElement adornedElement, int numberOfTimesFieldFilled, int numberOfLoggedViews, ObservableCollection<ViewCommand> childCommands)
        : base(adornedElement)
    {
        _visuals = new VisualCollection(this);
        _contentPresenter = new ContentPresenter();
        ButtonAnalysisControl bac = new ButtonAnalysisControl();
        bac.Text = percentage.ToString(CultureInfo.InvariantCulture);
        bac.BackgroundBrush = PercentColorRanges.GetColorFromPercentage((int)percentage, 0.75);
        bac.ToolTip = ToolTipValue(numberOfTimesFieldFilled, numberOfLoggedViews);
        bac.ChildCommands = childCommands;
        Content = bac;

        _visuals.Add(_contentPresenter);
    }

I inspected ButtonAnalysisControl with Snoop. ChildCommands doesn't always have items. But I looked at a ButtonAnalysisControl from which I know it has ChildCommands. I saw that the ChildCommands dependency property had a collection with two items and ButtonAnalysisControl.ContextMenu.Items had value: 0. I don't know why the contextmenu doesn't have any items, I want the contextmenu to be bound with ChildCommands. How to fix this?

Answer 1

I don't think the Templated Parent binding will work like you want it to. The ContextMenu definition isn't in a template.

You could try something like this:

<Style TargetType="anal:ButtonAnalysisControl">
    ...    
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="anal:ButtonAnalysisControl">
                <Grid Background="Transparent" Tag="{Binding ChildCommands,RelativeSource={RelativeSource TemplatedParent}}">
                    <Grid.ContextMenu>
                        <ContextMenu ItemsSource="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
    ...

A couple of notes here:

• Any popup breaks the DataContext inheritance, that's why we're going through the Tag property
• the grids background is transparent so it will handle clicks
• you will probably have to rearrange your MouseDown trigger as well to be in the template
• 'anal'-namespace??