본문 바로가기

tooltip

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로 한번 .. 더보기