Скрыть или удалить часть границы в WPF

Question

Мне интересно, как удалить небольшую часть границы внутри всплывающего окна. Я отметил часть, которую хочу удалить, с красной стрелкой на картинке. Спасибо за помощь.

Вот код XAML

<ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}"> 
    <Grid SnapsToDevicePixels="true"> 
     <Rectangle x:Name="OuterBorder"/> 
     <Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"/> 
     <Rectangle x:Name="InnerBorder"/> 
     <DockPanel> 
      <ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/> 
      <Path x:Name="GlyphPanel" Data="{StaticResource Checkmark}" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="7,0,0,0" Visibility="Collapsed" VerticalAlignment="Center"/> 
      <ContentPresenter ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
     </DockPanel> 
     <Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="0" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="-1"> 
      <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent"> 
       <Border x:Name="SubMenuBorder" BorderBrush="{StaticResource ResourceKey=MenuBorderColorBrush}" BorderThickness="1" Background="{StaticResource MenuOpenBackgroundColorBrush}"> 
        <ScrollViewer x:Name="SubMenuScrollViewer" Margin="1,0" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"> 
         <Grid RenderOptions.ClearTypeHint="Enabled"> 
          <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"> 
           <Rectangle x:Name="OpaqueRect" Fill="{StaticResource ResourceKey=MenuOpenBackgroundColorBrush}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/> 
          </Canvas> 
          <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/> 
         </Grid> 
        </ScrollViewer> 
       </Border> 
      </Themes:SystemDropShadowChrome> 
     </Popup> 
    </Grid> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsSuspendingPopupAnimation" Value="true"> 
      <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/> 
     </Trigger> 
     <Trigger Property="Icon" Value="{x:Null}"> 
      <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/> 
     </Trigger> 
     <Trigger Property="IsChecked" Value="true"> 
      <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/> 
      <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/> 
     </Trigger> 
     <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true"> 
      <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/> 
      <Setter Property="Color" TargetName="Shdw" Value="#71000000"/> 
     </Trigger> 
     <Trigger Property="IsHighlighted" Value="true"> 
      <Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuMouseOverColorBrush}"/> 
      <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource MenuMouseOverColorBrush}"/> 
      <Setter Property="Stroke" TargetName="InnerBorder" Value="{StaticResource MenuMouseOverColorBrush}"/> 
     </Trigger> 
     <Trigger Property="IsKeyboardFocused" Value="true"> 
      <Setter Property="Stroke" TargetName="Bg" Value="{StaticResource MenuMouseOverColorBrush}"/> 
      <Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuMouseOverColorBrush}"/> 
      <Setter Property="Stroke" TargetName="InnerBorder" Value="{StaticResource MenuMouseOverColorBrush}"/> 
     </Trigger> 
     <Trigger Property="IsSubmenuOpen" Value="true"> 
      <Setter Property="Stroke" TargetName="Bg" Value="{StaticResource MenuBorderColorBrush}"/> 
      <Setter Property="Fill" TargetName="Bg" Value="{StaticResource MenuOpenBackgroundColorBrush}"/> 
      <Setter Property="Stroke" TargetName="InnerBorder" Value="{StaticResource MenuBorderColorBrush}"/> 
     </Trigger> 
     <Trigger Property="IsEnabled" Value="false"> 
      <Setter Property="Foreground" Value="#FF9A9A9A"/> 
      <Setter Property="Fill" TargetName="GlyphPanel" Value="#848589"/> 
     </Trigger> 
     <Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer" Value="false"> 
      <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/> 
      <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

Answer 1

Решено это с дополнительной рамкой над частью, которую я хотел скрыть. И под HighLight Trigger я установил ширину моей новой границы, чтобы она соответствовала ширине заголовков.

Вот код:

