MVVM菜单中的绑定头模板

本文关键字：绑定 菜单 MVVM | 更新日期: 2023-09-27 18:00:54

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

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>

我将(顶部(菜单项的项绑定到CommandViewModels列表，该列表可以有子项、Header、Command、CommandParameter等。。。当我将IsOpen Prop与ContextMenus一起使用时，它是适用的，但这里的情况并非如此。

到目前为止，这一切都很顺利。

现在我想在每个条目中添加和Icon。我想我可以在我的样式中添加一个HeaderTemplate，它显示图标和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中的绑定有问题。

有人看到问题了吗？

MVVM菜单中的绑定头模板

图标和标头的绑定不在可视化树中，在可视化树上可以轻松访问数据上下文(所需的通过VM继承数据上下文的绑定(和其他项。绑定将需要是一个相对源路径。

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

Text="{Binding Header, 
               RelativeSource={RelativeSource FindAncestor,
                               AncestorType={x:Type Page}}}"/>
相关文章：