5/02/2013

How can I make a transparent window in WPF?

We will make a transparent window, which can be adjusted the opicity by slider control, llike below picture.



To begin with, it is required to adjust 3 of properties. They are 'AllowsTransparency', 'Background' and 'WindowStyle'.
<Window x:class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" 
        AllowsTransparency="True" Background="Transparent"
        WindowStyle="None" >


And then, the opacity of window bind to slider control, like this,
<Window x:class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" 
        AllowsTransparency="True" Background="Transparent"
        WindowStyle="None"
        Height="550" Width="400" Opacity="{Binding Value, ElementName=slider}" >

Here is all xaml code.
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" 
        AllowsTransparency="True" Background="Transparent"
        WindowStyle="None"
        Height="550" Width="400" Opacity="{Binding Value, ElementName=slider}" >
    <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="6" Background="Gray">
        <Border BorderBrush="White" BorderThickness="1" CornerRadius="6">
            <DockPanel Background="#303030" Margin="2,2,2,2" >
                <Border Height="100" MouseMove="Header_MouseMove" DockPanel.Dock="Top" VerticalAlignment="Top">
                    <Button  Click="Button_Close" HorizontalAlignment="Right" Margin="0,0,0,80" Width="15" Height="20" VerticalAlignment="Bottom" BorderThickness="1">X</Button>
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
                            <GradientStop Color="#C0C0C0" Offset="0." />
                            <GradientStop Color="#303030" Offset="0.1" />
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Slider x:Name="slider" Height="20" DockPanel.Dock="Bottom" Maximum="1" Minimum="0.5" TickFrequency="0.2" Value="0.9"/>
                <Border Height="100" MouseMove="Header_MouseMove" DockPanel.Dock="Bottom" VerticalAlignment="Bottom">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,18">
                            <GradientStop Color="#303030" Offset="0." />
                            <GradientStop Color="#C0C0C0" Offset="0.1" />
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
            </DockPanel>
        </Border>
    </Border>
</Window>



No comments:

Post a Comment