Уродливая граница на границе WPF

1

У меня простой UserControl с изображением и всплывающим окном.

<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


РЕДАКТИРОВАТЬ: РЕШЕНИЕ

Хорошо, я наконец нашел решение. Мне пришлось добавить AllowsTransparency = "True" в свойствах 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}" 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>
  • 0
    Хорошая находка. Обязательно ответьте на свой вопрос этим и отметьте его как ответ.
Теги:
wpf
border

2 ответа

2
Лучший ответ

РЕШЕНИЕ

Хорошо, я наконец нашел решение. Мне пришлось добавить AllowsTransparency = "True" в свойствах 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}" 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>
0

... но на границе иногда я вижу небольшую черную границу в зависимости от ширины границы

Вы никогда не определяли цвет границы, поэтому по умолчанию он был бы черным (если у вас нет глобального стиля). Вы можете установить BorderBrush таким же цветом, как и BackgroundBrush чтобы он совпадал.

Если вы иногда видите черную границу, даже если ваша толщина равна 0, посмотрите, исправляет ли SnapToDevicePixels ее.

  • 0
    Не работает Даже с SnapToDevicePixels True / False.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню