Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF Rounded Corners background bleeding through

I'm making my first foray into WPF - I have a simple form with a popup defined for inline help. I'm using rounded corners, and for some reason a black background is bleeding through around the corners. I don't understand which element is causing the problem.

alt text http://www.awbrey.net/rounded.jpg

I assume it's something blindingly obvious which I'm just not seeing. Here's the XAML I'm using:

<Window x:Class="Consent.Client.SubjectNumberEntry"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" FontSize="24"
    Title="SubjectNumberEntry" WindowStyle="None" WindowState="Maximized"
        xmlns:h="clr-namespace:Consent.Client" KeyDown="windowOuter_KeyDown" Background="White" Name="windowOuter" AllowsTransparency="true" Loaded="Window_Loaded">

    <StackPanel Height="400" DockPanel.Dock="Top" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10">
        <StackPanel Height="60" Orientation="Horizontal" VerticalAlignment="Center">
            <TextBox Name="txtSubjectNumber" Margin="10" Width="400" KeyDown="txtSubjectNumber_KeyDown" h:HelpProvider.HelpString="Enter the subject identifier, or scan their wristband">
                <TextBox.ToolTip>This is a textbox</TextBox.ToolTip>
            </TextBox>
            <Button Name="btnEnter" Margin="10" Width="100" Click="btnEnter_Click">Enter</Button>
            <Button Width="50" Name="btnHelp" Margin="10" Click="btnHelp_Click">?</Button>
            <Button Width="50" Name="btnExit" Margin="10" Click="btnExit_Click">Exit</Button>


        </StackPanel>
        <Label Name="lblValue" Margin="10"></Label>


        <Popup Placement="Bottom" HorizontalAlignment="Center" VerticalOffset="10" MouseDown="popHelp_MouseDown" PopupAnimation="Fade" Name="popHelp" PlacementTarget="{Binding ElementName=txtSubjectNumber}">
            <Border Padding="10" Margin="10" BorderBrush="CornflowerBlue" BorderThickness="1" CornerRadius="10" Background="CornflowerBlue">
                <TextBlock FontSize="12" Background="CornflowerBlue">This is the content of the help box.</TextBlock>
            </Border>
        </Popup>

    </StackPanel>


</Window>
like image 889
Jason Avatar asked Jan 23 '09 19:01

Jason


2 Answers

I think it is the Popup that is causing the problem. Try setting AllowsTransparency to True on the popup.

Popup.AllowsTransparency

When set to False, any transparent colors are "merged" with black.

like image 187
Bubblewrap Avatar answered Oct 19 '22 02:10

Bubblewrap


You can also wrap the popup in a border that has rounded corners. This is useful if you can't change the AllowsTransparency of the popup.

Something like this:

<Border CornerRadius="10">
    <Popup Placement="Bottom" HorizontalAlignment="Center" VerticalOffset="10" MouseDown="popHelp_MouseDown" PopupAnimation="Fade" Name="popHelp" PlacementTarget="{Binding ElementName=txtSubjectNumber}">
        <Border Padding="10" Margin="10" BorderBrush="CornflowerBlue" BorderThickness="1" CornerRadius="10" Background="CornflowerBlue">
            <TextBlock FontSize="12" Background="CornflowerBlue">This is the content of the help box.</TextBlock>
        </Border>
    </Popup>
</Border>
like image 41
ifyadig Avatar answered Oct 19 '22 02:10

ifyadig