Border WPF上的丑陋边框

Question

我有简单的用户控件，带有图像和弹出窗口。

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

我的问题是我将 BorderThickness 设置为 0，但有时在边框上我可以看到取决于边框宽度的黑色小边框。

我将使用图片来解释我的问题。
我有这个：http://i.imgur.com/74k6FJs.png
而不是这个：http://i.imgur.com/2dManE1.png

编辑：解决方案

好的，我终于找到了解决方案。我必须在 Popup 属性中添加 AllowsTransparency="True"。 代码现在看起来像这样：

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

Answer 1

解决方案

好的，我终于找到了解决方案。我必须在 Popup 属性中添加 AllowsTransparency="True" 。 代码现在看起来像这样：

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

Answer 2

...但有时在边框上我可以看到取决于边框宽度的黑色小边框

您从未定义过边框颜色，因此默认情况下它将为黑色（如果您没有全局样式）。您可以将BorderBrush 设置为与您的BackgroundBrush 相同的颜色以使其匹配。

如果您有时会看到黑色边框，即使您的厚度是 0，请查看 SnapToDevicePixels 是否修复它。