c# - 绑定(bind)MVVM菜单中的HeaderTemplate

我有一个MVVM样式菜单，它使用2个 View 模型和一种样式完成:

ViewModel:

public class CommandViewModel : ViewModelBase
{
    private bool _isOpen;
    private IEnumerable<object> _items;
    private UIElement _placementTarget;



    /// <summary>
    /// the command itself
    /// </summary>
    public ICommand Command { get; set; }

    /// <summary>
    /// parameter object for the command
    /// </summary>
    public Object CommandParameter { get; set; }

    /// <summary>
    /// header string for the command, e.g. in menus
    /// </summary>
    public string Header { get; set; }

    /// <summary>
    /// oprional Tooltip for the command, e.g. on buttons
    /// </summary>
    public string Tooltip { get; set; }

    /// <summary>
    /// optional icon for the command, e.g. on buttons or in menus
    /// </summary>
    public ControlTemplate Icon { get; set; }


    /// <summary>
    /// optional item list. e.g. submenu entries.
    /// For a submenu set the command to null and fill the Items list with CommandViewModels or other ViewModels you have a template for
    /// </summary>
    public IEnumerable<Object> Items
    {
        get { return _items; }
        set
        {
            _items = value;
            Command = new RelayCommand<UIElement>((param) =>
            {
                PlacementTarget = param;
                IsOpen = true;
            });
        }
    }


    public bool IsOpen
    {
        get
        {
            return _isOpen;
        }
        set
        {
            _isOpen = value;
            RaisePropertyChanged(() => IsOpen);
        }
    }


    public virtual bool IsSeparator { get { return false; } }


    public UIElement PlacementTarget
    {
        get { return _placementTarget; }
        set
        {
            _placementTarget = value;
            RaisePropertyChanged(() => PlacementTarget);
        }
    }
}

分隔器:

public class SeparatorViewModel : CommandViewModel
{
    public override bool IsSeparator
    {
        get { return true; }
    }
}

风格:

<Style TargetType="MenuItem" BasedOn="{StaticResource {x:Type MenuItem}}" x:Key="MvvmMenuItemStyle">
    <Setter Property="Header" Value="{Binding Header}"/>
    <Setter Property="ItemsSource" Value="{Binding Items}"/>
    <Setter Property="Command" Value="{Binding Command}"/>
    <Setter Property="CommandParameter" Value="{Binding CommandParameter}"/>
    <Setter Property="ToolTip" Value="{Binding Tooltip}"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsSeparator}" Value="true">
            <DataTrigger.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Rectangle Height="1" Fill="{StaticResource WindowButtonsBackground}" Margin="3,5"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger.Setters>
        </DataTrigger>
    </Style.Triggers>
</Style>

用法:

<MenuItem Header="Device" ItemsSource="{Binding DevicesMenu}" Visibility="{Binding IsDevicesMenuVisible, Converter={StaticResource BoolToVisConverter}}">
    <MenuItem.Resources>
        <Style TargetType="MenuItem" BasedOn="{StaticResource MvvmMenuItemStyle}"/>
    </MenuItem.Resources>
</MenuItem>

我将(顶部)菜单项的项目绑定(bind)到CommandViewModels列表，该列表可以具有子级， header ，命令，CommandParameter等。
IsOpen Prop适用于我与ContextMenus一起使用的情况，在此情况并非如此。

到目前为止，这一直很好。

现在，我想向每个条目添加和图标。我以为我可以在样式中添加一个HeaderTemplate，以显示图标和Header文本，但是它不起作用，什么也没显示。

这是我添加到样式中的HeaderTemplate setter:

    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <ContentControl Template="{Binding Icon}" Width="26"/>
                    <TextBlock Text="{Binding  Header}" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>

注意:我的图标是ControlTemlates，在XAML中包含矢量图形，因此我不能使用MenuItem的“图标”属性。一旦将HeaderTemplate添加到样式中，菜单项就不会显示文本，也不会显示图标。我知道应用了HeaderTemplate，因为如果我增加了ContentControl图标的宽度(例如，从26到260)，我的菜单就会变宽。这意味着我在HeaderTemplate中的绑定(bind)有问题。

有人看到这个问题吗？

最佳答案

图标和标题的绑定(bind)不在视觉树中，在视觉树中，可以轻松访问数据上下文(需要使用该上下文继承VM的数据上下文)和其他项。绑定(bind)将需要改为相对的源路径。

这是用于访问具有VM的主数据上下文的路径的近似值:

Text="{Binding Header,
               RelativeSource={RelativeSource FindAncestor,
                               AncestorType={x:Type Page}}}"/>

关于c# - 绑定(bind)MVVM菜单中的HeaderTemplate，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31188560/