2017년 7월 23일 일요일
2015년 12월 21일 월요일
2015년 10월 28일 수요일
[WPF] PlaceholderText
PlaceholderText는 값을 입력하지 않은 경우에 표시되는 텍스트 입니다
PlaceholderText기능은 TextBox편에서 다루었었는데요.
더 간단한 방법으로 해보려고 합니다.
그때는 포커스를 받는 순간 placeholderText가 사라졌었죠.
이번에는 UWP에서와 똑같이 포커스 받을 때가 아닌
입력하는 순간 PlaceholderText가 사라지게 하겠습니다.
TextBox편에서 사용했던 파일을 그대로 가져와서
ChangePropertyAction 3개를 전부 삭제합니다.
기본값으로 placeholderTextblock의 Visibility값을 Collpsed 해줍니다.
속성트리거 추가하시고, Text속성을 선택합니다.
그리고 placeholderTextblock의 Visibility값을 Visible 해줌으로써, 완성입니다.
실행하시면, Text 입력하는 순간 placeholderText가 사라지실겁니다.
만약, TextBox편에서 처럼 포커스받았을때, 사라지게 하고 싶다면,
IsKeyboardFocused 속성트리거에 아래와 같이 Setter하나 추가해주시면 되겠습니다.
Read more
PlaceholderText기능은 TextBox편에서 다루었었는데요.
더 간단한 방법으로 해보려고 합니다.
그때는 포커스를 받는 순간 placeholderText가 사라졌었죠.
이번에는 UWP에서와 똑같이 포커스 받을 때가 아닌
입력하는 순간 PlaceholderText가 사라지게 하겠습니다.
TextBox편에서 사용했던 파일을 그대로 가져와서
ChangePropertyAction 3개를 전부 삭제합니다.
기본값으로 placeholderTextblock의 Visibility값을 Collpsed 해줍니다.
속성트리거 추가하시고, Text속성을 선택합니다.
그리고 placeholderTextblock의 Visibility값을 Visible 해줌으로써, 완성입니다.
실행하시면, Text 입력하는 순간 placeholderText가 사라지실겁니다.
만약, TextBox편에서 처럼 포커스받았을때, 사라지게 하고 싶다면,
IsKeyboardFocused 속성트리거에 아래와 같이 Setter하나 추가해주시면 되겠습니다.
2015년 10월 26일 월요일
[WPF] TextBox
TextBox는 텍스트를 표시하거나 편집할 수 있는 컨트롤 입니다.
아래와 같이 만들어 보겠습니다.
빠른검색텍스트는 placeholdertext (값을 입력하지 않은 경우에 표시되는 텍스트) 입니다.
UWP에선 TextBox에 기본속성으로 placeholdertext가 있지만,
WPF에는 없죠. 이 기능까지 포함해보겠습니다.
Style을 만들기 위해, 복사본 편집을 합니다.
기본 뼈대빼고 싹 지운상태에서 아래와 같이 설정
placeholderTextblock에 값을 지정해야하므로, 문자열 입력가능한 Tag에 바인딩 해줬습니다.
이렇게해서, 디자인은 완성되었습니다.
이제 placeholder 기능을 해보겠습니다.
기능구현을 위해 ChangePropertyAction 3개가 필요합니다.
첫번째 ChangePropertyAction 내용은
Textbox가 포커스 받으면, placeholderTextBlock을 Collapsed 하라
두번째 ChangePropertyAction 내용은
Textbox에서 포커스가 떠났을 때, placeholderTextBlock을 Visible 하라
단, Textbox의 Text값이 없을 경우에만 해당된다.
ps. 값이 없을 경우라 함은 RightOperand="" 입니다.
세번째 ChangePropertyAction 내용은
Textbox가 Load될 때, placeholderTextBlock을 Collapsed 하라
단, Textbox의 Text값이 없지 않을 경우에만 해당된다.
ps. 값이 없지 않을 경우라함은 RightOperand="" 입니다.
placeholder기능도 완료하였습니다.
아래와 같이 설정하시면, 두번째 TextBox는 왼쪽화면처럼 텍스트들이 겹치죠~
하지만 실행하시면, 오른쪽화면처럼 제대로 보이실겁니다.
기능동작 역시 제대로 되실겁니다.
추가로 알아둘만한 속성들 설명입니다.
AcceptsReturn : Enter가능여부
AcceptsTab : Tab가능여부 (True - 탭 띄어쓰기 가능)
AutoWordSelection : (True - 한글자씩 선택되는것이 아닌 단어 전체가 선택됨)
CharacterCasing : Lower(소문자)
Upper(대문자)
TextWrapping : Wrap(줄바꿈)
WrapWithOverflow(단어 단위 줄바꿈)
여기서 단어라 함은, 스페이스바 기준으로 나뉘어져 있는 텍스트들을 단어라 함.
Read more
아래와 같이 만들어 보겠습니다.
빠른검색텍스트는 placeholdertext (값을 입력하지 않은 경우에 표시되는 텍스트) 입니다.
UWP에선 TextBox에 기본속성으로 placeholdertext가 있지만,
WPF에는 없죠. 이 기능까지 포함해보겠습니다.
Style을 만들기 위해, 복사본 편집을 합니다.
기본 뼈대빼고 싹 지운상태에서 아래와 같이 설정
placeholderTextblock에 값을 지정해야하므로, 문자열 입력가능한 Tag에 바인딩 해줬습니다.
이렇게해서, 디자인은 완성되었습니다.
이제 placeholder 기능을 해보겠습니다.
기능구현을 위해 ChangePropertyAction 3개가 필요합니다.
첫번째 ChangePropertyAction 내용은
Textbox가 포커스 받으면, placeholderTextBlock을 Collapsed 하라
두번째 ChangePropertyAction 내용은
Textbox에서 포커스가 떠났을 때, placeholderTextBlock을 Visible 하라
단, Textbox의 Text값이 없을 경우에만 해당된다.
ps. 값이 없을 경우라 함은 RightOperand="" 입니다.
세번째 ChangePropertyAction 내용은
Textbox가 Load될 때, placeholderTextBlock을 Collapsed 하라
단, Textbox의 Text값이 없지 않을 경우에만 해당된다.
ps. 값이 없지 않을 경우라함은 RightOperand="" 입니다.
placeholder기능도 완료하였습니다.
아래와 같이 설정하시면, 두번째 TextBox는 왼쪽화면처럼 텍스트들이 겹치죠~
하지만 실행하시면, 오른쪽화면처럼 제대로 보이실겁니다.
기능동작 역시 제대로 되실겁니다.
추가로 알아둘만한 속성들 설명입니다.
AcceptsReturn : Enter가능여부
AcceptsTab : Tab가능여부 (True - 탭 띄어쓰기 가능)
AutoWordSelection : (True - 한글자씩 선택되는것이 아닌 단어 전체가 선택됨)
CharacterCasing : Lower(소문자)
Upper(대문자)
TextWrapping : Wrap(줄바꿈)
WrapWithOverflow(단어 단위 줄바꿈)
여기서 단어라 함은, 스페이스바 기준으로 나뉘어져 있는 텍스트들을 단어라 함.
2015년 10월 19일 월요일
[WPF] Button
Button은 가장 많이 쓰이는 컨트롤 입니다.
아래와 같은 버튼을 만들어 보겠습니다.
가공하는 방법은, Style과 Template 두가지가 있습니다.
Style로 작업하는 모습
Template으로 작업하는 모습
단순히 만드실거면, Template으로
나중을 생각하실거면 Style로 작업하시는게 좋겠죠.
물론 Template으로 작업하시다가, Style을 추가하실수도 있습니다.
저는 Style로 작업하도록 하겠습니다.
상태에 따른 효과지정 방법도 Triggers와 VisualState 두가지가 있습니다.
하나 씩 알아보겠습니다.
버튼을 복사본 편집하면, 불필요한 것들이 많습니다.
불필요한 것들은 싹 지우고 시작~
스타일 편집창으로 가는 방법입니다.
상단메뉴를 이용하는 방법은 Style편에 있으니 아실거구요.
다른방법은 파레트처럼 생긴 것을 누르시면 Style 편집창으로 갑니다.
Style 편집창에서 속성들을 정의합니다.
상태값 지정방법 첫번째 Trigger 입니다.
각 상태에 따른 값을 지정해주었습니다.
Template에서 Trigger를 만들어 줄수도 있지만,
Style에서도 가능한 작업이라서 Style에 지정하였습니다.
실행하기전에 Focus일 때, 확인을 위해 버튼 아래와 같이 두개 만듭니다.
실행해보시면, Press하고서, 버튼에서 마우스가 빠지면 바로 포커스 효과가 나타납니다.
상태값 지정방법 두번째 VisualState 입니다.
Trigger때와 마찬가지로 각 상태에 따라 값을 지정해주었습니다.
그런데, Pressed까지 지정 할 때는 없던 경고 아이콘이 Focused에 값을 지정하는 순간 나타납니다.
다른 두 그룹에서 한가지 개체를 변경하니 충돌 날 수도 있다라고 하네요.
해결하려면, 개체를 추가하여 각각 그룹에 따로 설정해주면 되겠죠.
하지만, 무슨 차이인지를 확인해야하니 이대로 진행합니다.
실행해보시면,
Press이후에 마우스가 빠지면 Focus효과가 나타나야하는데, 보이질 않습니다.
그러나, Tab을 이용한 Focus에는 반응을 합니다.
Read more
아래와 같은 버튼을 만들어 보겠습니다.
가공하는 방법은, Style과 Template 두가지가 있습니다.
Style로 작업하는 모습
Template으로 작업하는 모습
단순히 만드실거면, Template으로
나중을 생각하실거면 Style로 작업하시는게 좋겠죠.
물론 Template으로 작업하시다가, Style을 추가하실수도 있습니다.
저는 Style로 작업하도록 하겠습니다.
상태에 따른 효과지정 방법도 Triggers와 VisualState 두가지가 있습니다.
하나 씩 알아보겠습니다.
버튼을 복사본 편집하면, 불필요한 것들이 많습니다.
불필요한 것들은 싹 지우고 시작~
스타일 편집창으로 가는 방법입니다.
상단메뉴를 이용하는 방법은 Style편에 있으니 아실거구요.
다른방법은 파레트처럼 생긴 것을 누르시면 Style 편집창으로 갑니다.
Style 편집창에서 속성들을 정의합니다.
상태값 지정방법 첫번째 Trigger 입니다.
각 상태에 따른 값을 지정해주었습니다.
Template에서 Trigger를 만들어 줄수도 있지만,
Style에서도 가능한 작업이라서 Style에 지정하였습니다.
실행하기전에 Focus일 때, 확인을 위해 버튼 아래와 같이 두개 만듭니다.
실행해보시면, Press하고서, 버튼에서 마우스가 빠지면 바로 포커스 효과가 나타납니다.
상태값 지정방법 두번째 VisualState 입니다.
Trigger때와 마찬가지로 각 상태에 따라 값을 지정해주었습니다.
그런데, Pressed까지 지정 할 때는 없던 경고 아이콘이 Focused에 값을 지정하는 순간 나타납니다.
다른 두 그룹에서 한가지 개체를 변경하니 충돌 날 수도 있다라고 하네요.
해결하려면, 개체를 추가하여 각각 그룹에 따로 설정해주면 되겠죠.
하지만, 무슨 차이인지를 확인해야하니 이대로 진행합니다.
실행해보시면,
Press이후에 마우스가 빠지면 Focus효과가 나타나야하는데, 보이질 않습니다.
그러나, Tab을 이용한 Focus에는 반응을 합니다.
2015년 10월 2일 금요일
[WPF] LaunchUriOrFileAction
LaunchUriOrFileAction은 웹사이트를 열거나 응용 프로그램을 시작 할 수 있습니다.
시나리오 : Open버튼으로 지정한 웹사이트를 오픈
자산을 클릭하거나 단축키(Ctrl+.)를 사용하시면 확장리스트가 나오구요.
LaunchUriOrFileAction을 드래그 하여 사용할 컨트롤에 안착시킵니다.
화면은 버튼하나에 LaunchUriOrFileAction이 달려있는 상태이며,
이벤트 발생은 클릭으로하고, 열릴 웹사이트 경로를 지정하였습니다.
실행 후, Open버튼 클릭하시면 제가 지정해둔 경로의 웹사이트가 열릴 것입니다.
Read more
시나리오 : Open버튼으로 지정한 웹사이트를 오픈
자산을 클릭하거나 단축키(Ctrl+.)를 사용하시면 확장리스트가 나오구요.
LaunchUriOrFileAction을 드래그 하여 사용할 컨트롤에 안착시킵니다.
화면은 버튼하나에 LaunchUriOrFileAction이 달려있는 상태이며,
이벤트 발생은 클릭으로하고, 열릴 웹사이트 경로를 지정하였습니다.
실행 후, Open버튼 클릭하시면 제가 지정해둔 경로의 웹사이트가 열릴 것입니다.