Xamarin.Forms Control Template

์•ˆ๋…•ํ•˜์„ธ์š”. ์ €๋Š” ์ง€๊ธˆ Xamarin.Forms ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
ControlTemplate์„ ์‚ฌ์šฉํ•ด์„œ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปจํŠธ๋กค์„ ๋งŒ๋“ค๋ ค๊ณ  ํ•˜๋Š”๋ฐ ๋ช‡ ๊ฐ€์ง€ ๊ถ๊ธˆํ•œ ๊ฒƒ๋“ค์ด ์žˆ์–ด์„œ ๊ธ€์„ ์˜ฌ๋ฆฝ๋‹ˆ๋‹ค.

  • CustomButton์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ControlTemplate์„ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ Xamarin.Forms๋Š” Button์„ ์ƒ์† ๋ฐ›์•„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด Template์— ์ ‘๊ทผํ•  ์ˆ˜๊ฐ€ ์—†๋”๋ผ๊ณ ์š”. ๊ทธ๋ž˜์„œ ContentView๋ฅผ ์ƒ์† ๋ฐ›์•„์„œ ๋งŒ๋“ค์—ˆ๋Š”๋ฐ ์ด ๊ฒฝ์šฐ์—๋Š” Button์ด๋ผ๋ฉด ๊ฐ€์ ธ์•ผ ํ•  ๊ธฐ๋ณธ ๋™์ž‘๋“ค์ด ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. (WPF๋Š” Button ์ƒ์† ๋ฐ›์•„์„œ ์ž˜ ๋งŒ๋“ค์—ˆ์—ˆ๋Š”๋ฐโ€ฆ)

  • ์ด ๋•Œ, ์ €์—๊ฒŒ ํ•„์š”ํ•œ Button์˜ ์†์„ฑ๋“ค์„ ์ผ์ผ์ด ํ•˜๋‚˜์”ฉ BindableProperty๋ฅผ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์ธ๊ฐ€์š”? ์›๋ž˜ ์ด๋Ÿฐ ๋ฐฉ์‹์œผ๋กœ ํ•˜๋Š” ๊ฒƒ์ธ์ง€ ์•„๋‹ˆ๋ฉด ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ์žˆ๋Š”์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค:joy:

1๊ฐœ์˜ ์ข‹์•„์š”

์•ˆ๋…•ํ•˜์„ธ์š”.

์ €๋„ ControlTemplate๋ฅผ ํ†ตํ•ด ์‹œ๋„ํ•ด๋ดค์—ˆ์ง€๋งŒโ€ฆ๋ถˆ๊ฐ€๋Šฅํ–ˆ๋˜๊ฑธ๋กœ ๊ธฐ์–ตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
Button ์†์„ฑ์„ ์“ฐ์‹ ๋‹ค๊ณ  ํ•˜์…จ์—ˆ๋Š”๋ฐ ํ˜น์‹œ ์–ด๋–ค๊ฑธ ์“ฐ์‹œ๋Š”์ง€ ๋ฌผ์–ด๋ณด๊ธฐ์ „์—โ€ฆ ์ถ”์ธกํ•ด์„œ ๊ธ€์„ ์ด์–ด๊ฐ€๊ฒ ์Šต๋‹ˆ๋‹ค.

  • IsMouseOver ์ด๋ฒคํŠธ
    ์•ฑ์—์„œ Mouse๊ฐ€ ์—†๋‹ค๋ณด๋‹ˆโ€ฆ ํ•„์š”์—†์„ ๊ฑฐ๊ฐ™๋„ค์š”โ€ฆ๋Œ€์‹  ๋น„์Šทํ•œ ๊ธฐ๋Šฅ์„ ํ•ด์ฃผ๋Š”๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
    Xamarin.Forms Visual State Manager - Xamarin | Microsoft Learn ์ฐธ๊ณ ๋ฐ”๋ž๋‹ˆ๋‹ค!
  • Click ์ด๋ฒคํŠธ
    ์•„๋ฌด๋ž˜๋„ ๋ฒ„ํŠผ์ด๋ฉด ์ด๋ฒคํŠธ ๋ฐœ์ƒ ์ธ๋ฐ [MAUI] Switch CheckBox ์ด๋ฒคํŠธ ์งˆ๋ฌธ ์—ฌ๊ธฐ ๋‹ต๋ณ€์„ ๋‹ฌ์•„๋“œ๋ ธ๋“ฏ์ด ์ปจํŠธ๋กค ๋ชจ๋“  ๋ถ€๋ถ„์—์„œ๋Š” ์ œ์Šค์ณ ์ด๋ฒคํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
    ์ œ์Šค์ณ์—๋„ ํƒญ์ œ์Šค์ณ(ํด๋ฆญ) ์™ธ์—๋„ ์ขŒ์—์„œ ์šฐ๋กœโ€ฆ ์šฐ์—์„œ ์ขŒ๋กœ ์œ„์—์„œ ์•„๋ž˜๋กœ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ํ™œ์šฉํ•ด์„œ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

