Ugly border on Border WPF

Question

I have simple UserControl with image and popup.

<UserControl x:Class="Dziennik.Controls.ImageButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="30" d:DesignWidth="100">
    <Button x:Name="button" DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" Command="{Binding Command}" CommandParameter="{Binding CommandParameter}"
            Background="Transparent"
            BorderBrush="Transparent"
            BorderThickness="0">
        <StackPanel Orientation="Horizontal">
            <Image x:Name="image" Source="{Binding ImageSource}" VerticalAlignment="Center"/>
            <Popup PlacementTarget="{Binding ElementName=button}" Placement="Bottom" IsOpen="{Binding IsMouseOver, ElementName=button,Mode=OneWay}">
                <Border BorderThickness="0" Background="#FFBEE6FD">
                    <TextBlock Text="{Binding Text}" FontWeight="Bold" FontSize="14" Margin="10,5,10,5" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Border>
            </Popup>
        </StackPanel>
    </Button>
</UserControl>

My problem is that I set BorderThickness to 0, but on border sometimes i can see small black border depending on border width.

I will use images to explain my problem.
I have this: https://i.stack.imgur.com/StVTF.png
Instead of this: https://i.stack.imgur.com/NuK2H.png

EDIT: SOLUTION

Okay, I've finally found a solution. I had to add AllowsTransparency="True" in Popup properties. Code now looks like this:

<UserControl x:Class="Dziennik.Controls.ImageButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="30" d:DesignWidth="100">
    <Button x:Name="button" DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" Command="{Binding Command}" CommandParameter="{Binding CommandParameter}"
            Background="Transparent"
            BorderBrush="Transparent"
            BorderThickness="0">
        <StackPanel Orientation="Horizontal">
            <Image x:Name="image" Source="{Binding ImageSource}" VerticalAlignment="Center"/>
            <Popup PlacementTarget="{Binding ElementName=button}" Placement="Bottom" IsOpen="{Binding IsMouseOver, ElementName=button,Mode=OneWay}" AllowsTransparency="True">
                <Border BorderThickness="0" Background="#FFBEE6FD">
                    <TextBlock Text="{Binding Text}" FontWeight="Bold" FontSize="14" Margin="10,5,10,5" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </Popup>
        </StackPanel>
    </Button>
</UserControl>

Nice find. Make sure to answer your question with this and mark it as the answer. — TyCobb, Aug 21 '14 at 15:13

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

SOLUTION

Okay, I've finally found a solution. I had to add AllowsTransparency="True" in Popup properties. Code now looks like this:

<UserControl x:Class="Dziennik.Controls.ImageButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="30" d:DesignWidth="100">
    <Button x:Name="button" DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" Command="{Binding Command}" CommandParameter="{Binding CommandParameter}"
            Background="Transparent"
            BorderBrush="Transparent"
            BorderThickness="0">
        <StackPanel Orientation="Horizontal">
            <Image x:Name="image" Source="{Binding ImageSource}" VerticalAlignment="Center"/>
            <Popup PlacementTarget="{Binding ElementName=button}" Placement="Bottom" IsOpen="{Binding IsMouseOver, ElementName=button,Mode=OneWay}" AllowsTransparency="True">
                <Border BorderThickness="0" Background="#FFBEE6FD">
                    <TextBlock Text="{Binding Text}" FontWeight="Bold" FontSize="14" Margin="10,5,10,5" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </Popup>
        </StackPanel>
    </Button>
</UserControl>

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

...but on border sometimes i can see small black border depending on border width

You never defined a border color so by default it would be black (if you don't have a global style). You can set the BorderBrush to be the same color as your BackgroundBrush to make it match.

If you are sometimes seeing a black border even though your thickness is 0, see if SnapToDevicePixels fixes it.

edited May 23 '17 at 12:21

Community

1
1

answered Aug 20 '14 at 21:21

TyCobb

8,909
1
33
53

Don't working. Even with SnapToDevicePixels True/False. – Symeg Aug 21 '14 at 12:16

Ugly border on Border WPF

EDIT: SOLUTION

2 Answers2

SOLUTION