본문 바로가기

XAML

032. 데이터템플릿 & 트리거(DataTemplate & Trigger) #3 이전 포스트에서는 데이타템플릿, 스타일을 컨버터, 셀렉터를 활용해 하나의 컨트롤에서 다양한 형태를 보여줄 수 있었습니다. 이번 포스트에서는 트리거를 이용하는 방법을 살펴봅니다. 12345678910111213141516171819 Collapsed Colored by Color Scriptercs 이번에는 데이타템플릿이 하나만 필요합니다. 다른 사람의 메시지를 기본 템플릿으로 정의하고 데이타트리거를 이용해 내 메시지일 때에 달라져야하는 속성들을 정의합니다. 이전 예제와 동일한 형태로 정의하므로 자세한 프로퍼티 사항들은 생략합니다. 필요한 요소들을 TargetName에 지정해야하므로 x:Name을 선언하는 것에 주의합니다. 1234567891011121314151617 Colored by Color Scr.. 더보기
031. 데이터템플릿 & 셀렉터(DataTemplate & Selector) #2 이전 포스트에서는 데이타템플릿(DataTemplate)이 하는 기능을 알아보았고 컨버터(Converter)를 이용해 내가 보낸 메시지와 다른 사람이 보낸 메시지를 다르게 보이게 하는 방법을 살펴봤습니다. 이번 포스트에서는 셀렉터(Selector)가 어떤 기능을 하는지 어떻게 사용하는지 살펴봅니다. 123456789101112 Colored by Color Scriptercs 기존의 데이타템플릿의 키값을 DataTemplate_Message_Left로 변경하고 전체 XAML 코드를 [복사 > 붙여넣기]합니다. 12345678910111213 Colored by Color Scriptercs 복사+붙여넣기한 데이타템플릿의 키값은 DataTemplate_Message_Right으로 변경합니다. 데이타템플릿이 .. 더보기
030. 데이타템플릿 & 컨버터(DataTemplate & Converter) #1 이번 포스트 제목은 데이타템플릿(DataTemplate)이긴 하지만 예전 포스트들에서 다뤘던 다양한 기능들과 함께 살펴봅니다. 목록형 컨트롤들에서는 하나의 값을 보여주기도 하지만 다양한 형태의 값들을 함께 보여주기도 합니다. 데이타템플릿은 이처럼 다양한 데이터를 어떻게 구성해서 보이게 할지 정의하는 역할을 합니다. 이번 시리즈 포스트의 최종 결과물입니다. 평소에 흔하게 사용하는 채팅앱을 예로 들어 이해를 돕고자 합니다. 2개의 목록형 예제는 시각적인 결과는 동일하지만 전혀 다른 방법으로 만들었습니다. 이번 시리즈 포스트에서는 데이터템플릿뿐만 아니라 스타일(Style), 컨버터(Converter), 셀렉터(Selector), 트리거(Trigger) 등 다양한 기능들을 함께 다루게 됩니다. 1234567pu.. 더보기
029. 툴팁 말풍선 슬라이더(ToolTip Balloon Slider) #3 이전 포스트들에서 여러가지 방법으로 썸(Thumb)에 말풍선 툴팁(ToolTip)이 따라다니는 슬라이더(Slider)를 만들어 보았습니다. 그런데 뭔가 만족스럽지 않았습니다. 그래서 좀 더 깔끔한 방법이 없을까 한참을 고민하고 태스트하고 찾아보던 끝에 하나의 포스트를 더 이어가기로 했습니다. 예제에 사용된 대부분의 코드는 동일하니 달라진 점만 일부 설명합니다. 1234567891011121314 Colored by Color Scriptercs XAML 코드에서 사용된 Popup은 그대로 사용됩니다. 추가로 이전 예제에서 불필요하게 사용되었던 VerticalOffset 프로퍼티는 -30으로 고정 시켰습니다. 팝업의 세로 위치는 변하지 않으므로 미리 고정되어도 될 것 같습니다. 123456789 Color.. 더보기
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.. 더보기