<Style x:Key="MetroMenuStyle" TargetType="{x:Type Menu}"> 
    <Style.Resources> 
     <Style x:Key="{x:Static MenuItem.SeparatorStyleKey}" TargetType="Separator"> 
      <Setter Property="Height" Value="1"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Separator"> 
         <Border BorderBrush="{StaticResource MenuBorderColorBrush}" BorderThickness="1" Margin="25,0,0,0"/> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style TargetType="{x:Type MenuItem}"> 
      <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/> 
      <Setter Property="Command" 
         Value="{Binding Command}" /> 
      <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type MenuItem}"> 
         <!--Border 1--> 
         <Border x:Name="Border" 
           BorderThickness="1" SnapsToDevicePixels="False"> 
          <Grid x:Name="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 Grid.Column="0" x:Name="Icon" VerticalAlignment="Center" 
                ContentSource="Icon"/> 
           <ContentPresenter Grid.Column="1" Margin="{TemplateBinding Padding}" 
                x:Name="HeaderHost" RecognizesAccessKey="True" 
                ContentSource="Header" VerticalAlignment="Center"/> 
           <ContentPresenter Grid.Column="2" Margin="8,1,8,1" x:Name="IGTHost" 
                ContentSource="InputGestureText" VerticalAlignment="Center"/> 
           <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> 
           <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" 
             Placement="Right" HorizontalOffset="-1" x:Name="SubMenuPopup" Focusable="false" 
             PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" 
             AllowsTransparency="True"> 
            <Grid Margin="0,0,5,5"> 
             <!--Border 2--> 
             <Border x:Name="SubMenuBorder" 
               BorderBrush="{StaticResource MenuBorderColorBrush}" 
               BorderThickness="1" Background="{StaticResource MenuOpenBackgroundColorBrush}" 
               SnapsToDevicePixels="True"> 
              <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True" Margin="2"> 
               <StackPanel IsItemsHost="True" 
                  KeyboardNavigation.DirectionalNavigation="Cycle"/> 
              </Grid> 
              <Border.Effect> 
               <DropShadowEffect ShadowDepth="2" Color="Black"/> 
              </Border.Effect> 
             </Border> 
             <!--Border 3--> 
             <Border Margin="1,0,0,0" x:Name="TransitionBorder" Width="0" Height="2" 
               VerticalAlignment="Top" HorizontalAlignment="Left" 
               Background="{StaticResource MenuOpenBackgroundColorBrush}" SnapsToDevicePixels="False" 
               BorderThickness="1" BorderBrush="{StaticResource MenuOpenBackgroundColorBrush}"/> 
            </Grid> 
           </Popup> 
          </Grid> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="Role" Value="TopLevelHeader"> 
           <Setter Property="Padding" Value="6,0,6,2"/> 
           <Setter TargetName="SubMenuPopup" Property="Placement" Value="Bottom"/> 
           <Setter TargetName="Col0" Property="MinWidth" Value="0"/> 
           <Setter TargetName="Col3" Property="Width" Value="Auto"/> 
           <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/> 
           <Setter TargetName="IGTHost" Property="Visibility" Value="Collapsed" /> 
           <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed"/> 
           <Setter TargetName="SubMenuBorder" Property="BorderThickness" Value="1,1,1,1"/> 
           <Setter TargetName="SubMenu" Property="Margin" Value="2,3,2,2"/> 
           <Setter TargetName="TransitionBorder" Property="Width" Value="{Binding ActualWidth, ElementName=Grid}"/> 
          </Trigger> 
          <Trigger Property="Role" Value="TopLevelItem"> 
           <Setter Property="Padding" Value="6,0,6,2"/> 
           <Setter TargetName="Col0" Property="MinWidth" Value="0"/> 
           <Setter TargetName="Col3" Property="Width" Value="Auto"/> 
           <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/> 
           <Setter TargetName="IGTHost" Property="Visibility" Value="Collapsed"/> 
           <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed"/> 
          </Trigger> 
          <Trigger Property="Role" Value="SubmenuHeader"> 
           <Setter Property="DockPanel.Dock" Value="Top"/> 
           <Setter Property="Padding" Value="10,3,0,3"/> 
           <Setter TargetName="Border" Property="MinHeight" Value="22"/> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuOpenBackgroundColorBrush}"/> 
          </Trigger> 
          <Trigger Property="Role" Value="SubmenuItem"> 
           <Setter Property="DockPanel.Dock" Value="Top"/> 
           <Setter Property="Padding" Value="10,3,0,3"/> 
           <Setter TargetName="Border" Property="MinHeight" Value="22"/> 
           <Setter TargetName="ArrowPanel" Property="Visibility" Value="Collapsed"/> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuOpenBackgroundColorBrush}"/> 
          </Trigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsHighlighted" Value="true"/> 
            <Condition Property="Role" Value="TopLevelHeader"/> 
           </MultiTrigger.Conditions> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuMouseOverColorBrush}"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsHighlighted" Value="true"/> 
            <Condition Property="Role" Value="TopLevelItem"/> 
           </MultiTrigger.Conditions> 
           <Setter TargetName="Border" Property="Background" Value="Green"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsHighlighted" Value="true"/> 
            <Condition Property="Role" Value="SubmenuHeader"/> 
           </MultiTrigger.Conditions> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuMouseOverColorBrush}"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsHighlighted" Value="true"/> 
            <Condition Property="Role" Value="SubmenuItem"/> 
           </MultiTrigger.Conditions> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuMouseOverColorBrush}"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsSubmenuOpen" Value="true"/> 
            <Condition Property="Role" Value="TopLevelHeader"/> 
           </MultiTrigger.Conditions> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource MenuOpenBackgroundColorBrush}"/> 
           <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource MenuBorderColorBrush}"/> 
           <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0"/> 
          </MultiTrigger> 
          <Trigger Property="IsSubmenuOpen" Value="true"> 
           <Setter TargetName="ArrowPanelPath" Property="Fill" Value="Black"/> 
          </Trigger> 
          <Trigger Property="IsSuspendingPopupAnimation" Value="true"> 
           <Setter TargetName="SubMenuPopup" Property="PopupAnimation" Value="None"/> 
          </Trigger> 
          <Trigger Property="Icon" Value="{x:Null}"> 
           <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/> 
          </Trigger> 
          <Trigger Property="IsEnabled" Value="False"> 
           <Setter Property="Foreground" Value="Red"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Style.Resources> 
    <Setter Property="Background" Value="{StaticResource WindowBackgroundColorBrush}"/> 
