|
Gadget을 위한 Class |
작성자 : 김종현 |
작성일 : 2011-04-16 | |
주 제 : Gadget을 만들기 위해 필요한 새로운 Class 학습 |
※ 이 문서는 .NET Framework 3.5 version 기반으로 설명되었습니다.
◎ Gadget
- 와이드 스크린을 가진 디스플레이 장치가 보편화 되고 있습니다. 전통적인 4:3 비율의 화면 크기에 익숙한 사람들은 16:9 비율의 화면을 보면 좌우로 넓어서 뭔가 좀 허전하게 느껴지기도 합니다. 하지만 Windows Sidebar를 잘 활용하면 바탕화면을 보다 다양한 정보로 그리고 필요한 정보를 빠르게 확인할 수 있습니다. 달력이나 시계, 이미지 뷰어와 같은 작은 응용 프로그램들을 Sidebar에 동작하게 할 수 있는데 이와 같이 Sidebar에서 실행되는 작은 프로그램을 Gadget이라고 합니다. 이러한 Gadget은 실제로 html page와 java script를 이용해서 구현된 일종의 웹 페이지라고 할 수 있습니다.
- 그러면 이제 Gadget을 만들기 위해 필요한 Class와 사용 예제에서 사용한 Class에 대해서 알아 보도록 하겠습니다.
◎ AllowsTransparency Class
- 네임스페이스 : System.Windows
- 창에서 투명도를 지원하면 True, 그렇지 않으면 false입니다.
- Transparent를 사용하여 창의 Background 속성을 투명한 색으로 설정하면 창이 불투명하게 유지됩니다. 즉, 창 “아래”의 실행 중인 응용 프로그램과 바탕화면을 볼 수 없습니다. 이러한 형식의 투명도를 사용하려면 True 값으로 설정해야 합니다. 사각형이 아닌 창을 만드는데 사용이 되므로 WindowStyle 값을 None으로 설정해야 합니다. 그렇지 않을 경우에 예외가 발생합니다.
<Window x:Class="AboutGadget.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300" AllowsTransparency="True" WindowStyle="None" Background="Transparent" MouseLeftButtonDown="Window_MouseLeftButtonDown"> </Window> |
Gadget의 대부분을 차지하는 초기 설정입니다. 다시 한 번 사용 예제와 함께 설명하도록 하겠습니다. AllowsTransparency를 True 값으로 준 것은 투명하게 만든다는 의미입니다. 당연히 False는 불투명입니다. AllowsTranparency를 True 값을 주었을 경우에는 WindowsStyle을 None으로 설정해 줘야 하고 Background를 Transparent로 해줘야 합니다. WindowsStyle 값이 없다면 프로그램이 제대로 실행이 안되고 Background가 없다면 흰색 바탕이 따라다니는 이상한 모습을 확인 할 수 있습니다. Gadget은 화면에서 자유로운 이동이 필수적이기 때문에 마우스 클릭 후 드래그를 하면 원하는 위치로 이동이 되게 할 수 있도록 MouseLeftButtonDown 이벤트를 생성해서 코드를 삽입해 줍니다. 물론 불투명하고 윈도우 창 모양의 Gadget을 원한다면 필요 없는 설정입니다. 하지만 이미 그것은 Gadget 이라고 부르기에는 애매한 무엇이 된다고 할 수 있습니다.
◎ BitmapEffect Class
- 네임스페이스 : System.Windows.Media.Effects
- .NET Framwork 4.0에서는 더 이상 사용되지 않아서 Effect로 대체 되지만 3.5에서는 사용 가능합니다. 비트맵 효과를 정의하고, 파생 클래스는 Button 또는 Image 등의 Visual 개체에 적용할 수 있는 효과를 정의합니다.
- 크기가 큰 표시 항목이나 애니메이션에 비트맵 효과를 적용하게 되면 성능이 저하되니 주의하기 바랍니다.
<Grid> <Ellipse Fill="Aqua" Opacity="0.5" Margin="20" Width="150" Height="200"> <Ellipse.BitmapEffect> <DropShadowBitmapEffect/> </Ellipse.BitmapEffect> </Ellipse> </Grid> |
Gadget을 사용하는데 있어서 필수 사항은 아니지만, 예를 들어 만든 Gadget에 사용된 Class입니다. Ellipse는 타원을 의미하고 타원의 색을 Aqua로 줬습니다. Opacity는 투명도를 의미하는데 0.5를 줬고 나머지는 우리가 잘 알고 있는 Margin,Width,Height와 다를 것이 없습니다. BitmapEffect는 단일 효과로 적용되기 때문에 여러 효과를 적용하고 싶다면 BitmapEffectGroup을 사용하면 됩니다. 일단 예제에서는 단일 효과를 주기로 합시다. 그 중에 DropShadowBitmapEffect는 표시 개체 뒤쪽에 오프셋이 약간 적용된 그림자를 적용합니다.
◎ Gadget에 넣을 간단한 기능
<StackPanel Margin="100"> <TextBox x:Name="sendbox"></TextBox> <Button Click="Enter_Click" Margin="5">Enter</Button> <Button Margin="5" Click="Close_Click">Close</Button> <TextBox x:Name="receivebox"></TextBox> </StackPanel> |
StackPanel을 이용해서 Gadget 테두리 안의 적당한 위치에 배치해줍니다. Margin을 이용해도 되고 도구 상자를 이용해서 배치를 해도 됩니다. TextBox에 글씨를 입력하고 엔터 버튼을 누르면 밑에 있는 텍스트 박스에 출력이 되는 Gadget입니다.
private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { DragMove(); } private void Enter_Click (object sender, RoutedEventArgs e) { receivebox.Text = textbox.Text; textbox.Clear(); } private void Close_Click(object sender, RoutedEventArgs e) { Close(); } |
위에서 생성했던 각각의 이벤트에 해당하는 코드들을 삽입해 줍니다. 마우스왼쪽버튼 클릭과드래그 시에는 DragMove()를 호출해 주고, 엔터 버튼과 클로즈버튼에도 원하는 행동들을 코드로 삽입해 줍니다. 그러면 다음과 같은 화면을 Gadget 화면을 확인할 수 있습니다. sendbox에 글씨를 삽입하고 Enter를 누르면 receivebox에서 그 글씨를 받아주고 전송 이후에는 Clear 해줬기 때문에 지워지는 것을 확인 할 수 있습니다.
캡쳐를 하다 보니 전혀 Gadget 처럼 나오지 않았지만, 여러분은 개별적인 실습을 통해서 새로운 기능을 추가해 보고 Gadget의 효능을 직접 확인해 본다면 바로 느낌이 오게 될 겁니다.
참고 : Noenemy’s Code Foolosophy님의 블로그
완성된 예제 Gadget 파일 : AboutGadget.exe