![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩)](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
이번 포스팅에서는 위와 같이 슬라이드바를 마우스로 움직여 해당 숫자를 아래에 출력 되도록 해보겠습니다.
1. 기본 UI
<Slider>와 <TextBlock>으로 이루어진 아주 간단한 구성입니다.
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 1. 기본 UI [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 1. 기본 UI](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
2. 이벤트 추가
1) 각 엘리먼트의 이름을 지정합니다.
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
2) 이벤트 추가
슬라이드 변화를 감지하는 속성값으로 ValueChanged를 사용하고 , 저는 sld_ValueChanged라는 이름으로 이벤트 함수를 만들어보았습니다.
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
//MainWindow.xaml.cs(코드비하인드)
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
이벤트 함수는 위와 같이 작성해줍니다.
하나씩 설명해드리자면,
e.NewValue를 통해 변화가 일어날때마다 해당 값을 가져옵니다.
그리고 txt1(TextBox의 이름) Text속성에 해당 값을 할당하기위해 string 형태로 변형해줍니다.
3) min, max 조절
처음 gif사진을 보면 0에서 10까지만 지정이 가능하도록 되어 있는데, 이 부분도 커스텀이 가능합니다.
먼저 Maximum을 100으로 수정해보겠습니다.
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
실제로 100까지 올라간걸 알 수 있습니다.
그럼 Minimum 값도 수정해볼까요?
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가](https://blog.kakaocdn.net/dn/uhmql/btrDzxf6j4N/XksoPoUOBUz7zgLs6pKGd0/img.png)
하지만 이렇게 xaml상에 해당 속성을 적용하면 에러가 납니다.
즉 아래와 같이 code-behind단에서 작성해야지만 정상적으로 실행이 됩니다.
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가](https://blog.kakaocdn.net/dn/bsqTiK/btrDERRiQKg/PaOoddXWWMKPpUgfRiR6lk/img.png)
Output:
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 2. 이벤트 추가](https://blog.kakaocdn.net/dn/b5pFDW/btrDDpA58Da/Gl5DQlJaOkJakvf5mcM8Ck/img.webp)
4) 디폴트값 설정
이외에도 .Value속성에 접근해서 디폴트 값 설정도 가능합니다.
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 4) 디폴트값 설정 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 4) 디폴트값 설정](https://blog.kakaocdn.net/dn/LcWzy/btrDCUBsh0Q/gWAozaj3EwXB3zrhNSDcl0/img.png)
5) 데이터 바인딩 사용
저는 개인적으로 데이터바인딩을 사용하시길 추천드립니다.
(데이터바인딩을 모르시는 분은 해당 포스팅을 참조바랍니다.)
code-behind단을 만질 필요도 없이 아래와 같이 xaml코드만으로 해당 기능을 구현할 수 있기 때문입니다.
Output:
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 5) 데이터 바인딩 사용 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 5) 데이터 바인딩 사용](https://blog.kakaocdn.net/dn/3ftpO/btrDzy0vKnu/jGVnxZTNBb6LQ17VC8g8lK/img.webp)
//MainWindow.xaml
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 5) 데이터 바인딩 사용 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 5) 데이터 바인딩 사용](https://blog.kakaocdn.net/dn/bh2D6j/btrDDq05v2d/Q1Ay64PbNfTdBNjnvOB4gK/img.png)
기존과 달리 Minimum도 xaml에 작성해도 되구요!
추가적으로 뒤에 소수점이 불편하시다면 IsSnapToTickEnabled속성값을 True로 지정하시면 됩니다.
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 5) 데이터 바인딩 사용 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 5) 데이터 바인딩 사용](https://blog.kakaocdn.net/dn/bdQRn0/btrDESpaO7L/f4TJkjonm5ASHu6BuuLhP0/img.png)
Output:
![[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 5) 데이터 바인딩 사용 [c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩) - 5) 데이터 바인딩 사용](https://blog.kakaocdn.net/dn/vzITj/btrDzy7c18r/xospKqgI3JgxKacGhUGVF1/img.webp)
'c# > wpf' 카테고리의 다른 글
[c# wpf] ListView 내용 편집,수정 하는법(with IValueConverter) (0) | 2022.06.10 |
---|---|
[c# wpf] Control Template 란? / 사용방법 (with Style) (1) | 2022.06.02 |
[c# wpf] Data Trigger(데이터트리거) 란? / 사용법 (0) | 2022.05.31 |
[c# wpf] Property Trigger란? / 사용법 (0) | 2022.05.31 |
[c# wpf] DataContext란? 왜 쓰는 것일까? (0) | 2022.05.31 |
댓글
꼬예님의
글이 좋았다면 응원을 보내주세요!
이 글이 도움이 됐다면, 응원 댓글을 써보세요. 블로거에게 지급되는 응원금은 새로운 창작의 큰 힘이 됩니다.
응원 댓글은 만 14세 이상 카카오계정 이용자라면 누구나 편하게 작성, 결제할 수 있습니다.
글 본문, 댓글 목록 등을 통해 응원한 팬과 응원 댓글, 응원금을 강조해 보여줍니다.
응원금은 앱에서는 인앱결제, 웹에서는 카카오페이 및 신용카드로 결제할 수 있습니다.