무효 클릭 IP 추적 중...
c#/wpf

[c# wpf] slider(슬라이더) 사용법 (with 데이터바인딩)

꼬예 2022. 5. 31.

 

 

 

이번 포스팅에서는 위와 같이 슬라이드바를 마우스로 움직여 해당 숫자를 아래에 출력 되도록 해보겠습니다.

 

1. 기본 UI

<Slider><TextBlock>으로 이루어진 아주 간단한 구성입니다.

 

 

2. 이벤트 추가

1) 각 엘리먼트의 이름을 지정합니다.

 

 

2) 이벤트 추가 

슬라이드 변화를 감지하는 속성값으로 ValueChanged를 사용하고 , 저는 sld_ValueChanged라는 이름으로 이벤트 함수를 만들어보았습니다.

 

 

 

//MainWindow.xaml.cs(코드비하인드)

 

이벤트 함수는 위와 같이 작성해줍니다.

 

하나씩 설명해드리자면,

e.NewValue를 통해 변화가 일어날때마다 해당 값을 가져옵니다.

 

그리고 txt1(TextBox의 이름) Text속성에 해당 값을 할당하기위해 string 형태로 변형해줍니다.

 

3) min, max 조절

처음 gif사진을 보면 0에서 10까지만 지정이 가능하도록 되어 있는데, 이 부분도 커스텀이 가능합니다.

 

먼저 Maximum을 100으로 수정해보겠습니다.

 

 

실제로 100까지 올라간걸 알 수 있습니다.

 

그럼 Minimum 값도 수정해볼까요?

 

 

하지만 이렇게 xaml상에 해당 속성을 적용하면 에러가 납니다.

 

즉 아래와 같이 code-behind단에서 작성해야지만 정상적으로 실행이 됩니다.

 

 

Output:

 

 

 

4) 디폴트값 설정

이외에도 .Value속성에 접근해서 디폴트 값 설정도 가능합니다.

 

 

 

 

5) 데이터 바인딩 사용

저는 개인적으로 데이터바인딩을 사용하시길 추천드립니다.

(데이터바인딩을 모르시는 분은 해당 포스팅을 참조바랍니다.)

 

code-behind단을 만질 필요도 없이  아래와 같이 xaml코드만으로 해당 기능을 구현할 수 있기 때문입니다.

 

Output:

//MainWindow.xaml

 

기존과 달리 Minimum도 xaml에 작성해도 되구요!

 

추가적으로 뒤에 소수점이 불편하시다면 IsSnapToTickEnabled속성값을 True로 지정하시면 됩니다.

Output:

  • 트위터 공유하기
  • 페이스북 공유하기
  • 카카오톡 공유하기
이 컨텐츠가 마음에 드셨다면 커피 한잔(후원) ☕

댓글