</Style> 

Answer 2

вы можете использовать ControlTemplate для MenuItem на заказ этот стиль.

Answer 3

Я пытался сделать это простым способом, но без успеха, извините. Это сложно, потому что в элементе управления WPF реализовано управление всплывающим окном под капотом, которое, в свою очередь, является отдельным отдельным самым верхним окном, и вы не можете просто изменить его Canvas.ZIndex на отрицательное значение и нарисовать меню верхнего уровня элемент над ним, чтобы совпадение результатов могло скрыть строку, которую вы хотите удалить.

Один из возможных (и допустимых, imho) способов устранения линии, отмеченной на изображении, может быть каким-то дополнительным прямоугольником верхнего уровня в шаблоне управления элементами меню, который просто скроет левую часть верхней границы над меню выскакивать. Однако этот прямоугольник должен будет получить точную ширину элемента меню верхнего уровня (возможно, с помощью привязки элемента), чтобы он мог скрыть точное количество строк, помеченных на изображении.

Тем не менее это возможное решение звучит немного сложнее для меня, и, если возможно, я предпочел бы радикально изменить способ реализации меню, например - с помощью элемента управления вкладками, чтобы сохранить все списки элементов детского меню и заголовки вкладок сформирует меню верхнего уровня или что-то в этом роде. Таким образом, вы, по крайней мере, будете иметь больше контроля над компоновкой пользовательского интерфейса и добавите приятную анимацию для открытия и закрытия меню, будет легко.

Answer 4

