如何将 Button.ContextMenu 的 DataContext 设置为与 Button 相同？

Question

<Button Content="{Binding Type}" Name="Ellipsis" Tag="{Binding ElementName=Ellipsis, Path=DataContext}">
    <Button.ContextMenu>
          <ContextMenu x:Name="MainContextMenu" DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
              <MenuItem Header="{Binding Type}"/>
          </ContextMenu>
    </Button.ContextMenu>
    <Button.Triggers>
          <EventTrigger SourceName="Ellipsis" RoutedEvent="Button.Click">
              <BeginStoryboard>
                  <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainContextMenu" Storyboard.TargetProperty="(ContextMenu.IsOpen)">
                         <DiscreteObjectKeyFrame KeyTime="0:0:0">
                             <DiscreteObjectKeyFrame.Value>
                                 <sys:Boolean>True</sys:Boolean>
                             </DiscreteObjectKeyFrame.Value>
                         </DiscreteObjectKeyFrame>
                      </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
              </BeginStoryboard>
          </EventTrigger>
     </Button.Triggers>
</Button>

如上所示， Button.Content="{Binding Type}"工作正常，但当它进入其 ContextMenu 时，DataContext 发生变化，导致MenuItem Header="{Binding Type}"无法工作。 我在网上进行了研究，有人说将外部 DataContext 保存在标记中并将其用作内部 DataContext。 我在我的代码中尝试过，但 ContextMenu 仍然没有读取正确的 DataContext。 在这种情况下，MenuItem Header 应该与 Button.Content 相同，但事实并非如此。 我应该怎么办？

Answer 1

回答问题的数据上下文部分。

一种方法是确保您的上下文菜单与按钮具有相同的数据上下文，将上下文菜单定义为资源。

<Grid.Resources>
     <ContextMenu x:Key="MainContextMenu">
          <MenuItem Header="{Binding Type}"/>
      </ContextMenu>
</Grid.Resources>
<Button ContextMenu="{StaticResource MainContextMenu}"

因为上下文菜单是在网格中实例化的，所以它继承了网格的数据上下文。

但是，如果没有代码，左键单击将不起作用。 没有按钮。

不确定为什么要左键单击以显示上下文菜单，但也许您可以考虑使用弹出窗口而不是上下文菜单。

您可以使用布尔动画为 isopen 设置动画

            <BooleanAnimationUsingKeyFrames Storyboard.TargetName="MyPopup" Storyboard.TargetProperty="(Popup.IsOpen)">
              <DiscreteBooleanKeyFrame Value="True" />
            </BooleanAnimationUsingKeyFrames>

或者您可以改用已选中 boolean 的切换按钮：

        <ToggleButton Content="{Binding Type}" 
                      x:Name="Ellipsis" />
        <Popup IsOpen="{Binding IsChecked, ElementName=Ellipsis, Mode=TwoWay}" 
               PlacementTarget="{Binding ElementName=Ellipsis}"
               DataContext="{Binding DataContext, ElementName=Ellipsis}" 
               StaysOpen="False">
            <ListBox>
                <MenuItem Header="{Binding Type}"/>
            </ListBox>
        </Popup>

好的，可能需要做更多的工作，但是我的弹出窗口出现了并且有正确的数据上下文：