Search code examples
c#wpfxaml

Unwanted border visible on menuitem


I have a menu inside a grid although i have set the border thickness and brush to same color and null i somehow see a right sided white border, not sure from where that's coming

I have an example code for menu items i don't see this happening there maybe some issue with my parent grid layout but no idea

<Window x:Class="HelloWord.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:HelloWorld"
        mc:Ignorable="d"
        Title="MainWindow" 
        Height="450" 
        Width="800"
        WindowStartupLocation="CenterScreen"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="Transparent">
    <Window.Resources>
        <Style x:Key="Main_MenuItem"
               TargetType="MenuItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <Border x:Name="border"
                                Height="30"
                                Background="#363435"
                                BorderThickness="0"
                                BorderBrush="{x:Null}"
                                Padding="5">
                            <ContentPresenter ContentSource="Header"
                                               TextBlock.Foreground="White"
                                               HorizontalAlignment="Center"
                                               VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsHighlighted"
                                     Value="True">
                                <Setter Property="Background"
                                        TargetName="border"
                                        Value="#524E4F" />
                                <Setter Property="BorderBrush"
                                        TargetName="border"
                                        Value="#524E4F" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Border Padding="10" >
        <Grid>
            <Border Background="WhiteSmoke"
                    CornerRadius="5">
                <Border.Effect>
                    <DropShadowEffect Color="#363435" 
                                      ShadowDepth="3" 
                                      Opacity="0.3" />
                </Border.Effect>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40" />
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Border Background="#363435"
                            CornerRadius="5,5,0,0">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="1" Opacity="0.3" />
                        </Border.Effect>
                    </Border>
                    <StackPanel Orientation="Horizontal">
                        <Menu VerticalAlignment="Center"
                              HorizontalAlignment="Center">
                            <MenuItem Style="{StaticResource Main_MenuItem}" Header="Hello" />
                        </Menu>
                    </StackPanel>
                </Grid>
            </Border>
        </Grid>
    </Border>
</Window>

Window Screenshot

tried setting the border thickness and brush but doesn't work out


Solution

  • you must insert this tag in the Border control and it should solve your problem after a build:

    <Border x:Name="border"
      Height="30"
      Background="#363435"
      BorderThickness="0"
      BorderBrush="{x:Null}"
      SnapsToDevicePixels="True"  <!-- THIS ONE -->
      Padding="5">