根据视图模型属性绑定更改 MenuItem header 和图标

Question

我不知道该怎么做，有人会认为这很简单。

我有一个 MenuItem，它是 ContextMenu 的一部分。我在视图模型上有一个 binding 到一个布尔值属性。根据此属性的状态，我希望 MenuItem 的 header 文本和图标发生变化。

我当然可以为此使用 IValueConverter，但我确信有一个使用 DataTemplate 和触发器的更优雅的解决方案。我只是想不出合适的标记。

我编写的代码（在下面截取）有两个问题：一个是 HeaderTemplate 似乎不包含图标，所以 MenuItems 的文本包含图标同样（通常图标出现在左侧部分 - 请参见图像并与复制和清除菜单项进行比较）。此外，单击 MenuItem 不会触发 DataTemplate 更改（请注意命令有效，viewmodel 绑定实际上会切换 true/false 状态）。

   <ContextMenu>
            <MenuItem Command="{Binding Source={x:Static cmd:Commands.PauseCommand}}"
                      CommandParameter="{Binding}">
                <MenuItem.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image x:Name="img" Source="../Icons/pause.png"/>
                            <TextBlock x:Name="txt" Text="Pause"/>
                        </StackPanel>
                        <DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding IsPaused}" Value="True" >
                                <Setter Property="Image.Source" Value="../Icons/play.png" TargetName="img"/>
                                <Setter Property="Text" Value="Play" TargetName="txt"/>
                            </DataTrigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </MenuItem.HeaderTemplate>
            </MenuItem>

Answer 1

你是说这样？不要让事情变得比现在更难 ;)

<ContextMenu>
                        <MenuItem Command="{Binding Source={x:Static cmd:Commands.PauseCommand}}"
                  CommandParameter="{Binding}">
                            <MenuItem.Style>
                                <Style TargetType="MenuItem">
                                    <Setter Property="Icon" Value="../Icons/play.png>"></Setter>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsPaused, Mode=OneWay}" Value="True">
                                            <Setter Property="Icon" Value="../Icons/pause.png"></Setter>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </MenuItem.Style>
                        </MenuItem>
                    </ContextMenu>

根据视图模型属性绑定更改 MenuItem header 和图标

Change MenuItem header and icon based on viewmodel property binding

wpf

datatrigger

datatemplate

menuitem

根据视图模型 属性 绑定更改 MenuItem header 和图标

Change MenuItem header and icon based on viewmodel property binding

wpf

datatrigger

datatemplate

menuitem

根据视图模型属性绑定更改 MenuItem header 和图标