WPF 自定義MenuItem樣式

一、前言

預設的MenuItem樣式比較普通，這次自定義MenuItem的樣式也隻是對MenuItem的顔色風格進行變化。需要其他功能的變化，大家可以根據樣式代碼進行擴充。

MenuItem的樣式代碼：

<!--MenuItem-->
        <Style TargetType="MenuItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="MenuItem">
                        <Grid ToolTip="{TemplateBinding Header}" Height="24" Background="#FBFBFD" Width="{TemplateBinding Width}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30" />
                                <ColumnDefinition Width="*" MinWidth="80"/>
                            </Grid.ColumnDefinitions>
                            <Border Background="#EBEBED"/>
                            <Border x:Name="_border"   Grid.ColumnSpan="2"/>
                            <Image x:Name="_imgicon" Width="12" Height="12" Stretch="Uniform" Source="{Binding Icon,RelativeSource={RelativeSource TemplatedParent}}" />
                            <TextBlock Foreground="#2D2D30" Grid.Column="1" Margin="5 0 15 0"  VerticalAlignment="Center" x:Name="_txt" Text="{Binding Header,RelativeSource={RelativeSource TemplatedParent}}" />
                            <Path  Visibility="Collapsed" x:Name="_path" Grid.Column="1" HorizontalAlignment="Right"  Margin="5 13 5 0"   Data="M0,4 4,0 0,-4 z" Fill="#7E8A92"/>
                            <Popup  Placement="Right" x:Name="SubMenuPopup" AllowsTransparency="True"   Focusable="False" IsOpen="{TemplateBinding IsSubmenuOpen}" >
                                <ScrollViewer   ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                                    <Border Background="#ffc787" Name="SubmenuBorder" BorderBrush="LightGray" BorderThickness="1"  SnapsToDevicePixels="True"    >
                                        <StackPanel   IsItemsHost="True"   KeyboardNavigation.DirectionalNavigation="Cycle" />
                                    </Border>
                                </ScrollViewer>
                            </Popup>

                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="HasItems" Value="true">
                                <Setter TargetName="_path" Property="Visibility" Value="Visible"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="_border" Property="Background" Value="#ffc787"/>
                                <Setter TargetName="_txt" Property="Foreground" Value="White"/>
                                <Setter TargetName="_path" Property="Fill" Value="White"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="_txt" Property="Foreground" Value="Gray"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>      

引用示例：

<Grid>
            <Grid.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="菜單一">
                        <MenuItem Header="子菜單"/>
                    </MenuItem>
                    <MenuItem Header="菜單二"></MenuItem>
                </ContextMenu>

            </Grid.ContextMenu>
        </Grid>      

顯示效果：

所有代碼已經上傳到github：https://github.com/cmfGit/WpfDemo.git

作者：一葉知秋

出處：http://www.cnblogs.com/xiaomingg/

GitHub：https://github.com/caomfan/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須在文章頁面給出原文連接配接，否則保留追究法律責任的權利。