WPF自定义MenuItem样式的实现方法

下面就是WPF自定义MenuItem样式的实现方法的完整攻略。

一、自定义菜单项的样式

1.1 添加菜单项

在XAML文件中添加Menu控件，并在里面添加MenuItem。例如：

<Menu>
    <MenuItem Header="文件"/>
    <MenuItem Header="编辑"/>
</Menu>

1.2 自定义样式

通过修改MenuItem的样式可以实现自定义效果。首先需要复制默认的样式，然后进行修改。可以通过Visual Studio自带的样式编辑器来完成，也可以手动编写样式。

以下是手写MenuItem样式的示例：

<Style TargetType="{x:Type MenuItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="8 4"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <Border x:Name="menuItemBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                    <Grid>
                        <ContentPresenter x:Name="menuItemPresenter" ContentSource="Header" RecognizesAccessKey="True" VerticalAlignment="Center"/>
                        <Popup x:Name="menuItemPopup" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
                               Placement="Right" VerticalOffset="-1">
                            <Border x:Name="submenuBorder" Background="White" BorderBrush="Black" BorderThickness="1">
                                <ScrollViewer x:Name="submenuScrollViewer" Background="White" ScrollViewer.CanContentScroll="True"
                                              ScrollViewer.PanningMode="Both" RenderTransformOrigin="0.5 0.5">
                                    <StackPanel IsItemsHost="True"/>
                                </ScrollViewer>
                            </Border>
                        </Popup>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted" Value="True">
                        <Setter Property="Background" TargetName="menuItemBorder" Value="LightBlue"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="Gray"/>
                    </Trigger>
                    <Trigger Property="IsSubmenuOpen" Value="True">
                        <Setter Property="Background" TargetName="menuItemBorder" Value="LightGray"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

1.3 应用自定义样式

将定义好的样式应用到菜单项上。例如：

<Menu>
    <MenuItem Header="文件" Style="{StaticResource menuItemStyle}"/>
    <MenuItem Header="编辑" Style="{StaticResource menuItemStyle}"/>
</Menu>

二、自定义MenuItem图标

2.1 添加图标

为了让菜单项显示图标，首先需要为菜单项添加图标资源。图标通常存储在一个Image文件中或者是嵌入在应用程序的资源文件中。

在XAML文件中使用Image元素添加图标。例如：

<Menu>
    <MenuItem Header="文件" Style="{StaticResource menuItemStyle}">
        <MenuItem.Icon>
            <Image Source="Icons/file_icon.png" Width="16" Height="16"/>
        </MenuItem.Icon>
    </MenuItem>
    <MenuItem Header="编辑" Style="{StaticResource menuItemStyle}">
        <MenuItem.Icon>
            <Image Source="Icons/edit_icon.png" Width="16" Height="16"/>
        </MenuItem.Icon>
    </MenuItem>
</Menu>

2.2 绑定图标

以上方法可以实现简单的图标显示，但是如果需要动态绑定图标资源，需要进行如下修改：

<Menu>
    <MenuItem Header="文件" Style="{StaticResource menuItemStyle}" Command="{Binding OpenFileCommand}">
        <MenuItem.Icon>
            <Image Source="{Binding FileIcon}" Width="16" Height="16"/>
        </MenuItem.Icon>
    </MenuItem>
    <MenuItem Header="编辑" Style="{StaticResource menuItemStyle}" Command="{Binding EditFileCommand}">
        <MenuItem.Icon>
            <Image Source="{Binding EditIcon}" Width="16" Height="16"/>
        </MenuItem.Icon>
    </MenuItem>
</Menu>

修改后，可以通过ViewModel中的FileIcon和EditIcon属性来动态绑定图标资源。

结束了，以上就是自定义MenuItem样式的实现方法的完整攻略。

阅读剩余 59%