仅当MenuItem的IsCheckable = true时才显示图标

时间:2015-07-09 10:54:15

标签: c# wpf vb.net wpf-style

我使用代码形成了question的答案来构建我自己的项目菜单 问题是最顶层的项目应该只有一个图标作为内容。但是如果我这样做,除非我也设置isCheckable = true,否则不会显示图标 这是我改变的代码。

 <ControlTemplate TargetType="{x:Type MenuItem}">
          <Border x:Name="Border"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="1">
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
                <ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
                <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
                <ColumnDefinition x:Name="Col3" Width="14"/>
              </Grid.ColumnDefinitions>

              <!-- ContentPresenter to show an Icon if needed -->
          <ContentPresenter Grid.Column="0" Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>

          <!-- Glyph is a checkmark if needed for a checkable menu -->
          <Grid Grid.Column="0" Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
            <Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
          </Grid>

          <!-- Content for the menu text etc -->
          <ContentPresenter Grid.Column="1"
                            Margin="{TemplateBinding Padding}"
                            x:Name="HeaderHost"
                            RecognizesAccessKey="True"
                            ContentSource="Header"/>

          <!-- Content for the menu IGT -->
          <ContentPresenter Grid.Column="2"
                            Margin="8,1,8,1"
                            x:Name="IGTHost"
                            ContentSource="InputGestureText"
                            VerticalAlignment="Center"/>

          <!-- Arrow drawn path which points to the next level of the menu -->
          <Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
            <Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
          </Grid>

          <!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
          <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
            <Border x:Name="SubMenuBorder" BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" BorderThickness="1" Padding="2,2,2,2">
              <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
                <!-- StackPanel holds children of the menu. This is set by IsItemsHost=True -->
                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
              </Grid>
            </Border>
          </Popup>
        </Grid>
      </Border>

      <!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
      <ControlTemplate.Triggers>
        <!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
        <Trigger Property="Role" Value="TopLevelHeader">
          <Setter Property="Padding" Value="6,1,6,1"/>
          <Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
          <Setter Property="MinWidth" Value="0" TargetName="Col0"/>
          <Setter Property="Width" Value="Auto" TargetName="Col3"/>
          <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 :  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"/>
        </Trigger>

        <!-- 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 : 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>
        <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>

        <!-- 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>

        <!-- Using the system colors for the Menu Highlight and IsEnabled-->
        <Trigger Property="IsHighlighted" Value="true">
          <Setter Property="Background" Value="{StaticResource HighlightedBackgroundBrush}" TargetName="Border"/>
          <Setter Property="Foreground" Value="{StaticResource HighlightedText}"/>
          <Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}" TargetName="Border"/>
        </Trigger>
        <Trigger Property="IsHighlighted" Value="false">
          <Setter Property="Background" Value="{StaticResource MenuBackgroundBrush}" TargetName="Border"/>
          <Setter Property="Foreground" Value="{StaticResource SolidMenuFontBrush}"/>
          <Setter Property="BorderBrush" Value="{StaticResource MenuBackgroundBrush}" TargetName="Border"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
          <Setter Property="Foreground" Value="LightGray"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

在实际的UserControl中,菜单项的使用方式如下:

 <Menu x:Name="myMenu" Grid.Row="0" Grid.Column="1" >
                <MenuItem Height="25" Width="30" Header="" IsCheckable="True">
                    <MenuItem.Icon>
                        <Image Source="/Tool;component/Resources/help.png" Stretch="Fill" Height="20" Width="20"/>
                    </MenuItem.Icon>
                    <MenuItem x:Name="btAbout" Header="About" />
                    <MenuItem x:Name="btHelp" Header="Documentation" />
                    <MenuItem x:Name="btBugReport" Header="Bug report" />
                    <MenuItem x:Name="btFeatureRequest" Header="Feature request" />
                </MenuItem>
            </Menu>

需要进行哪些更改才能始终显示图标?

1 个答案:

答案 0 :(得分:0)

我在控制模板中的任何地方都没有看到IsCheckable属性,但您的问题可能与同一Grid.Column上的Icon和GlyphPanel(复选标记)有关。

为你的Icon添加一个新的ColumnDefinition到网格:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" SharedSizeGroup="MenuCustomIconColumnGroup" />
    <ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
    <ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
    <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
    <ColumnDefinition x:Name="Col3" Width="14"/>
</Grid.ColumnDefinitions>

并相应地为所有受影响的控件设置Grid.Row值。例如:

<!-- Glyph is a checkmark if needed for a checkable menu -->
<Grid Grid.Column="1" Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">