柏加凯 发表于 2013-1-3 15:35:52

WPF Menu设计Tips

WPF Menu设计Tips

<div id="cnblogs_post_body">(1)Menu的ItemContainerStyle属性,设计的是Menu中最末层的MenuItem(即本身没有子级菜单)的样式;
  对以下2种MenuItem无效:
    (a)对最顶级的MenuItem无效,如图最顶端的后面2个MenuItem(这2个MenuItem下面没有子MenuItem);
    (b)对自身含有子级菜单的MenuItem无效,如图菜单1的第一个MenuItem含有一个子级MenuItem;  
  ItemContainerStyle="{StaticResource Menu_MenuItemStyle}"
  http://pic002.cnblogs.com/images/2012/422053/2012082315093550.jpg
  为了让MenuItem模板能根据不同层级的MenuItem自动分配布局,可以用下面几个属性,放在Trigger里面:
<div class="cnblogs_code" >http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttp://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gifView Code <div id="cnblogs_code_open_313d7390-85d3-467c-8b48-8fd5e1dd3796" class="cnblogs_code_hide"><ControlTemplate.Triggers>                        <!-- Role = TopLevelHeader : 菜单中的根级的menuitem,且这个menuitem有子级菜单-->                        <!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands up -->                        <Trigger Property="Role" Value="TopLevelHeader">                            <Setter Property="Padding" Value="6,1,10,1"/>                            <Setter Property="Placement" Value="Top" TargetName="SubMenuPopup"/>                            <Setter Property="MinWidth" Value="0" TargetName="Col0"/>                            <Setter Property="Width" Value="Auto" TargetName="Col3"/>                            <Setter Property="CornerRadius" Value="0,20,0,0" TargetName="Border"/>                            <!--<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>-->                            <Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>                            <Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>                            <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>                        </Trigger>                                                <!-- Role = TopLevelItem :菜单中的根级menuitem,且这个menuitem没有子级菜单-->                        <!-- Role = TopLevelItem :this is a child menu item from the top level without any child items-->                        <Trigger Property="Role" Value="TopLevelItem">                            <!--<Setter Property="Padding" Value="6,1,6,1"/>                            <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>-->                            <Setter Property="Padding" Value="6,1,10,1"/>                            <Setter Property="Placement" Value="Top" TargetName="SubMenuPopup"/>                            <Setter Property="MinWidth" Value="0" TargetName="Col0"/>                            <Setter Property="Width" Value="Auto" TargetName="Col3"/>                            <Setter Property="CornerRadius" Value="0,20,0,0" TargetName="Border"/>                            <!--<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>-->                            <Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>                            <Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>                            <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>                        </Trigger>                        <!-- Role = SubMenuHeader : 菜单中的子级menuitem,且这个menuitem有子级菜单 -->                        <!-- Role = SubMenuHeader : this is a child menu item which does not have children -->                        <Trigger Property="Role" Value="SubmenuHeader">                            <Setter Property="DockPanel.Dock" Value="Top"/>                            <Setter Property="Padding" Value="0,2,0,2"/>                        </Trigger>                        <!-- Role = SubMenuItem : 菜单中的子级menuitem,且这个menuitem没有子级菜单-->                        <!-- Role = SubMenuItem : this is a child menu item which has children-->                        <Trigger Property="Role" Value="SubmenuItem">                            <Setter Property="DockPanel.Dock" Value="Top"/>                            <Setter Property="Padding" Value="0,2,0,2"/>                            <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>                        </Trigger>                                                <!-- IsSuspendingPopupAnimation : 获取菜单是否挂起对其 Popup 控件的动画 -->                        <Trigger Property="IsSuspendingPopupAnimation" Value="true">                            <Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>                        </Trigger>                        <!-- If no Icon is present the we collapse the Icon Content -->                        <Trigger Property="Icon" Value="{x:Null}">                            <Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>                        </Trigger>                                                <!-- Icon和checkmark在Grid的同一列中,一般做法是:如果checkmark的显示优先级高于Icon,所以此处将Icon隐藏 -->                        <!-- The GlyphPanel contains the CheckMark -->                        <Trigger Property="IsChecked" Value="true">                            <Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>                            <Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>                        </Trigger>                        <!-- IsHighlighted : 鼠标移动或键盘导航到MenuItem上-->                        <!-- Using the system colors for the Menu Highlight and IsEnabled-->                        <Trigger Property="IsHighlighted" Value="true">                            <Setter Property="Foreground" Value="Gold"/>                            <Setter Property="Background" TargetName="Border" Value="{DynamicResource MouseOnBrush}"/>                        </Trigger>                                                <Trigger Property="IsEnabled" Value="false">                            <Setter Property="Foreground" Value="Gray"/>                        </Trigger>                  </ControlTemplate.Triggers>
页: [1]
查看完整版本: WPF Menu设计Tips