Тан, я использую ниже XAML кода в TopLevelHeaderTemplateKey или SubmenuHeaderTemplateKey на заказ всплывающей границы:

  <Grid 
       SnapsToDevicePixels="true"> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition 
          MinWidth="14" 
          Width="Auto" /> 
         <ColumnDefinition 
          Width="4" /> 
         <ColumnDefinition 
          Width="*" /> 
         <ColumnDefinition 
          Width="37" /> 
         <ColumnDefinition 
          SharedSizeGroup="MenuItemIGTColumnGroup" 
          Width="Auto" /> 
         <ColumnDefinition 
          Width="17" /> 
        </Grid.ColumnDefinitions> 
        <ContentPresenter 
         x:Name="Icon" 
         ContentSource="Icon" 
         Margin="1" 
         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
         VerticalAlignment="Center" /> 
        <Border 
         x:Name="GlyphPanel" 
         BorderBrush="#CDD3E6" 
         BorderThickness="1" 
         Background="#E6EFF4" 
         CornerRadius="3" 
         Height="22" 
         Margin="1" 
         Visibility="Hidden" 
         Width="Auto"> 
         <Path 
          x:Name="Glyph" 
          Data="{DynamicResource Checkmark}" 
          Fill="#0C12A1" 
          FlowDirection="LeftToRight" 
          Height="11" 
          Width="9" /> 
        </Border> 
        <ContentPresenter 
         Grid.Column="2" 
         Margin="-2,0,0,0" 
         VerticalAlignment="Center" 
         ContentSource="Header" 
         RecognizesAccessKey="True" 
         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> 
        <TextBlock 
         Grid.Column="4" 
         Margin="{TemplateBinding Padding}" 
         Text="{TemplateBinding InputGestureText}" 
         Visibility="Collapsed" /> 
        <Path 
         Grid.Column="5" 
         Data="{DynamicResource Checkmark}" 
         Fill="{TemplateBinding Foreground}" 
         Margin="4,0,0,0" 
         VerticalAlignment="Center" /> 
       </Grid> 

       <Popup 
        x:Name="PART_Popup" 
        AllowsTransparency="true" 
        Focusable="false" 
        IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" 
        PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" 
        Placement="Right" 
        > 
        <Border 
         x:Name="Shdw" 
         Background="{Binding Background, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" 
         BorderBrush="#BF000000" 
         BorderThickness="4" 
         CornerRadius="0"> 
         <Border.Effect> 
          <DropShadowEffect 
           ShadowDepth="0" 
           BlurRadius="4" 
           Color="#7F1E1E1E" /> 
         </Border.Effect> 

         <ScrollViewer 
          x:Name="SubMenuScrollViewer" 
          CanContentScroll="true" 
          Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"> 
          <Grid 
           RenderOptions.ClearTypeHint="Enabled"> 
           <ItemsPresenter 
            x:Name="ItemsPresenter" 
            KeyboardNavigation.DirectionalNavigation="Cycle" 
            Grid.IsSharedSizeScope="true" 
            Margin="0" 
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
            KeyboardNavigation.TabNavigation="Cycle" /> 
          </Grid> 
         </ScrollViewer> 
        </Border> 
       </Popup> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger 
        Property="IsSuspendingPopupAnimation" 
        Value="true"> 
        <Setter 
         Property="PopupAnimation" 
         TargetName="PART_Popup" 
         Value="None" /> 
       </Trigger> 
       <Trigger 
        Property="Icon" 
        Value="{x:Null}"> 
        <Setter 
         Property="Visibility" 
         TargetName="Icon" 
         Value="Collapsed" /> 
       </Trigger> 
       <Trigger 
        Property="IsChecked" 
        Value="true"> 
        <Setter 
         Property="Visibility" 
         TargetName="GlyphPanel" 
         Value="Visible" /> 
        <Setter 
         Property="Visibility" 
         TargetName="Icon" 
         Value="Collapsed" /> 
       </Trigger> 
       <Trigger 
        Property="HasDropShadow" 
        SourceName="PART_Popup" 
        Value="true"> 
        <Setter 
         Property="Margin" 
         TargetName="Shdw" 
         Value="0,0,5,5" /> 
       </Trigger> 

       <Trigger 
        Property="IsEnabled" 
        Value="false"> 
        <Setter 
         Property="Foreground" 
         Value="#FF9A9A9A" /> 
        <Setter 
         Property="Background" 
         TargetName="GlyphPanel" 
         Value="#EEE9E9" /> 
        <Setter 
         Property="BorderBrush" 
         TargetName="GlyphPanel" 
         Value="#DBD6D6" /> 
        <Setter 
         Property="Fill" 
         TargetName="Glyph" 
         Value="#848589" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 

ScreenSnap так: @