TimerTrigger는 설정한 키조합에 따라 작업을 수행합니다. TriggerType을 TimerTrigger로 바꾼 모습입니다. 세부 속성에 대해 알아보겠습니다. MillisecondsPerTick : 밀리초 단위로, 작업 수행 전 시간을 지정 TotalTicks : 작업 횟수에 대한 상한값을 지정 EventName : 작동할 이벤트를 설정합니다. 아래, 왼쪽그림처럼 설정하고 실행해 보시면, 부모인 버튼이 클릭되고 2초후에 State가 동작합니다.
KeyTrigger는 설정한 키조합에 따라 작업을 수행합니다. TriggerType을 KeyTrigger로 바꾼 모습입니다. 세부 속성에 대해 알아보겠습니다. ActiveOnFocus : 체크 시, 키를 제대로 입력해도 부모가 포커스받지 않은 상태면 작동안함 FiredOn : KeyDown, KeyUp 설정 Key : 누를 키설정 Modifiers : 함께 누를 보조 키 설정 아래, 왼쪽그림처럼 설정하고 실행해 보시면, Control + D 누르면 State가 잘 동작하지만, 오른쪽 그림처럼 ActiveOnFocus에 체크하고, 설정키 누르면 동작이 안되죠. 포커스를 받기위해, 버튼을 한번 클릭하시거나, 탭으로 포커스 받은 후에 설정키 누르면 실행됩니다.
ChangePropertyAction은 개체의 속성을 쉽게 변경하거나 조정합니다. PropertyChangedTrigger는 개체의 속성값이 변경될 때, 액션이 작동합니다. 자산을 클릭하거나 단축키(Ctrl+.)를 사용하시면 확장리스트가 나오구요. ChangePropertyAction 을 드래그 하여 사용할 컨트롤에 안착시킵니다. 아래와 같이 Button에 안착시켰으며, ChangePropertyAction 의 세부 속성을 설정합니다. 버튼 클릭했을때, rectangle의 Fill값을 #FFE99DFF로 변경. 실행해보시면, 잘 되시죠? PropertyChangedTrigger를 알아보겠습니다. Grid에 GotoStateAction을 달고, TriggerType을 PropertyChangedTrigge..
DataTrigger는데이터 바인딩 된 속성값과 설정이 일치했을 때, 작동합니다. TriggerType 새로만들기로 DataTrigger를 선택한 모습입니다. 바인딩을 위해 예제데이터를 만들고, Property1속성과 바인딩하고 Value를 "Go"로 설정하여, 바인딩 값이 Go와 일치(Equal)했을 때, State가 작동되도록 하였습니다. 데이터 값을 바꿀 개체가 필요하므로 textBox역시 Property1과 바인딩 합니다. 그럼, 프로젝트를 실행해서 확인해보겠습니다. 오른쪽만 State가 동작되는 모습입니다. textBox는 LostFocus가 기본값이라, 포커스가 빠졌을때, 동작하게 됩니다. 포커스가 버튼에 있는 모습이죠. 포커스 빠질때 말고, 바로 반응하게 하려면 아래와 같이 하려면 바인딩에 ..
DataStoreChangedTrigger는 데이터 저장소의 속성 값이 변경되면, 설정이 작동합니다. Conditions는 지정할 수 있는 조건입니다. Behaviour 속성에 있는 Trigger 와 Conditions입니다. 이전에 사용하셨던 파일 사용하시면 되겠죠? 트리거부터 시작하겠습니다. 기본이 EvetTrigger로 설정되어 있습니다. 새로 만들기를 클릭하면, 다른 형식의 트리거를 만나보실 수 있습니다. 하나씩 사용해보겠습니다. DataStoreChangedTrigger 데이터 저장소의 속성 값이 변경되면, 설정이 작동합니다. - 트리거 타입이 변경되면서, 세부속성도 바뀌었습니다. - 새 속성 만들기를 이용해, DataStore를 만들 수 있습니다. 더 간단히 보여드리고자, 텍스트박스를 추가하였..
GoToStateAction는 설정한 State를 작동하게 만들어 주는 기능입니다. 전 시간에 사용했던 VisualState에 있는 파일 그대로 사용합니다. 자산을 클릭하거나 단축키(Ctrl+.)를 사용하시면 확장리스트가 나오구요. GotoStateAction을 드래그 하여 사용할 컨트롤에 안착시킵니다. 아래와 같이 Action을 처리하게 될 Button에 안착시켰으며, GotoStateAction의 세부 속성창이 나타납니다. Button에 GotoStateAction을 하나 더 붙이고, 각각을 아래와 같이 설정합니다. Button MouseEnter일 때, Right State를 MouseLeave일 때, Left State를 실행하라 입니다. 실행해보시면, 잘 되시죠? 이와 같이, 방아쇠 역할(트리거..
VisualStateManeger는 상태전환에 따른 뷰를 정의합니다. 기본 State창에는 아무것도 없습니다. 각 요소들에 대해 설명을 드리기 위해 만들어 놓은 겁니다. 보시면 다 알만 한 것들이지만. 그 중에 낯선 것들에 대해서만 말씀드릴께요. 전환미리보기 설정 :각 상태에 대한 변화를 미리보는 것 FluidLayout 설정 : 뜻 그대로 유동적인 레이아웃을 부드럽게 보여줍니다. EasingFunction : 전환효과 가속도 FX : 전환효과 모음 컨트롤들에는 기본 내장돼 있는 State들이 있습니다. 그 중 버튼 템플릿 깐 후의 State 기본 모습입니다. 각 상태전환에 따라 나뉘어져 있네요. 자 그럼 State를 직접 만들어 사용해보겠습니다. Puple색 Rectangle이 좌우로 이동하는 애니메이..
Triggers는 지정된 조건에 맞을 때 속성 값을 적용하거나 작업을 수행합니다. Trigger - 단일 조건 MultiTrigger - 집합 조건 DataTrigger - 바인딩 된 데이터 단일 조건 MultiDataTrigger - 바인딩 된 데이터 집합 조건 EventTrigger - 이벤트 조건 Style,Template 안에서만 사용되며, 기본컨트롤 템플릿까시면(복사본) 포함되어 있습니다. 그럼, 하나씩 알아보도록 하죠. Trigger 단일 조건 충족 시, 작업 수행 - TextBlock MouseOver시, FontSize 25로 변경 MultiTrigger 집합 조건 충족 시, 작업 수행 - TextBlock에 MouseOver가 되면서 Text가 MultiTrigger일 경우, FontSi..
DataBinding은 UI와 데이터를 서로 연결하는 프로세스입니다. 바인딩 설정을 올바르게하여 사용목적에 맞게 사용합니다. 아래 그림과 같이 바인딩 형식들을 하나씩 알아보겠습니다. ElementName 이름있는 요소에 바인딩을 합니다 -Slider의 Value값을 TextBlock의 Text가 Binding한 상태 RelativeSource FindAncestor 자신의 위치에서 조상을 찾아 바인딩합니다. - 조상타입(AncestorType)이 보더이며, 4번째 윗조상(AncestorLevel=4)의 BackGround를 별의 Fill이 Binding한 상태 RelativeSource PreviousData 데이터리스트에서 이전데이터를 바인딩합니다. - 첫번째의 이전데이터가 없으므로, 빈값이 되고 두번..
Template은 모양을 재정의 하는 것입니다. Template은 몇 가지가 있지만 크게 ControlTemplate과 DataTemplate, ItemsPanelTemplate으로 나뉩니다. ControlTemplate은 컨트롤의 모양을 정의합니다. DataTemplate은 Binding된 데이터를 담는 모양을 정의하고, ItemsPanelTemplate은 아이템들의 정렬을 정의합니다. 그럼 순서대로 하나씩 알아보겠습니다. ControlTemplate 왼쪽버튼은 기본 컨트롤, 오른쪽버튼은 Template 적용. 소스를 보시면, ControlTemplate에 그리드와 ContentPresenter로 간단히 만들고, 오른쪽 버튼에만 적용시켰습니다. DataTemplate,ItemsPanelTemplat..