Question

我有一个MVVM风格的菜单，使用2个视图模型和样式：

完成

视图模型：

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>

我将我（顶部）menuitem的项目绑定到CommandViewModel列表，CommandViewModel可以有子节点，Header，Command，CommandParameter等... IsOpen Prop适用于我在ContextMenus中使用它的情况，而不是这里的情况。

到目前为止，这项工作非常有效。

现在我想为每个条目添加和图标。我想我可以在我的Style中添加一个HeaderTemplate，它显示了Icon和Header文本，但它不起作用，没有任何显示。

这是我添加到样式中的HeaderTemplate设置器：

    <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的“Icon”属性。将HeaderTemplate添加到样式后，菜单条目不显示文本，也不显示任何图标。我知道应用了HeaderTemplate，因为如果我增加图标ContentControl的宽度（例如从26增加到260），我的菜单会变得更宽。这意味着我在HeaderTemplate中遇到了绑定问题。

有没有人看到这个问题？

Answer 1

图标和标题的绑定不在可视树中，在那里可以轻松访问datacontext（所需的那个，它继承了VM 的数据上下文）和其他项目。绑定将需要是相对源路径。

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

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

在MVVM菜单中绑定HeaderTemplate

1 个答案: