#1,196 – Making a Window Fully Transparent

November 6, 2014 2 Comments

You can make the background of a window fully transparent by setting its Background property to Transparent, settings AllowsTransparency to true and setting WindowStyle to None.

Below is an example.  Note that because WindowStyle is None, the window doesn’t have a normal border and we can’t therefore move the window around.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Transparent"
        Height="190" Width="268"
        Background="Transparent"
        AllowsTransparency="True"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen">

    <StackPanel>
        <TextBlock Text="Topper (1937) starred Cary Grant and Constance Bennett"
                   TextWrapping="Wrap"
               HorizontalAlignment="Center" Height="40" Margin="47,0"/>
        <Button Content="Ok, Got It"
                Padding="10,5" Margin="10"
                HorizontalAlignment="Center"
                Click="Button_Click"/>
    </StackPanel>
</Window>

Here’s the window in action. (We added a handler to the button’s Click event to close the window when clicked).

1196-001

Advertisement

Filed under Windows Tagged with , ,

#860 – Making a Tooltip Partially Transparent

July 10, 2013 1 Comment

You’ll normally want your tooltips fully opaque so that the user can easily read the content on the tooltip.  However, there might be cases when you’d like the tooltip at least partially transparent, to hint at content behind the tooltip.

To make a tooltip partially transparent, you can set its Background property to a color that includes an alpha value indicating transparency.

The alpha component of a color value ranges from 0-255 (00-FF), with a value of 0 representing a fully transparent color and 255 representing a fully opaque color.

In the example below, we set the alpha portion of the color value to D5, which is slightly transparent.

        <Button Content="Read a Book"
                Padding="10,5" HorizontalAlignment="Center">
            <Button.ToolTip>
                <ToolTip Background="#D5F0F0FF">
                    <StackPanel>
                        <TextBlock Text="Reading Suggestion" FontWeight="Bold"/>
                        <TextBlock Text="Charles Dickens" Margin="5"/>
                    </StackPanel>
                </ToolTip>
            </Button.ToolTip>
        </Button>

When the tooltip appears, you can see through it to the button behind it.
860-001

Filed under Controls Tagged with , , ,

#553 – Setting an Alpha Value in Blend

May 8, 2012 Leave a comment

Colors in WPF consist of 8 bytes–2 bytes each for the alpha, red, green and blue channels.  The alpha channel dictates the transparency/opacity of a color (255 or #FF = fully opaque, 0 = fully transparent).

You can set the alpha value for a color in the color editor in Blend by setting the value of the field labeled A (0-100%) or by explicitly setting the first two bytes of the hex value for the color (#00-#FF).

In the example below, the Alpha value is at 100%, or #FF, indicating that the color is fully opaque.

If you set the Alpha value to 50%, you’ll see that the first two bytes in the color value are now #7F (127).

In the example below, we’ve set the the Foreground color of the label to Black, with an alpha value of 50% so that we can see through the label to the GUI behind it.

Filed under Blend Tagged with , , , , ,