WPF MenuItem In Binding's world

WPF MenuItem In Binding’s world

自定義Menu樣式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


    <!--菜單中的顏色畫刷-->
    <SolidColorBrush x:Key="MenuMouseOverBrush" Color="#FF142F37"></SolidColorBrush>
    <SolidColorBrush x:Key="MenuBackgroundBrush" Color="#FF0D171B"></SolidColorBrush>
    <SolidColorBrush x:Key="MenuBorderBrush" Color="#FF9FB3B6"></SolidColorBrush>
    <SolidColorBrush x:Key="MenuForegroundBrush" Color="#FFD6FAFE"></SolidColorBrush>

    <!--菜單中小三角的顏色-->
    <SolidColorBrush x:Key="ArrowBrush" Color="#FF45BCDD"></SolidColorBrush>
    <SolidColorBrush x:Key="ArrowOpenBrush" Color="#007acc"></SolidColorBrush>

    <!--MenuStyle-->
    <Style x:Key="MenuStyle" TargetType="Menu">
        <Setter Property="Foreground" Value="{DynamicResource MenuForegroundBrush}"></Setter>
        <Setter Property="Height" Value="25"></Setter>
        <Setter Property="Background" Value="{DynamicResource MenuBackgroundBrush}"></Setter>
        <Setter Property="BorderThickness" Value="0"></Setter>
        <Setter Property="BorderBrush" Value="Transparent"></Setter>
        <Setter Property="Margin" Value="0"></Setter>
        <Setter Property="FontSize" Value="12"></Setter>
        <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
        <Setter Property="SnapsToDevicePixels" Value="True"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Menu">
                    <Border BorderThickness="{TemplateBinding BorderThickness}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                Background="{TemplateBinding Background}"
                                Height="{TemplateBinding Height}">

                        <StackPanel ClipToBounds="True"
                                        Orientation="Horizontal"
                                        IsItemsHost="True" />

                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--Separator-->
    <Style TargetType="Separator" x:Key="SeparatorStyle">
        <Setter Property="Margin" Value="0,2,0,2"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Separator">
                    <StackPanel>
                        <Border BorderThickness="1" BorderBrush="#b8b8b8" Height="1"></Border>
                        <Border BorderThickness="1" BorderBrush="#ffffff" Height="1"></Border>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--TopLevelHeader-->
    <ControlTemplate x:Key="TopLevelHeader" TargetType="MenuItem">
        <Border x:Name="Border">
            <Grid>

                <ContentPresenter ContentSource="Header" Margin="5"></ContentPresenter>

                <Popup x:Name="Popup"
                           Placement="Bottom" 
                           IsOpen="{TemplateBinding IsSubmenuOpen}" 
                           AllowsTransparency="True"
                           Focusable="False"
                           PopupAnimation="Fade">
                    <Border x:Name="SubmenuBorder" 
                                Padding="0"
                                Margin="0" MinWidth="150"
                                SnapsToDevicePixels="True" 
                                BorderThickness="1,1,1,1"
                                BorderBrush="{DynamicResource MenuBorderBrush}"
                                Background="{DynamicResource MenuBackgroundBrush}">
                        <Border.Effect>
                            <DropShadowEffect Color="Black" Opacity="0.5" Direction="315" BlurRadius="3" ShadowDepth="5"></DropShadowEffect>
                        </Border.Effect>
                        <StackPanel IsItemsHost="True"></StackPanel>
                    </Border>
                </Popup>

            </Grid>
        </Border>

        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="Gray"></Setter>
            </Trigger>

            <Trigger Property="IsSuspendingPopupAnimation" Value="True">
                <Setter TargetName="Popup" Property="PopupAnimation" Value="None"></Setter>
            </Trigger>

            <Trigger Property="IsHighlighted" Value="True">
                <Setter Property="Background" TargetName="Border" Value="{DynamicResource MenuMouseOverBrush}"></Setter>
            </Trigger>

            <Trigger SourceName="Popup" Property="IsOpen" Value="True">
                <Setter Property="Background" TargetName="Border" Value="{DynamicResource MenuBackgroundBrush}"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>


    <!--TopLevelItem-->
    <ControlTemplate x:Key="TopLevelItem" TargetType="MenuItem">
        <Border x:Name="Border">
            <Grid>
                <ContentPresenter ContentSource="Header" Margin="0"></ContentPresenter>
            </Grid>
        </Border>

        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="Gray"></Setter>
            </Trigger>
            <Trigger Property="IsHighlighted" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{DynamicResource MenuMouseOverBrush}"></Setter>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{DynamicResource MenuMouseOverBrush}"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!--SubmenuItem-->
    <ControlTemplate x:Key="SubmenuItem" TargetType="MenuItem">
        <Border x:Name="Border" BorderThickness="1" Height="25">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="37"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="13"/>
                </Grid.ColumnDefinitions>

                <ContentPresenter ContentSource="Icon" 
                                        x:Name="Icon" 
                                        VerticalAlignment="Center" Opacity="1" Margin="10,0,15,0"></ContentPresenter>

                <Border x:Name="Check"
                            Width="16"
                            Height="16"
                            Visibility="Collapsed"
                            Margin="6,0,6,0"
                            BorderThickness="1">
                    <Path x:Name="CheckMark"
                              Width="7"
                              Height="7"
                              Visibility="Collapsed"
                              SnapsToDevicePixels="False"
                              Stroke="Red"
                              Data="M 0,3 L 3,7 L 7,0">
                    </Path>
                </Border>

                <ContentPresenter x:Name="HeaderHost" Grid.Column="1" VerticalAlignment="Center" ContentSource="Header"/>

                <TextBlock x:Name="InputGestureText" 
                               Grid.Column="2"
                               VerticalAlignment="Center"
                               Text="{TemplateBinding InputGestureText}"></TextBlock>
            </Grid>
        </Border>

        <ControlTemplate.Triggers>
            <Trigger Property="Icon" Value="{x:Null}">
                <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"></Setter>
            </Trigger>

            <Trigger Property="IsChecked" Value="True">
                <Setter TargetName="CheckMark" Property="Visibility" Value="Visible"></Setter>
            </Trigger>

            <Trigger Property="IsCheckable" Value="True">
                <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"></Setter>
                <Setter TargetName="Check" Property="Visibility" Value="Visible"></Setter>
            </Trigger>

            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{DynamicResource MenuMouseOverBrush}"></Setter>
            </Trigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="Gray"></Setter>
                <Setter TargetName="Icon" Property="Opacity" Value="0.5"></Setter>
                <Setter TargetName="CheckMark" Property="Stroke" Value="Gray"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!--SubmenuHeader-->
    <ControlTemplate x:Key="SubmenuHeader" TargetType="MenuItem">
        <Border x:Name="Border" BorderThickness="1" Height="20">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="37"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
                    <ColumnDefinition Width="13"/>
                </Grid.ColumnDefinitions>

                <ContentPresenter x:Name="Icon" Margin="10,0,15,0" ContentSource="Icon"></ContentPresenter>

                <ContentPresenter Grid.Column="1" x:Name="HeaderHost" VerticalAlignment="Center" ContentSource="Header"></ContentPresenter>

                <TextBlock x:Name="InputGestureText" 
                               Grid.Column="2"
                               Text="{TemplateBinding InputGestureText}"></TextBlock>

                <Path Grid.Column="3" 
                          x:Name="Arrow"
                          Fill="{DynamicResource ArrayBrush}"
                          SnapsToDevicePixels="True"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          Data="M 0 0 L 0 7 L 4 3.5 Z">
                </Path>

                <Popup x:Name="Popup"
                           Placement="Right"
                           AllowsTransparency="True"
                           IsOpen="{TemplateBinding IsSubmenuOpen}">
                    <Border x:Name="SubmenuBorder" 
                                Padding="0"
                                Margin="0" MinWidth="150"
                                SnapsToDevicePixels="True" 
                                BorderThickness="1"
                                BorderBrush="{DynamicResource MenuBorderBrush}"
                                Background="{DynamicResource MenuBackgroundBrush}">
                        <Border.Effect>
                            <DropShadowEffect Color="Black" Opacity="0.5" Direction="315" BlurRadius="3" ShadowDepth="5"></DropShadowEffect>
                        </Border.Effect>
                        <StackPanel IsItemsHost="True"></StackPanel>
                    </Border>
                </Popup>
            </Grid>
        </Border>

        <ControlTemplate.Triggers>
            <Trigger Property="Icon" Value="{x:Null}">
                <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"></Setter>
            </Trigger>

            <Trigger Property="IsHighlighted" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{DynamicResource MenuMouseOverBrush}"></Setter>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="Border" Property="Background" Value="{DynamicResource MenuMouseOverBrush}"></Setter>
            </Trigger>

            <Trigger SourceName="Popup" Property="IsOpen" Value="True">
                <Setter TargetName="Arrow" Property="Fill" Value="{DynamicResource ArrowOpenBrush}"></Setter>
            </Trigger>

            <Trigger SourceName="Popup" Property="IsOpen" Value="False">
                <Setter TargetName="Arrow" Property="Fill" Value="{DynamicResource ArrowBrush}"></Setter>
            </Trigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="Gray"></Setter>
                <Setter TargetName="Icon" Property="Opacity" Value="0.5"></Setter>
                <Setter TargetName="Arrow" Property="Fill" Value="Gray"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>


    <!--MenuItem-->
    <Style TargetType="MenuItem">
        <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
        <Style.Triggers>
            <Trigger Property="Role" Value="TopLevelHeader">
                <Setter Property="Template" Value="{StaticResource TopLevelHeader}"></Setter>
                <Setter Property="Grid.IsSharedSizeScope" Value="True"></Setter>
            </Trigger>

            <Trigger Property="Role" Value="TopLevelItem">
                <Setter Property="Template" Value="{StaticResource TopLevelItem}"></Setter>
            </Trigger>

            <Trigger Property="Role" Value="SubmenuHeader">
                <Setter Property="Template" Value="{StaticResource SubmenuHeader}"></Setter>
            </Trigger>

            <Trigger Property="Role" Value="SubmenuItem">
                <Setter Property="Template" Value="{StaticResource SubmenuItem}"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style TargetType="ContextMenu">
        <Setter Property="Width" Value="170"></Setter>
        <Setter Property="Margin" Value="5"></Setter>
        <Setter Property="FontSize" Value="12"></Setter>
        <Setter Property="BorderThickness" Value="1"></Setter>
        <Setter Property="BorderBrush" Value="#bbbbbb"></Setter>
        <Setter Property="Background" Value="#e9e9e9"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContextMenu">
                    <Border Width="{TemplateBinding Width}" 
                                Height="{TemplateBinding Height}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                Background="{TemplateBinding Background}">
                        <Border.Effect>
                            <DropShadowEffect Color="Black" Opacity="0.5" Direction="315" BlurRadius="3" ShadowDepth="5"></DropShadowEffect>
                        </Border.Effect>
                        <StackPanel IsItemsHost="True" Margin="{TemplateBinding Margin}"></StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

---

積跬步以至千里:) (:一陣沒來由的風