p.s ์ตœ๊ทผ ms์—์„œ ๋ฐœํ‘œํ•œ ๋‚ด์šฉ์—์„œ xamarin.forms๊ฐ€ ๋‚ด๋…„ 24๋…„ 5์›”์— ์ง€์›์ด ์ข…๋ฃŒ๋œ๋‹ค๊ณ ํ•˜๋„ค์š”โ€ฆ! Maui๋กœโ€ฆํ•ด๋ณด์‹ฌ์ดโ€ฆ

1๊ฐœ์˜ ์ข‹์•„์š”

๊ทธ๋ ‡๊ตฐ์š”โ€ฆ! ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ImageButton์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ , Frame>StackLayout์— Path, Label์„ ๋„ฃ์–ด์„œ ์ƒˆ๋กœ์šด ํ…œํ”Œ๋ฆฟ์œผ๋กœ ๋ฒ„ํŠผ์„ ๋งŒ๋“ค๊ณ  ์‹ถ์œผ๋ฉด Frame์˜ BackgroundColor๋ถ€ํ„ฐ Command, ๋“ฑ ๋ชจ๋“  ์†์„ฑ์„ ํ•˜๋‚˜์”ฉ ๋„ฃ์–ด์„œ ๋งŒ๋“œ๋Š” ์ˆ˜๋ฐ–์— ์—†๋‹ค๋Š” ๊ฒƒ์œผ๋กœ ์ดํ•ดํ•ด๋„ ๋ ๊นŒ์š”?

image

์ด๋Ÿฐ์‹์˜ ๋ฒ„ํŠผ์„ ๋งŒ๋“ ๋‹ค๊ณ  ํ–ˆ์„๋•Œ์š”!!

๋„ค,
WPF์ฒ˜๋Ÿผ IsHitTestVisible์„ ๊ธฐ๋Šฅ์ด ์—†์–ด์„œ ํ˜„์žฌ๊นŒ์ง€ ์ œ๊ฐ€ ์•Œ๊ธฐ๋ก  ๊ทธ๋ ‡์Šต๋‹ˆ๋‹ค. :joy:

๋‹ค๋งŒ,
Frame์—๋งŒ Command ์†์„ฑ์„ ๋ถ€์—ฌํ•˜๊ณ  ๋‚˜๋จธ์ง€ ๊ทธ ์œ„์— ์—ฌ๋Ÿฌ ์ปจํŠธ๋กค์— IsEnabled ์ฒ˜๋ฆฌํ•˜์—ฌ ๋น„์Šทํ•˜๊ฒŒ ๋™์ž‘๋˜๋Š”๊ฒƒ์€ ํ™•์ธํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค ๊ทธ๋ ‡์ง€๋งŒ ์ผ๋ถ€ ์ปจํŠธ๋กค์—์„œ๋Š” IsEnabled๋ฅผ ํ•˜๊ฒŒ ๋˜๋ฉด ์ƒ‰์ƒ์ด ๋ณ€ํ•˜๊ฒŒ ๋˜์„œ ์ข‹์ง€ ์•Š๋‹ค๊ณ  ํ•˜๋”๋ผ๊ตฌ์š”.

1๊ฐœ์˜ ์ข‹์•„์š”

์ด๊ฒƒ์ €๊ฒƒ ์ฐพ์•„๋ณด๋‹ค๊ฐ€ ์ด ์ž๋ฃŒ๋ฅผ ๋ดค๋Š”๋ฐ

https://github.com/jsuarezruiz/ways-create-netmaui-controls

ํ•œ๋ฒˆ ๋ณด์‹œ๊ฒ ์–ด์š”โ€ฆ? ์ด ๋ถ„์ด ์ž‘์„ฑํ•˜์‹  ์ฝ”๋“œ ์ค‘์— TemplatedControl์„ ๋ณด๋ฉด ์ €ํ•œํ…Œ๋Š” ๋†€๋ผ์šด ๋ฐฉ๋ฒ•์ธ ๊ฒƒ ๊ฐ™์•„์„œ ๊ณต์œ ํ•ด๋ด…๋‹ˆ๋‹คโ€ฆ ํ•˜ํ•˜

3๊ฐœ์˜ ์ข‹์•„์š”

์˜คํ™โ€ฆ
๋ชจ๋“  ์ปจํŠธ๋กค์ด ํƒญ์ œ์Šค์ณ ์ด๋ฒคํŠธ๋ฅผ ๊ฐ–๊ฒŒ๋˜๋„ค์š”?
์‹ ๋ฐ•ํ•˜๋„ค์š”!