본문 바로가기

2018/03

028. 툴팁 말풍선 슬라이더(ToolTip Balloon Slider) #2 커스텀 비헤이비어를 작성하기 전에 SliderHorizontal 템플릿에 추가할 것이 있습니다. 지금까지는 ToolTip(툴팁)을 어떻게든 이용해 보려고 했지만 시나리오에 부합되지 않는 면이 있었습니다. 그래서 툴팁을 대체할 Popup(팝업)을 사용하려고 합니다. 123456789101112131415 Colored by Color Scriptercs 이전 포스트에서 작성했던 툴팁은 잊어버리고 PART_Track 아래에 팝업을 추가합니다. 이전 포스트에서 다뤘던 툴팁 말풍선의 템플릿 그대로 가져왔습니다. 다른 점은 ContentPresenter 대신에 여러모로 다루기 쉬운 원래 TextBlock으로 대체했습니다. 값을 표출하기 위해 ElementName 문법을 이용해 PART_Track의 Value 속성.. 더보기
027. 툴팁 말풍선 슬라이더(ToolTip Balloon Slider) #1 이전 포스트에서도 잠깐 설명했지만 Slider의 Thumb(썸)을 드래그하면 현재 Value(값)가 툴팁 말풍선 안에서 표출되는 간단한 기능을 구현해보려 합니다. 여러가지 방식으로 접근해보면서 마주하게 되는 문제점들을 하나씩 짚어봅시다. 툴팁 말풍선이 Slider의 썸을 따라다니도록 하고 싶습니다. 먼저 썸이 어디에 있는지 찾아 봅시다. Blend for VS의 [템플릿 편집 > 복사본 편집] 기능을 이용해 Slider의 기본 스타일 및 템플릿을 얻을 수 있습니다. 123cs 자동으로 지정한 키네임이 스타일 속성에 선언됩니다. [템플릿 편집 > 복사본 편집] 기능을 이용해 얻어낸 Slider의 기본 스타일 및 템플릿의 양이 좀 많아 혼란이 올 수 있습니다. 조금만 정리해서 보면 그렇게 복잡하지 않습니다... 더보기
026. 툴팁 말풍선(ToolTip Balloon) 이번 포스트는 잠시 쉬어가는 포스트입니다. 다음 포스트에 사용될 디자인 요소도 제작할 겸해서 말입니다. 구글에서 말풍선 이미지를 검색해보면 매우 다양한 말풍선 디자인을 찾을 수 있습니다. 참고하세요. 저는 최대한 간소하게 표현해볼까 합니다. 다음 포스트에서 사용될 예제를 먼저 보도록 합시다. 기본 슬라이더의 Thumb(썸)을 드래그하면 현재 Value(값)가 말풍선 안에서 표출되는 간단한 기능입니다. 실제 구현은 그리 간단하지 않습니다만 다음 포스트에서 만들어 보려고 합니다. 12345678 Colored by Color Scriptercs 첫번째 방법입니다. 말풍선 몸체와 꼭지는 세로로 정렬되는 형태이므로 전체를 StackPanel로 그룹화했습니다. 값이 들어갈 TextBlock는 Border로 한번 .. 더보기
025. 커스텀 트리거 & 액션(Custom Trigger & Action) #2 이전 포스트에서 기본 XAML 코드와 기본 CS 코드를 준비했습니다. 간단한 시계가 완성되었습니다. 이제부터 커스텀 트리거와 커스텀 액션을 정의해봅시다. TimeChangedTrigger < TimeToAlarmBehavior.cs 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455public class TimeChangedTrigger : TriggerBase{ public string SpecialTime { get { return (string)GetValue(SpecialTimeProperty); } set { SetValue(SpecialTimeProperty, va.. 더보기
024. 커스텀 트리거 & 액션(Custom Trigger & Action) #1 이전 포스트에서는 OnlyOneExpanderBehavior 비헤이비어 단독으로 사용되었지만 더 이전 포스트에서 살펴본 CallMethodAction 비헤이비어인 경우 Trigger(트리거)와 Action(액션)으로 구성되어 있던 것을 알 수 있었습니다. 이번 포스트에서는 Custom Trigger와 Custom Action에 대해 알아 봅시다. 이번에 사용될 예제는 간단한 알람 시계입니다. 123456789101112131415161718192021222324252627 Colored by Color Scriptercs 기본 XAML 코드 : MainWindow.xaml 예제를 위한 XAML 코드입니다. 시, 분, 초를 각 TextBlock으로 나누어 표현합니다. CS 코드에서 접근하기 윈해 x:Nam.. 더보기
023. 커스텀 비헤이비어(Custom Behavior) 이전 포스트에서는 기본으로 제공되는 비헤이비어 사용법을 살펴보았습니다. 이번 포스트에서는 사용자가 직접 비헤이비어를 만들어보는 방법을 계속해서 살펴보겠습니다. 먼저 예제를 위한 상황 설정에 대한 설명입니다. 위 이미지처럼 Expander 컨트롤을 여러 개 동시에 사용하는 작은 인터페이스에서는 컨텐츠 노출을 효율적으로 하기 위해 한번에 하나씩만 열리도록 제약을 줄 때가 종종 있습니다. 12345678910111213141516 Colored by Color Scriptercs 기본 XAML 코드 : MainWindow.xaml XAML 코드는 최대한 간단히 StackPanel를 이용해 여러 개의 Expander 컨트롤을 하나의 그룹으로 만들었습니다. OnlyOneExpanderBehavior.cs 1234.. 더보기