WPF 非常漂亮 MenuItem模板 WPF漂亮导航栏 WPF MenuItem 漂亮界面源代码 可以直接使用的WPF漂亮界面

      WPF中的MenuItem控件是导航菜单的重要组成部分，它提供了丰富的定制选项以创建出吸引人的导航界面。通过自定义模板和样式，MenuItem可以展现出各种视觉效果，如渐变色、图标、鼠标悬停效果等。此外，MenuItem还支持子菜单和命令绑定，使得用户界面既美观又功能强大。

以下是一个实例，展示了如何创建一个具有自定义样式的漂亮MenuItem：

 

 

<ControlTemplate x:Key="SubmenuHeaderTemplateKey" TargetType="{x:Type MenuItem}">
            <Border CornerRadius="13" Background="{TemplateBinding Background}" BorderThickness="0" Margin="0 0 0 0" Padding="0">
                <Grid SnapsToDevicePixels="true" Margin="0 0 0 0">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="30"/>
                        </Grid.ColumnDefinitions>
                        <ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                        <Path Grid.Column="2" Width="16" Height="16" Stretch="Uniform"  Fill="#FFFFFF"
                          HorizontalAlignment="Left" Margin="0,0,20,0"/>
                    </Grid>
                    <Popup x:Name="PART_Popup" AllowsTransparency="true" HorizontalOffset="-1"
                       IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
                       PopupAnimation="Scroll" Placement="Right" VerticalOffset="0">
                        <Border Margin="0,0" CornerRadius="13" Background="#FFFFFF" BorderBrush="#5a5e66" BorderThickness="1" Width="auto">
                            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle"
                                        Grid.IsSharedSizeScope="true" Margin="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                        KeyboardNavigation.TabNavigation="Cycle"/>
                        </Border>
                    </Popup>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <!--<Condition Property="HasItems" Value="true"/>-->
                        <Condition Property="IsMouseOver" Value="true"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="IsSubmenuOpen" Value="true"/>
                    <Setter Property="Background" Value="#3D5CE3"/>
                    <Setter TargetName="PART_Popup" Property="IsOpen" Value="true"/>
                    <Setter Property="Foreground" Value="#FFFFFF"/>
                </MultiTrigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="HasItems" Value="true"/>
                        <Condition Property="IsChecked" Value="true"/>
                        <Condition Property="IsMouseOver" Value="true"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="IsSubmenuOpen" Value="true"/>
                    <Setter Property="Background" Value="#3D5CE3"/>
                    <Setter TargetName="PART_Popup" Property="IsOpen" Value="true"/>
                </MultiTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style TargetType="{x:Type MenuItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="#5a5e66"/>
            <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="Template" Value="{StaticResource SubmenuHeaderTemplateKey}"/>
            <!--<Style.Triggers>
                <Trigger Property="Role" Value="SubmenuHeader">
                    <Setter Property="Template" Value="{StaticResource SubmenuHeaderTemplateKey}"/>
                </Trigger>
            </Style.Triggers>-->
        </Style>

 <Border BorderBrush="#5a5e66" BorderThickness="1" CornerRadius="13" Margin="20 0 0 0">
                        <Menu BorderThickness="0" BorderBrush="Transparent" Background="Transparent" VerticalAlignment="Center" FontSize="14">
                            <MenuItem Header="GOOGLE">
                                <MenuItem Header="Android移动平台">
                                    <MenuItem Header="手机" />
                                <MenuItem Header="电视" />
                                <MenuItem Header="汽车" />
                            </MenuItem>
                               <MenuItem Header="Flutter前端开发" />
                                <MenuItem Header="GO后端开发" />
                                <MenuItem Header="Chrome浏览器"/>
                            </MenuItem>
                            <MenuItem Header="微软">
                                <MenuItem Header="Windows系统"/>
                                <MenuItem Header="Office办公系统"/>
                                <MenuItem Header="C#流行语言" />
                                <MenuItem Header="VSCode全功能IDE" />
                                <MenuItem Header="Sqlserver数据库" />
                            </MenuItem>
                            <MenuItem Header="小米" >
                                <MenuItem Header="汽车"  />
                                <MenuItem Header="手机" />
                                <MenuItem Header="电视"/>
                                <MenuItem Header="平板电脑"/>
                            </MenuItem>
                            <MenuItem Header="退出"  />
                        </Menu>
                    </Border>