Search code examples
wpf

Hide or remove a part of a border in WPF


I'm wondering how to remove a little part of a border inside a popup. I marked the part I want to remove with a red arrow in the picture. Thanks for your help.

Here is the Xaml code

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

Remove a part of the border


Solution

  • Solved this with an extra border above the part i wanted to hide. And under the HighLight Trigger i setted the width of my new border so it can match the headers width.

    Here is the code:

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