Outside Property inside a DataTemplate WPF

Question

Scenario: I have a ListBox and the ListBoxItems have a DataTemplate. What I want to do is put a ContextMenu in the DataTemplate. The catch is that I want this ContextMenu ItemsSource to be different depending on certain properties in the window. My initial thought is that I could just bind the ItemsSource to a Property in the window and that would return an ItemsSource; however, I cant seem to bind to this property correctly. I believe this is because I am in the DataTemplate and consequently the DataContext (I believe that is the right word) is of that ListBoxItem and not of the window. How could I get the ContextMenu that is inside a DataTemplate to bind to a Property outside of the DataTemplate.

Answer 1

This might be a good candidate for an AttachedProperty. Basically what you would do is wrap your ContextMenu in a UserControl and then add a Dependency Property to the UserControl. For example:

MyContextMenu.xaml

<UserControl x:Class="MyContextMenu" ...>
  <UserControl.Template>
    <ContextMenu ItemSource="{Binding}" />
  </UserControl.Template>
</UserControl>

MyContextMenu.xaml.cs

public static readonly DependencyProperty MenuItemsSourceProperty = DependencyProperty.RegisterAttached(
  "MenuItemsSource",
  typeof(Object),
  typeof(MyContextMenu),
  new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender)
);
public static void SetMenuItemsSource(UIElement element, Boolean value)
{
  element.SetValue(MenuItemsSourceProperty, value);
  // assuming you want to change the context menu when the mouse is over an element.
  // use can use other events.  ie right mouse button down if its a right click menu.
  // you may see a perf hit as your changing the datacontext on every mousenter.
  element.MouseEnter += (s, e) => {
    // find your ContextMenu and set the DataContext to value
    var window = element.GetRoot();
    var menu = window.GetVisuals().OfType<MyContextMenu>().FirstOrDefault();
    if (menu != null)
      menu.DataContext = value;
  }
}
public static Object GetMenuItemsSource(UIElement element)
{
  return element.GetValue(MenuItemsSourceProperty);
}

Window1.xaml

<Window ...>
  <Window.Resources>
    <DataTemplate TargetType="ListViewItem">
      <Border MyContextMenu.MenuItemsSource="{Binding Orders}">
        <!-- Others -->
      <Border>
    </DataTemplate>
  </Window.Resources>
  <local:MyContextMenu />
  <Button MyContextMenu.MenuItemsSource="{StaticResource buttonItems}" />
  <ListView ... />
</Window>

VisualTreeHelpers

public static IEnumerable<DependencyObject> GetVisuals(this DependencyObject root)
{
    int count = VisualTreeHelper.GetChildrenCount(root);
    for (int i = 0; i < count; i++)
    {
        var child = VisualTreeHelper.GetChild(root, i);
        yield return child;
        foreach (var descendants in child.GetVisuals())
        {
            yield return descendants;
        }
    }
}

public static DependencyObject GetRoot(this DependencyObject child)
{
    var parent = VisualTreeHelper.GetParent(child)
    if (parent == null)
      return child;
    return parent.GetRoot();
}

This example is un-tested I'll take a look later tonight and make sure its accurate.

Answer 2

You can get the DataContext from your window by using the RelativeSource FindAncestor syntax

<DataTemplate>
  <TextBlock Text="{Binding MyInfo}">
    <TextBlock.ContextMenu>
      <Menu ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.MyContextMenuItems}"/>
    </TextBlock.ContextMenu>
  </TextBlock>
</DataTemplate>

Not totally sure, but the binding is correct... If your DataContext is on another object type, you just have to change the AncestorType (eg. by UserControl).