WPF Korea +

'Resource'에 해당되는 글 2건

2008/08/07 마우스 움직임에 따라 나타나는 원 (1)
2008/07/23 Overriding default SystemColors in WPF (1)

WPF2008/08/07 00:55

마우스 움직임에 따라 나타나는 원

이번 시간에는 위 동영상과 같이 마우스가 움직일 때 마다 원이 나타나는 효과를 구현해 보았습니다. (동영상을 올릴때 압축이 되서 그런지 약간 지저분해 보이기도 하네요ㅎㅎ) 소스코드는 아래와 같습니다.

[XAML]

[C#]

public partial class Window1 : Window
{

public Window1()
{
InitializeComponent();
this.MouseMove += new MouseEventHandler(Window1_MouseMove);
}

void Window1_MouseMove(object sender, MouseEventArgs e)
{
Point Pt = e.GetPosition(this);
Add(Pt.X, Pt.Y);
}

//마지막으로 객체가 생성된 시간
TimeSpan LastAdd;
public void Add(double X, double Y)
{

if ((DateTime.Now.TimeOfDay - LastAdd).Milliseconds < 50) return;
LastAdd = DateTime.Now.TimeOfDay;

Ellipse Ellipse = new Ellipse();
Ellipse.Stroke = GetRandomColorBrush();

int Size = (Byte)Rnadom.Next(5, 15);
Ellipse.Width = Ellipse.Height = Size;
Ellipse.Name = "_" + Ellipse.GetHashCode().ToString();

Canvas.SetLeft(Ellipse, X - Size / 2);
Canvas.SetTop(Ellipse, Y - Size / 2);

Root.RegisterName(Ellipse.Name, Ellipse);
Root.Children.Add(Ellipse);

Storyboard EllipseStoryboard = (Resources["EllipseStoryBoard"] as Storyboard).Clone();
Storyboard.SetTargetName(EllipseStoryboard, Ellipse.Name);

EllipseStoryboard.Completed += new EventHandler(EllipseStoryboard_Completed);
Ellipse.BeginStoryboard(EllipseStoryboard);

}

SolidColorBrush GetRandomColorBrush()
{
Random Rnadom = new Random(DateTime.Now.Millisecond);
Color StrokeColor = Color.FromArgb(
(Byte)Rnadom.Next(80, 255),
(Byte)Rnadom.Next(0, 255),
(Byte)Rnadom.Next(0, 255),
(Byte)Rnadom.Next(0, 255)
);
return new SolidColorBrush(StrokeColor);

}

void EllipseStoryboard_Completed(object sender, EventArgs e)
{

Storyboard Storyboard = (sender as ClockGroup).Timeline as Storyboard;
Ellipse Ellipse = FindName(Storyboard.GetTargetName(Storyboard)) as Ellipse;

Root.UnregisterName(Ellipse.Name);
Root.Children.Remove(Ellipse);

}
}

코드가 꾀 길어 보이지만 실제로는 복잡한 내용은 없으니 한줄 한줄 천천히 살펴보시면 이해 하실 수 있을 것입니다. (혹시 이해가 잘 안 되는 부분이나 추가 설명이 필요한 부분은 댓글 달아주시면 설명 해드리도록 하겠습니다.)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Posted by 곡스

TAG Animation, c#, ELLIPSE, random, Resource, WPF

Trackback 0 Comment 1

WPF2008/07/23 05:13

Overriding default SystemColors in WPF

안녕하세요. 이번 시간에는 WPF에서 사용하는 Default System Color를 Overriding 하여 사용하는 방법에 대해 소개해 드리겠습니다. 먼저 Default System Color란 Windows에서 어떤 상황에 어떤 부분엔 어떤 Brush를 사용한다 라고 미리 정의해놓은 일종의 Color Table이라 할 수 있습니다. 이해를 돕기 위해 System Color가 사용되는 예를 보여드리자면, 아래 그림과 같이 TextBox나 ListBox, ComboBox에서 선택된 아이템은 배경을 파랑 색으로 보이는 것이 HiglighBrush가 파란색으로 설정 되어 있기 때문입니다.

이제 대충 뭔지 감이 오시나요? WPF에서는 SystemColor 를 System.Windows.SystemColors Class에 약 60여 개 정도 미리 정의 해놓고 각 상황에 맞게 사용하고 있습니다. 조금 옛날 이야기를 하자면, 기존 Win32이나 MFC를 사용하여 선택되었을 때의 색을 변경하기 위해서는 DrawItem부분에서 직접 Rectangle을 그려주는 방식을 사용했습니다. ComboBox, ListBox등 제각각 DrawItem에 그리는 코드를 추가해야 하기 때문에 코드 효율 면에서 매우 떨어지게 됩니다. 그렇다면, WPF는 어떨 가요?

WPF에서는 위와 같은 상황에서 System.Windows.SystemColosr의 ResourceKey를 사용하여 Brush를 참조하게 됩니다. 모든 종류의 기본적인 UI객체들이 SystemColor의 ResourceKey를 참조 하기 때문에 ResourceKey의 내용을 수정한다면 굳이 다시 그려줄 필요 없이, 변경된 내용이 적용됩니다.

그렇다면 어떻게 SystemColor ResourceKey를 수정할 수 있을가요? 간단합니다. 사용하고자 하는 객체의 리소스에 참조해야할 이름의 ResourceKey를 새로 생성하여 리소스를 Overriding하면 되는데요, 예를 들어서 아래 그림과 같이 아이템이 선택되었을 때 Highlight색상을 빨강색 으로 변경하고자 한다면 다음과 같이 할 수 있습니다.

<ListBox.Resources>

</ListBox.Resources>

</ListBox>

간단하죠? 그럼 리스트 박스가 하나가 아니라, 여러 개라면 어떻게 해야 할까요? 매번 저렇게 리소스를 추가해서 사용해야 할까요? 아닙니다. XAML은 Resource에도 Scope가 존재하기 때문에 부모 리소스에 한번만 적용을 하면 자식 객체들에서도 부모의 리소스를 사용이 가능합니다. 따라서 객체가 여러 개 존재한다 하더라도, 부모 객체에 리소스가 등록되어 있다면 부모 객체의 리소스를 사용하게 됩니다.

<StackPanel.Resources>

</StackPanel.Resources>

</ListBox>

</ListBox>

</ListBox>

</StackPanel>

Resource Scope를 잘 활용하면 몇몇 객체는 빨간색이 몇몇 객체는 다른 색을 적용하는 것 또한 가능합니다. 그럼 오늘 포스팅은 여기까지로 하고 SystemColors Class의 멤버를 정리해 놓은 표를 첨부합니다. 참고하시기 바랍니다.

멤버 (Windows.SystemColor)	설명
ActiveBorderBrush	활성 창의 테두리 색인 SolidColorBrush를 가져옵니다.
ActiveBorderBrushKey	활성 창의 테두리를 칠하는 데 사용되는 SolidColorBrush의 ResourceKey를 가져옵니다.
ActiveBorderColor	활성 창 테두리의 색인 Color 구조체를 가져옵니다.
ActiveBorderColorKey	활성 창 테두리의 Color에 대한 ResourceKey를 가져옵니다.
ActiveCaptionBrush	활성 창 제목 표시줄의 배경색인 SolidColorBrush를 가져옵니다.
ActiveCaptionBrushKey	활성 창 제목 표시줄의 배경을 칠하는 데 사용되는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
ActiveCaptionColor	활성 창 제목 표시줄의 배경색인 Color 구조체를 가져옵니다.
ActiveCaptionColorKey	활성 창 제목 표시줄의 배경 Color에 대한 ResourceKey를 가져옵니다.
ActiveCaptionTextBrush	활성 창 제목 표시줄의 텍스트 색인 SolidColorBrush를 가져옵니다.
ActiveCaptionTextBrushKey	활성 창 제목 표시줄의 텍스트를 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
ActiveCaptionTextColor	활성 창 제목 표시줄의 텍스트 색인 Color 구조체를 가져옵니다.
ActiveCaptionTextColorKey	활성 창 제목 표시줄에 있는 텍스트의 Color에 대한 ResourceKey를 가져옵니다.
AppWorkspaceBrush	응용 프로그램 작업 영역의 색인 SolidColorBrush를 가져옵니다.
AppWorkspaceBrushKey	응용 프로그램 작업 영역을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
AppWorkspaceColor	응용 프로그램 작업 영역의 색인 Color 구조체를 가져옵니다.
AppWorkspaceColorKey	응용 프로그램 작업 영역의 Color에 대한 ResourceKey를 가져옵니다.
ControlBrush	3차원 표시 요소의 표면 색인 SolidColorBrush를 가져옵니다.
ControlBrushKey	3차원 표시 요소의 표면을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
ControlColor	3차원 표시 요소의 표면 색인 Color 구조체를 가져옵니다.
ControlColorKey	3차원 표시 요소의 표면 Color에 대한 ResourceKey를 가져옵니다.
ControlDarkBrush	3차원 표시 요소의 그림자 색인 SolidColorBrush를 가져옵니다.
ControlDarkBrushKey	3차원 표시 요소의 그림자를 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
ControlDarkColor	3차원 표시 요소의 그림자 색인 Color 구조체를 가져옵니다.
ControlDarkColorKey	3차원 표시 요소의 그림자 Color에 대한 ResourceKey를 가져옵니다.
ControlDarkDarkBrush	3차원 표시 요소의 짙은 그림자 색인 SolidColorBrush를 가져옵니다.
ControlDarkDarkBrushKey	3차원 표시 요소의 짙은 그림자를 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
ControlDarkDarkColor	3차원 표시 요소의 짙은 그림자 색인 Color 구조체를 가져옵니다.
ControlDarkDarkColorKey	3차원 표시 요소의 강조 색의 짙은 그림자 Color에 대한 ResourceKey를 가져옵니다.
ControlLightBrush	3차원 표시 요소의 옅은 색인 SolidColorBrush를 가져옵니다.
ControlLightBrushKey	3차원 표시 요소의 옅은 색 영역을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
ControlLightColor	3차원 표시 요소의 옅은 색인 Color 구조체를 가져옵니다.
ControlLightColorKey	3차원 표시 요소의 강조 Color에 대한 ResourceKey를 가져옵니다.
ControlLightLightBrush	3차원 표시 요소의 강조 색인 SolidColorBrush를 가져옵니다.
ControlLightLightBrushKey	3차원 표시 요소의 강조 영역을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
ControlLightLightColor	3차원 표시 요소의 강조 색인 Color 구조체를 가져옵니다.
ControlLightLightColorKey	3차원 표시 요소의 강조 Color에 대한 ResourceKey를 가져옵니다.
ControlTextBrush	3차원 표시 요소의 텍스트 색인 SolidColorBrush를 가져옵니다.
ControlTextBrushKey	3차원 표시 요소의 텍스트를 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
ControlTextColor	3차원 표시 요소의 텍스트 색인 Color 구조체를 가져옵니다.
ControlTextColorKey	3차원 표시 요소의 텍스트 Color에 대한 ResourceKey를 가져옵니다.
DesktopBrush	바탕 화면의 색인 SolidColorBrush를 가져옵니다.
DesktopBrushKey	바탕 화면을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
DesktopColor	바탕 화면의 색인 Color 구조체를 가져옵니다.
DesktopColorKey	바탕 화면의 Color에 대한 ResourceKey를 가져옵니다.
GradientActiveCaptionBrush	활성 창 제목 표시줄에 있는 그라데이션의 오른쪽 색인 SolidColorBrush를 가져옵니다.
GradientActiveCaptionBrushKey	활성 창 제목 표시줄에 있는 그라데이션의 오른쪽 색인 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
GradientActiveCaptionColor	활성 창 제목 표시줄에 있는 그라데이션의 오른쪽 색인 Color 구조체를 가져옵니다.
GradientActiveCaptionColorKey	활성 창 제목 표시줄에 있는 그라데이션의 오른쪽 Color에 대한 ResourceKey를 가져옵니다.
GradientInactiveCaptionBrush	비활성 창 제목 표시줄에 있는 그라데이션의 오른쪽 색인 SolidColorBrush를 가져옵니다.
GradientInactiveCaptionBrushKey	비활성 창 제목 표시줄에 있는 그라데이션의 오른쪽 색인 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
GradientInactiveCaptionColor	비활성 창 제목 표시줄에 있는 그라데이션의 오른쪽 색인 Color 구조체를 가져옵니다.
GradientInactiveCaptionColorKey	비활성 창 제목 표시줄에 있는 그라데이션의 오른쪽 Color에 대한 ResourceKey를 가져옵니다.
GrayTextBrush	비활성 텍스트 색인 SolidColorBrush를 가져옵니다.
GrayTextBrushKey	비활성 텍스트를 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
GrayTextColor	비활성 텍스트 색인 Color 구조체를 가져옵니다.
GrayTextColorKey	비활성 텍스트의 Color에 대한 ResourceKey를 가져옵니다.
HighlightBrush	선택된 항목의 배경을 칠하는 SolidColorBrush를 가져옵니다.
HighlightBrushKey	선택된 항목의 배경을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
HighlightColor	선택된 항목의 배경색인 Color 구조체를 가져옵니다.
HighlightColorKey	선택된 항목의 배경 Color에 대한 ResourceKey를 가져옵니다.
HighlightTextBrush	선택된 항목의 텍스트 색인 SolidColorBrush를 가져옵니다.
HighlightTextBrushKey	선택된 항목의 텍스트를 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
HighlightTextColor	선택한 항목의 텍스트 색인 Color 구조체를 가져옵니다.
HighlightTextColorKey	선택된 항목의 텍스트 Color에 대한 ResourceKey를 가져옵니다.
HotTrackBrush	핫 트랙 항목을 지정하는 데 사용되는 색인 SolidColorBrush를 가져옵니다.
HotTrackBrushKey	핫 트랙 항목을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
HotTrackColor	핫 트랙 항목을 지정하는 데 사용되는 색인 Color 구조체를 가져옵니다.
HotTrackColorKey	핫 트랙 항목을 나타내는 Color에 대한 ResourceKey를 가져옵니다.
InactiveBorderBrush	비활성 창의 테두리 색인 SolidColorBrush를 가져옵니다.
InactiveBorderBrushKey	비활성 창의 테두리를 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
InactiveBorderColor	비활성 창 테두리의 색인 Color 구조체를 가져옵니다.
InactiveBorderColorKey	비활성 창 테두리의 Color에 대한 ResourceKey를 가져옵니다.
InactiveCaptionBrush	비활성 창 제목 표시줄의 배경색인 SolidColorBrush를 가져옵니다.
InactiveCaptionBrushKey	비활성 창 제목 표시줄의 배경을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
InactiveCaptionColor	비활성 창 제목 표시줄의 배경색인 Color 구조체를 가져옵니다.
InactiveCaptionColorKey	비활성 창 제목 표시줄의 배경 Color에 대한 ResourceKey를 가져옵니다.
InactiveCaptionTextBrush	비활성 창 제목 표시줄의 텍스트 색인 SolidColorBrush를 가져옵니다.
InactiveCaptionTextBrushKey	비활성 창 제목 표시줄의 텍스트를 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
InactiveCaptionTextColor	비활성 창 제목 표시줄의 텍스트 색인 Color 구조체를 가져옵니다.
InactiveCaptionTextColorKey	비활성 창 제목 표시줄의 텍스트 Color에 대한 ResourceKey를 가져옵니다.
InfoBrush	ToolTip 컨트롤의 배경색인 SolidColorBrush를 가져옵니다.
InfoBrushKey	ToolTip 컨트롤의 배경을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
InfoColor	ToolTip 컨트롤의 배경색인 Color 구조체를 가져옵니다.
InfoColorKey	ToolTip 컨트롤의 배경 Color에 대한 ResourceKey를 가져옵니다.
InfoTextBrush	ToolTip 컨트롤의 텍스트 색인 SolidColorBrush를 가져옵니다.
InfoTextBrushKey	ToolTip 컨트롤의 텍스트를 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
InfoTextColor	ToolTip 컨트롤의 텍스트 색인 Color 구조체를 가져옵니다.
InfoTextColorKey	ToolTip 컨트롤의 텍스트 Color에 대한 ResourceKey를 가져옵니다.
MenuBarBrush	메뉴 모음의 배경색인 SolidColorBrush를 가져옵니다.
MenuBarBrushKey	메뉴 모음의 배경을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
MenuBarColor	메뉴 모음의 배경색인 Color 구조체를 가져옵니다.
MenuBarColorKey	메뉴 모음의 배경 Color에 대한 ResourceKey를 가져옵니다.
MenuBrush	메뉴의 배경색인 SolidColorBrush를 가져옵니다.
MenuBrushKey	메뉴의 배경을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
MenuColor	메뉴의 배경색인 Color 구조체를 가져옵니다.
MenuColorKey	메뉴의 배경 Color에 대한 ResourceKey를 가져옵니다.
MenuHighlightBrush	메뉴 항목을 강조 표시하는 데 사용되는 색인 SolidColorBrush를 가져옵니다.
MenuHighlightBrushKey	강조 표시된 메뉴 항목을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
MenuHighlightColor	메뉴 항목을 강조 표시하는 데 사용되는 색인 Color 구조체를 가져옵니다.
MenuHighlightColorKey	강조 표시된 메뉴 항목의 배경 Color에 대한 ResourceKey를 가져옵니다.
MenuTextBrush	메뉴의 텍스트 색인 SolidColorBrush를 가져옵니다.
MenuTextBrushKey	메뉴의 텍스트를 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
MenuTextColor	메뉴의 텍스트 색인 Color 구조체를 가져옵니다.
MenuTextColorKey	메뉴의 텍스트 Color에 대한 ResourceKey를 가져옵니다.
ScrollBarBrush	스크롤 막대의 배경색인 SolidColorBrush를 가져옵니다.
ScrollBarBrushKey	스크롤 막대의 배경을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
ScrollBarColor	스크롤 막대의 배경색인 Color 구조체를 가져옵니다.
ScrollBarColorKey	스크롤 막대의 배경 Color에 대한 ResourceKey를 가져옵니다.
WindowBrush	창 클라이언트 영역의 배경색인 SolidColorBrush를 가져옵니다.
WindowBrushKey	창 클라이언트 영역의 배경을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
WindowColor	창 클라이언트 영역의 배경색인 Color 구조체를 가져옵니다.
WindowColorKey	창 클라이언트 영역의 배경 Color에 대한 ResourceKey를 가져옵니다.
WindowFrameBrush	창 프레임의 색인 SolidColorBrush를 가져옵니다.
WindowFrameBrushKey	창 프레임을 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
WindowFrameColor	창 프레임의 색인 Color 구조체를 가져옵니다.
WindowFrameColorKey	창 프레임의 Color에 대한 ResourceKey를 가져옵니다.
WindowTextBrush	창 클라이언트 영역의 텍스트 색인 SolidColorBrush를 가져옵니다.
WindowTextBrushKey	창 클라이언트 영역의 텍스트를 칠하는 SolidColorBrush에 대한 ResourceKey를 가져옵니다.
WindowTextColor	창의 클라이언트 영역의 텍스트 색인 Color 구조체를 가져옵니다.
WindowTextColorKey	창 클라이언트 영역의 텍스트 Color에 대한 ResourceKey를 가져옵니다.양식의 맨 아래