2010년 12월 2일 목요일

Creating Border-less Windows in WPF











Border-less Windows 즉, 윈도우 창에 테두리가 없는 윈도우를 말한다. WPF 에서 스플래쉬 윈도우나, 일반적이지 않은 특별한 윈도우를 만들기 위해서는 border 가 없는 윈도우에 작업을 한다. 비단 WPF 뿐만이 아니라 MFC, WinForm 에서도 이런 방식을 사용하고 있다. 






Figure 1 : border 를 갖지 않는 윈도우






Setting Window Attributes



Border가 없는 윈도우를 만들기 위해서는 window의 다음 어트리뷰트를 설정해주어야 한다.



● WindowStyle="None"

● ShowInTaskBar="False"

● AllowsTransparency="True"

● Background="Transparent"



WindowStyle, ShowInTaskBar 어트리뷰트 WinForm 에서도 사용되어지니 눈에 익숙하다. 실제로 border를 없애는 것은 WindowStyle 어트리뷰트이며 ShowInTaskBar는 선택적인 옵션이다. AllowTransparency 과 Background 어트리뷰트가 중요하다. 이 두 어트리뷰트는 함께 설정해야 하며, Background를 Transparent로 설정하기 위해선 AllowTransparency를 True로 설정해야 한다. 이 두 어트리뷰트를 설정하지 않으면 border가 계속 보이게 된다.






Figure 2 : WindowStyle="None", AllowTransparency 와 Background 는 설정하지 않은 경우





예제 XAML 코드



<Window x:Class="NoBorderDemo.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" 

        Height="350" Width="525"

        WindowStyle="None" AllowsTransparency="True" Background="Transparent"

        ResizeMode="NoResize"

        ShowInTaskbar="False"

        WindowStartupLocation="CenterScreen">

    <Border BorderBrush="Gray"

            BorderThickness="0, 0, 2, 2"

            CornerRadius="10"

            Background="Beige">

        <Border BorderBrush="Transparent"

                BorderThickness="5"

                CornerRadius="10">

            <Border BorderBrush="Black"

                    BorderThickness="1.5"

                    CornerRadius="10">

                <StackPanel Background="Yellow"

                            VerticalAlignment="Bottom"

                            HorizontalAlignment="Center"

                            Margin="10">

                    <Button Click="Button_Click">

                        Close Me

                    </Button>                    

                </StackPanel>

            </Border>        

        </Border>

    </Border>

</Window>





댓글 없음:

댓글 쓰기