Question

我的菜单控件的自定义样式和基于通用wpf样式的菜单项控件。我的问题是我无法弄清楚如何删除MenuItem控件之间的细边线。

正如您所看到的，我的menuItem之间有一条细的白边线，其bg设置为黑色和灰色边框。这是我对MenuItem样式的整个xaml代码：

<Style x:Key="macMenuItemStyle" TargetType="{x:Type MenuItem}">
  <Setter Property="Foreground"
          Value="{Binding Path=Foreground,
                  RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type MenuItem}">
        <Border x:Name="Border" Background="Black"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}">
          <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" x:Name="Icon"
                              Margin="4,0,6,0"
                              VerticalAlignment="Center"
                              ContentSource="Icon"/>

            <!-- Glyph is a checkmark if needed for a checkable menu -->
            <Grid Grid.Column="0" x:Name="GlyphPanel"
                  Visibility="Hidden"
                  Margin="4,0,6,0"
                  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" x:Name="HeaderHost"
                              Margin="{TemplateBinding Padding}"
                              RecognizesAccessKey="True"
                              ContentSource="Header"/>

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

            <!-- Arrow drawn path which points to the next level of the menu -->
            <Grid Grid.Column="3" x:Name="ArrowPanel" 
                  Margin="4,0,6,0" 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 x:Name="SubMenuPopup"
                   IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
                   Placement="Right"
                   Focusable="false"
                   AllowsTransparency="True"
                   PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
            <Border x:Name="SubMenuBorder"
                    Margin="0,0,8,8" CornerRadius="0,0,3,3"
                    Padding="0" Background="#FDFCFC"
                    BorderBrush="#DCD5D6" BorderThickness="1">
              <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.Effect>
                 <DropShadowEffect BlurRadius="5" ShadowDepth="1.5"                                        Opacity="0.1"/>
               </Border.Effect>
              </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,0,6,0"/>
            <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="6,1,6,1"/>
           </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,0,0,0"/>
             <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 macHighlightItemBrush}" TargetName="Border"/>
             <Setter Property="Foreground" Value="White"/>
           </Trigger>
           <Trigger Property="IsEnabled" Value="false">
             <Setter Property="Foreground" Value="LightGray"/>
           </Trigger>
         </ControlTemplate.Triggers>
       </ControlTemplate>
     </Setter.Value>
  </Setter>
</Style>

这是我的菜单自定义样式：

 <Style x:Key="macMenuStyle" TargetType="{x:Type Menu}">
    <Setter Property="Background" Value="{StaticResource macMenuBrush}"/>
    <Setter Property="FontFamily" Value="{DynamicResource {x:Static SystemFonts.MenuFontFamilyKey}}"/>
    <Setter Property="FontSize" Value="{DynamicResource {x:Static SystemFonts.MenuFontSizeKey}}"/>
    <Setter Property="FontStyle" Value="{DynamicResource {x:Static SystemFonts.MenuFontStyleKey}}"/>
    <Setter Property="FontWeight" Value="{DynamicResource {x:Static SystemFonts.MenuFontWeightKey}}"/>
    <Setter Property="Foreground" Value="#FF212121"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Menu}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如何删除MenuItem控件WPF之间的边距

0 个答案: