WPF LOL PlayButton ๋งŒ๋“ค๊ธฐ (CodeProject, Video)

์•ˆ๋…•ํ•˜์„ธ์š”, ์ฒ˜์Œ ์ธ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
๋‹ท๋„ท๋ฐ๋ธŒ๋Š” ์˜ค๋ž˜ ์ „๋ถ€ํ„ฐ ์•Œ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์ด๋ฒˆ์— ์ฒ˜์Œ์œผ๋กœ ๊ธ€์„ ์˜ฌ๋ ค๋ณด๊ฒŒ ๋˜์—ˆ์–ด์š”!

์ €๋Š” :cn: ์ค‘๊ตญ์ธ์ด๊ณ  :kr: ํ•œ๊ตญ์—์„œ ์‚ด๊ณ ์žˆ๋Š” ๊ฐœ๋ฐœ์ž Vicky๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” ํ˜„์žฌ WPF ์ผ์„ ํ•˜๊ณ  ์žˆ๊ณ , Jamesnet์ด๋ผ๋Š” ์œ ํŠœ๋ธŒ๋ฅผ ํ†ตํ•ด ์˜์ƒ ํฌ๋ฆฌ์—์ดํ„ฐ ํ™œ๋™๋„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. (์ค‘๊ตญ์˜ ์œ ํŠœ๋ธŒ์ธ BiliBili ํ”Œ๋žซํผ์—์„œ๋„ ํ•˜๊ณ  ์žˆ์–ด์š”)

์ด ๊ธ€์€ LOL PlayButton ๊ตฌํ˜„ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์†Œ๊ฐœ ๋‚ด์šฉ์„ ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ง€๋‚œ๋ฒˆ ThemeSwitch ๊ตฌํ˜„ ์˜์ƒ์— ์ด์–ด ๋‘ ๋ฒˆ์งธ ์งง์€ ํŠœํ† ๋ฆฌ์–ผ ์˜์ƒ์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. Youtube๋ฅผ ํ†ตํ•ด ์˜์ƒ๊ณผ ํ•œ๊ธ€ ์ž๋ง‰์œผ๋กœ๋„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  CodeProject๋ฅผ ํ†ตํ•ด์„œ๋„ Article์„ ์‚ดํŽด๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


์•„๋ž˜๋Š” CodeProject๋ฅผ ํ†ตํ•ด ์–ด์ œ ๊ธฐ๊ณ ํ–ˆ๋˜ ๊ธ€์„ ํ•œ๊ธ€๋กœ ๋ฒˆ์—ญํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค.
(GPT์˜ ๋„์›€์„ ์•„์ฃผ ๋งŽ์ด ๋นŒ๋ ค ํ•œ๊ตญ์–ด ๊ธ€์„ ์ž‘์„ฑํ–ˆ์œผ๋‹ˆ ๋ถ€์ž์—ฐ์Šค๋Ÿฌ์šด ๋ถ€๋ถ„์€ ์ดํ•ดํ•ด์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค :sweat_smile:)

Abstract

์ด ๊ธ€์€ ์ˆœ์ˆ˜ WPF ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์—ฌ โ€œ๋ฆฌ๊ทธ ์˜ค๋ธŒ ๋ ˆ์ „๋“œโ€ ๊ฒŒ์ž„์—์„œ ์˜๊ฐ์„ ๋ฐ›์€ PLAY ๋ฒ„ํŠผ์„ ๊ฐœ๋ฐœํ•˜๋Š” ๊ณผ์ •์„ ์ž์„ธํžˆ ์„ค๋ช…ํ•˜๊ณ  ๋ถ„์„ํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค. WPF์˜ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜์—ฌ ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“œ๋Š” ๊ณผ์ •์„ ๊ฐ•์กฐํ•˜๋ฉฐ, ์˜คํ”ˆ ์†Œ์Šค ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ์ƒˆ๋กœ์šด ๊ด€์ ์„ ์ œ์‹œํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ํŠธ๋ฆฌ๊ฑฐ์™€ ๊ฐ™์€ ๊ณ ๊ธ‰ WPF ๊ธฐ๋Šฅ์„ ํƒ๊ตฌํ•˜์—ฌ ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.

์†Œ๊ฐœ

์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๋ฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๊ฒŒ์ž„์—์„œ ๋ฐ˜์‘์ด ๋น ๋ฅด๊ณ  ์‹œ๊ฐ์ ์œผ๋กœ ๋งค๋ ฅ์ ์ธ PLAY ๋ฒ„ํŠผ์€ ์—”ํ„ฐํ…Œ์ธ๋จผํŠธ ์„ธ๊ณ„๋กœ์˜ ๊ด€๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด ๊ธ€์€ ๋ฆฌ์น˜ ๋ฐ์Šคํฌํ†ฑ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ•๋ ฅํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ธ WPF๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ PLAY ๋ฒ„ํŠผ์„ ๋งŒ๋“œ๋Š” ๊ณผ์ •์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ ๋ฐฐ๊ฒฝ

์ด ๊ธ€์—์„œ ๋…ผ์˜๋œ ํ”„๋กœ์ ํŠธ๋Š” WPF ๊ธฐ์ˆ ์˜ ๋Šฅ๋ ฅ์„ ๊ฐ€๋Šฅํ•œ ํ•œ ํฌ๊ด„์ ์œผ๋กœ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•ฉ๋‹ˆ๋‹ค. ๋ช‡ ๋…„ ์ „์— ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ถœ์‹œํ•œ ํ›„ ๊ธ์ •์ ์ธ ๋ฐ˜์‘์„ ๋ฐ›์•˜์œผ๋ฉฐ, ์ด๋Š” ์˜คํ”ˆ ์†Œ์Šค ๊ฐœ๋ฐœ์— ๊ณ„์† ๊ธฐ์—ฌํ•˜๋„๋ก ๋™๊ธฐ๋ฅผ ๋ถ€์—ฌํ–ˆ์Šต๋‹ˆ๋‹ค. .NET ๊ธฐ์ˆ ์ด ๋ฐœ์ „ํ•จ์— ๋”ฐ๋ผ, GitHub์— ๊ณต์œ ๋œ ์ฝ”๋“œ๋ฅผ ์ง€์†์ ์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜๊ณ  ์ •์ œํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ „์ฒด ํ”„๋กœ์ ํŠธ์— ํฌํ•จ๋œ ๋ฐฉ๋Œ€ํ•œ ๋‚ด์šฉ์„ ๊ณ ๋ คํ•˜์—ฌ, ๊ฐ ๋ถ€๋ถ„์˜ ๊ตฌ์„ฑ๊ณผ ๊ธฐ์ˆ ์  ์ดˆ์ ์„ ์ž์„ธํžˆ ๋ถ„์„ํ•˜์—ฌ ์ œ๊ณตํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋” ๋งŽ์€ WPF ๊ธฐ์ˆ ์„ ์ข‹์•„ํ•˜์‹ ๋ถ„๋“ค์ด ํ•™์Šต ์—ฌ์ •์—์„œ ๋„์›€์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ผ๋Š” ๋งˆ์Œ์—์„œ์ž…๋‹ˆ๋‹ค.

๋ฒ„ํŠผ ๊ตฌ์„ฑ

๋ถ„์„๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ณผ ๋•Œ, ์ด PLAY ๋ฒ„ํŠผ์€ WPF ToggleButton์—์„œ ์†์„ฑ์„ ์ƒ์†๋ฐ›์Šต๋‹ˆ๋‹ค. ์™ผ์ชฝ์—๋Š” โ€œ๋ฆฌ๊ทธ ์˜ค๋ธŒ ๋ ˆ์ „๋“œโ€ ๊ฒŒ์ž„์˜ ๋กœ๊ณ ๊ฐ€ ์žˆ๊ณ , ์˜ค๋ฅธ์ชฝ์—๋Š” ๊ฒฝ๊ณ„์„ , ์ด๋ฏธ์ง€, ํ…์ŠคํŠธ ๋“ฑ ๋‹ค์–‘ํ•œ ๋””์ž์ธ์˜ ์š”์†Œ๋“ค์ด ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, ๋งˆ์šฐ์Šค์˜ค๋ฒ„ ๋ฐ ์ฒดํฌ ํŠธ๋ฆฌ๊ฑฐ ํšจ๊ณผ๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์š” ๋‚ด์šฉ ๋ถ„์„

1.๋น„์ •ํ˜• ํ˜•ํƒœ ๋งŒ๋“ค๊ธฐ

์ฒซ ๋ฒˆ์งธ์™€ ๋‘ ๋ฒˆ์งธ ๊ทธ๋ž˜ํ”ฝ์€ Border ์ปจํŠธ๋กค์„ ์‚ฌ์šฉํ•˜์—ฌ ์‰ฝ๊ฒŒ ์ธ์ฝ”๋”ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, ๋์ด ๋พฐ์กฑํ•˜๊ณ  ํ˜ธ๊ฐ€ ์žˆ๋Š” ์„ธ ๋ฒˆ์งธ ๊ทธ๋ž˜ํ”ฝ์€ ๋‹จ์ˆœํ•œ Border๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ธ์ฝ”๋”ฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ฒ˜์Œ์—๋Š” ๋‹ค๊ฐํ˜•๊ณผ ์ขŒํ‘œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ทธ๋ฆด ์ˆ˜ ์žˆ์ง€๋งŒ, ๋‹ค๊ฐํ˜• ์†์„ฑ์€ ํ˜ธ๋ฅผ ๊ทธ๋ฆฌ๋Š” ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ Path ์ปจํŠธ๋กค์„ ์‚ฌ์šฉํ•˜์—ฌ ์ธ์ฝ”๋”ฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ƒ์„ธ ๋ถ„์„

<Style TargetType="{x:Type Path}" x:Key="Arrow">
    <Setter Property="Fill" Value="#1E2328"/>
    <Setter Property="Stroke" Value="{StaticResource ArrowStroke}"/>
    <Setter Property="StrokeThickness" Value="2"/>
    <Setter Property="Data" Value="M 0,0 L 103,0 L 118,14 L 103,28 L 0,28 C 10,14 0,0 0,0 Z"/>
    <Setter Property="Margin" Value="40 5 4 -5"/>
    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect BlurRadius="5" ShadowDepth="2"/>
        </Setter.Value>
    </Setter>
</Style>

WPF์—์„œ Path ์ปจํŠธ๋กค์€ ๋‹ค์–‘ํ•œ ํ˜•ํƒœ์™€ ์œค๊ณฝ์„ ๊ทธ๋ฆฌ๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. Path ์ปจํŠธ๋กค์€ ๊ฒฝ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ˜•ํƒœ๋ฅผ ์ •์˜ํ•˜๋ฉฐ, ๊ฒฝ๋กœ ๋ฐ์ดํ„ฐ๋Š” ํ˜•ํƒœ๋ฅผ ๊ทธ๋ฆฌ๋Š” ๋ฐฉ๋ฒ•์„ ์ง€์ •ํ•˜๋Š” ์ผ๋ จ์˜ ๋ช…๋ น๊ณผ ์ขŒํ‘œ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.

Path ์ปจํŠธ๋กค์˜ ๊ธฐ๋ณธ ์†์„ฑ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

  • Data ์†์„ฑ: Data ์†์„ฑ์€ Path ์ปจํŠธ๋กค์˜ ์ค‘์š”ํ•œ ์†์„ฑ์œผ๋กœ, ํ˜•ํƒœ์˜ ์œค๊ณฝ์„ ์„ค๋ช…ํ•˜๋Š” ๋ช…๋ น๊ณผ ์ขŒํ‘œ๋กœ ๊ตฌ์„ฑ๋œ ๊ฒฝ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ง€์ •ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๊ฒฝ๋กœ ๋ฐ์ดํ„ฐ์˜ ํ˜•์‹์—๋Š” MoveTo (M), LineTo (L), CurveTo (C), ClosePath (Z) ๋“ฑ ๋‹ค์–‘ํ•œ ๋ช…๋ น์ด ์ขŒํ‘œ์™€ ๊ฒฐํ•ฉ๋˜์–ด ํ˜•ํƒœ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
  • Fill ์†์„ฑ: Fill ์†์„ฑ์€ ํ˜•ํƒœ ๋‚ด๋ถ€๋ฅผ ์ฑ„์šฐ๋Š” ์ƒ‰์ƒ์„ ์ง€์ •ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ƒ‰์ƒ, ๊ทธ๋ผ๋ฐ์ด์…˜, ํŒจํ„ด ๋˜๋Š” ํˆฌ๋ช…๋„๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ˜•ํƒœ์˜ ๋‚ด๋ถ€๋ฅผ ์ฑ„์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • Stroke ์†์„ฑ: Stroke ์†์„ฑ์€ ํ˜•ํƒœ์˜ ์œค๊ณฝ์„  ์ƒ‰์ƒ์„ ์ง€์ •ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ•˜์—ฌ ์œค๊ณฝ์„ ์˜ ์ƒ‰์ƒ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • StrokeThickness ์†์„ฑ: StrokeThickness ์†์„ฑ์€ ์œค๊ณฝ์„ ์˜ ๋‘๊ป˜๋ฅผ ์ง€์ •ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์œค๊ณฝ์„ ์˜ ๋„ˆ๋น„๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ช…๋ น๊ณผ ์ขŒํ‘œ:๊ฒฝ๋กœ ๋ฐ์ดํ„ฐ๋Š” ๋ช…๋ น๊ณผ ์ขŒํ‘œ์˜ ์—ฐ์†์œผ๋กœ ๊ตฌ์„ฑ๋˜๋ฉฐ, ์ด๋Ÿฌํ•œ ๋ช…๋ น์€ WPF์—๊ฒŒ ํ•œ ์ง€์ ์—์„œ ๋‹ค๋ฅธ ์ง€์ ๊นŒ์ง€ ๋ชจ์–‘์„ ๊ทธ๋ฆฌ๋Š” ๋ฐฉ๋ฒ•์„ ์ง€์‹œํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์ธ ๊ฒฝ๋กœ ๋ช…๋ น์—๋Š” ๋‹ค์Œ์ด ์žˆ์Šต๋‹ˆ๋‹ค:

M (MoveTo): ์ง€์ •๋œ ์ขŒํ‘œ๋กœ ๊ทธ๋ฆฌ๊ธฐ ์ง€์ ์„ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.

L (LineTo): ์ง€์ •๋œ ์ขŒํ‘œ๋กœ ์ง์„ ์„ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค.

C (CurveTo): ์ œ์–ด ์ ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฒ ์ง€์–ด ๊ณก์„ ์„ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค.

Z (ClosePath): ๊ฒฝ๋กœ๋ฅผ ๋‹ซ์•„ ํ˜„์žฌ ์ง€์ ์„ ์‹œ์ž‘ ์ง€์ ์— ์—ฐ๊ฒฐํ•˜์—ฌ ๋‹ซํžŒ ๋ชจ์–‘์„ ํ˜•์„ฑํ•ฉ๋‹ˆ๋‹ค.

Data ์†์„ฑ์€ ๊ฒฝ๋กœ ์ปจํŠธ๋กค์˜ ์ค‘์š”ํ•œ ์†์„ฑ์œผ๋กœ, ๋ชจ์–‘์˜ ์œค๊ณฝ์„ ์ •์˜ํ•˜๋Š” ๋ช…๋ น๊ณผ ์ขŒํ‘œ๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฒฝ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ง€์ •ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๊ฒฝ๋กœ ๋ฐ์ดํ„ฐ๋Š” ๊ฒฝ๋กœ์˜ ์œค๊ณฝ์„ ์„ค๋ช…ํ•˜๊ธฐ ์œ„ํ•ด ๋ช…๋ น์˜ ์—ฐ์†์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด ํ”„๋กœ์ ํŠธ์˜ ๊ฒฝ๋กœ ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ๋ช…๋ น๊ณผ ์ขŒํ‘œ์˜ ์ž์„ธํ•œ ์„ค๋ช…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์„ ๊ฐ„๋‹จํ•˜๊ฒŒ X/Y ์ขŒํ‘œ ์ถ•์œผ๋กœ ํ•ด์„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ชจ์–‘์˜ ๊ธธ์ด๋ฅผ 118๋กœ ์„ค์ •ํ•˜๊ณ  ๋„ˆ๋น„๋ฅผ 28๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค:

M 0,0: ์ด๊ฒƒ์€ โ€œMoveToโ€ ๋ช…๋ น์œผ๋กœ, ๊ทธ๋ฆฌ๊ธฐ ์ง€์ ์„ ์ขŒํ‘œ (0, 0)๋กœ ์ด๋™ํ•˜์—ฌ ์‹œ์ž‘ ์ง€์ ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

L 103,0: ์ด๊ฒƒ์€ โ€œLineToโ€ ๋ช…๋ น์œผ๋กœ, ํ˜„์žฌ ์ง€์  (0, 0)์—์„œ ์ขŒํ‘œ (103, 0)๋กœ ์ง์„ ์„ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค. ์ด์–ด์„œ (118, 14), (103, 28), (0, 28)๋กœ ์„ ์„ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๋Œ€์นญ ๋ชจ์–‘์ด๋ฏ€๋กœ ๋‘ ๋ฒˆ์งธ ์„ ์˜ Y ์ขŒํ‘œ๋Š” ๋ชจ์–‘์˜ ์ด ๋†’์ด์˜ ์ ˆ๋ฐ˜์ธ 14์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ๊ณก์„ ์„ ๊ทธ๋ฆฌ๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค: C 10,14 0,0 0,0 z: ์ด๊ฒƒ์€ โ€œ๋ฒ ์ง€์–ด ๊ณก์„ โ€ ๋ช…๋ น์œผ๋กœ, ์•ž์˜ ์ ์ด ์ œ์–ด ์ ์ด๊ณ  ๋’ค์˜ ์ ์ด ๋ ์ ์ธ ๋ฒ ์ง€์–ด ๊ณก์„ ์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ช…๋ น์€ ์ œ์–ด ์ ์ด (10, 14)์ด๊ณ  ๋ ์ ์ด (0, 0)์ธ ๋ฒ ์ง€์–ด ๊ณก์„ ์„ ์ •์˜ํ•˜๋ฉฐ, โ€˜zโ€™ ๋ช…๋ น์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ฒฝ๋กœ๋ฅผ ๋‹ซ์•„ ์‹œ์ž‘ ์ง€์  (0, 0)์— ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

2.๊ทธ๋ผ๋ฐ์ด์…˜ ์ƒ‰์ƒ ๋งŒ๋“ค๊ธฐ

LinearGradientBrush์˜ ์ฃผ์š” ์†์„ฑ ๋ฐ ์‚ฌ์šฉ๋ฒ•

  • StartPoint๋ฐ EndPoint:
    StartPoint๋Š” ๊ทธ๋ผ๋ฐ์ด์…˜์˜ ์‹œ์ž‘์ ์„ ์ง€์ •ํ•˜๋ฉฐ ์ผ๋ฐ˜์ ์œผ๋กœ ์ƒ๋Œ€ ์ขŒํ‘œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ (0, 0)์€ ์ขŒ์ƒ๋‹จ์ด๊ณ  (1, 1)์€ ์šฐํ•˜๋‹จ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. EndPoint๋Š” ์ƒ๋Œ€ ์ขŒํ‘œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ทธ๋ผ๋ฐ์ด์…˜์˜ ๋์ ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
  • GradientStops:
    GradientStops์€ GradientStop ๊ฐœ์ฒด์˜ ์ปฌ๋ ‰์…˜์œผ๋กœ, ๊ฐ ๊ฐœ์ฒด๋Š” ์ƒ‰์ƒ๊ณผ ์ƒ๋Œ€ ์œ„์น˜(Offset)๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. GradientStop์˜ Color ์†์„ฑ์€ ์ง€์ •๋œ ์œ„์น˜์˜ ์ƒ‰์ƒ์„ ์ •์˜ํ•˜๊ณ , Offset ์†์„ฑ์€ ๊ทธ๋ผ๋ฐ์ด์…˜ ๋‚ด์—์„œ ์ƒ‰์ƒ์˜ ์œ„์น˜๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ 0์—์„œ 1 ์‚ฌ์ด์˜ ๋ฒ”์œ„์ž…๋‹ˆ๋‹ค.
  • ๊ทธ๋ผ๋ฐ์ด์…˜ ๋ฐฉํ–ฅ:
    ๊ทธ๋ผ๋ฐ์ด์…˜์˜ ๋ฐฉํ–ฅ์€ StartPoint ๋ฐ EndPoint์— ์˜ํ•ด ๊ฒฐ์ •๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด StartPoint๊ฐ€ (0, 0)์ด๊ณ  EndPoint๊ฐ€ (1, 1)์ธ ๊ฒฝ์šฐ ๊ทธ๋ผ๋ฐ์ด์…˜์€ ์ขŒ์ƒ๋‹จ์—์„œ ์šฐํ•˜๋‹จ์œผ๋กœ ์ „ํ™˜๋ฉ๋‹ˆ๋‹ค.
  • ๊ทธ๋ผ๋ฐ์ด์…˜ ์œ ํ˜•:
    LinearGradientBrush๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ง์„  ๊ทธ๋ผ๋ฐ์ด์…˜์œผ๋กœ ์„ค์ •๋˜์–ด ์žˆ์œผ๋ฉฐ ์ƒ‰์ƒ์ด ์ง์„ ์„ ๋”ฐ๋ผ ์ „ํ™˜๋ฉ๋‹ˆ๋‹ค. StartPoint์™€ EndPoint๋ฅผ ์กฐ์ •ํ•˜์—ฌ ๊ทธ๋ผ๋ฐ์ด์…˜์˜ ๋ฐฉํ–ฅ๊ณผ ์‹œ์ž‘์ ์„ ๋ณ€๊ฒฝํ•˜์—ฌ ๋‹ค์–‘ํ•œ ๊ทธ๋ผ๋ฐ์ด์…˜ ํšจ๊ณผ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ๋ชจ์–‘์˜ ์ค‘์•™์—์„œ ์‹œ์ž‘ํ•˜์—ฌ ์•„๋ž˜๋กœ ์ด๋™ํ•˜๋Š” ์ˆ˜์ง ๊ทธ๋ผ๋ฐ์ด์…˜์„ ์ƒ์„ฑํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ StartPoint๋ฅผ (0.5, 0)์œผ๋กœ ์„ค์ •ํ•˜์—ฌ ๊ทธ๋ผ๋ฐ์ด์…˜์˜ ์‹œ์ž‘์ ์„ ์ƒ๋‹จ ์ค‘์•™์œผ๋กœ ์ง€์ •ํ•˜๊ณ  EndPoint๋Š” (0.5, 1)๋กœ ์„ค์ •ํ•˜์—ฌ ๊ทธ๋ผ๋ฐ์ด์…˜์˜ ๋์ ์„ ํ•˜๋‹จ ์ค‘์•™์œผ๋กœ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ ๋‹ค์Œ, GradientStops ์ปฌ๋ ‰์…˜์—๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ์ƒ‰์ƒ๊ณผ ์ƒ๋Œ€์ ์ธ ์œ„์น˜๋ฅผ ์ •์˜ํ•˜๋Š” ์„ธ ๊ฐœ์˜ GradientStop ๊ฐœ์ฒด๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค:

  • ์ฒซ ๋ฒˆ์งธ GradientStop:
    Color๋Š” #CC3FE7EE๋กœ ์„ค์ •๋˜์–ด ์ƒ‰์ƒ ๊ฐ’์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
    Offset์€ 0์œผ๋กœ ์„ค์ •๋˜์–ด ์ด ์ƒ‰์ƒ์ด ๊ทธ๋ผ๋ฐ์ด์…˜์˜ ์‹œ์ž‘์ ์— ์œ„์น˜ํ•จ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

  • ๋‘ ๋ฒˆ์งธ GradientStop:
    Color๋Š” #CC006D7D๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.
    Offset์€ 0.5๋กœ ์„ค์ •๋˜์–ด ์ด ์ƒ‰์ƒ์ด ๊ทธ๋ผ๋ฐ์ด์…˜์˜ ์ค‘๊ฐ„์ ์— ์œ„์น˜ํ•จ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

  • ์„ธ ๋ฒˆ์งธ GradientStop:
    Color๋Š” #CC0493A7๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.
    Offset์€ 1๋กœ ์„ค์ •๋˜์–ด ์ด ์ƒ‰์ƒ์ด ๊ทธ๋ผ๋ฐ์ด์…˜์˜ ๋์ ์— ์œ„์น˜ํ•จ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

3. Path ๋ฐ Border Thickness ์ฒ˜๋ฆฌ์— ๋Œ€ํ•ด์„œ

Border ์ปจํŠธ๋กค์—์„œ:

Border ์ปจํŠธ๋กค์˜ ํ…Œ๋‘๋ฆฌ ์„ ์€ Border ๋‚ด์— ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. ํ…Œ๋‘๋ฆฌ ์„ ์˜ ๋‘๊ป˜๋Š” BorderThickness ์†์„ฑ์— ์˜ํ•ด ์ œ์–ด๋˜๋ฉฐ, ํ…Œ๋‘๋ฆฌ ์„ ์˜ ๋„ˆ๋น„๋ฅผ ๋””๋ฐ”์ด์Šค ๋…๋ฆฝ์ ์ธ ํ”ฝ์…€(DIPs)๋กœ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

Path ์ปจํŠธ๋กค์—์„œ:

Path ์ปจํŠธ๋กค์˜ ํ…Œ๋‘๋ฆฌ ์„ ์€ StrokeThickness ์†์„ฑ์˜ ์ค‘์‹ฌ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ทธ๋ ค์ง‘๋‹ˆ๋‹ค. StrokeThickness๋Š” ํ…Œ๋‘๋ฆฌ ์„ ์˜ ๋‘๊ป˜๋ฅผ ์ œ์–ดํ•˜๋ฉฐ, ์ค‘์‹ฌ์œผ๋กœ๋ถ€ํ„ฐ ํ…Œ๋‘๋ฆฌ ์„ ์ด ์–ผ๋งˆ๋‚˜ ๋ป—์–ด๋‚˜๊ฐˆ์ง€๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

์ด ๊ณ ์ • ํฌ๊ธฐ์˜ ๊ทธ๋ž˜ํ”ฝ์—์„œ Border์™€ Path์˜ ๋‘๊ป˜๋ฅผ ๋ชจ๋‘ 2๋กœ ์„ค์ •ํ•˜๊ณ  Margin์€ 4 4 4 4๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ์„ค์ •์—์„œ Path์˜ ์ƒ๋‹จ ํ…Œ๋‘๋ฆฌ๊ฐ€ Border๋ฅผ ๋ฒ—์–ด๋‚œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ StrokeThickness๋ฅผ ๊ณ ๋ คํ•˜์—ฌ Path์˜ Margin์„ ์กฐ์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์™ผ์ชฝ Margin์€ ์ด๋ฏธ 40์œผ๋กœ ์„ค์ •๋˜์–ด GreenLine์„ ๋ฎ์„ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋ฌธ์ œ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ƒ๋‹จ Margin์€ 1ํ”ฝ์…€ ์ฆ๊ฐ€ํ•˜์—ฌ 5ํ”ฝ์…€๋กœ ์„ค์ •ํ•ด์•ผ ํ•˜๋ฉฐ, ์˜ค๋ฅธ์ชฝ ๋ฐ ํ•˜๋‹จ Margin์€ ๋ณ€๊ฒฝํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. Path์˜ ํฌ๊ธฐ๊ฐ€ 118x28๋กœ ๊ณ ์ •๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ Margin์„ ์กฐ์ •ํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์€ ์™ผ์ชฝ ๋ฐ ์ƒ๋‹จ Margin ๋ฟ์ž…๋‹ˆ๋‹ค.

๋˜ํ•œ ์ƒ๋‹จ Margin์ด 5ํ”ฝ์…€ ์ฆ๊ฐ€ํ•˜๋ฉด ํ•˜๋‹จ์ด ์ž˜๋ฆฐ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๋ ค๋ฉด ํ•˜๋‹จ Margin์„ -5ํ”ฝ์…€๋กœ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์ƒ๋‹จ์— ์ถ”๊ฐ€๋œ 5ํ”ฝ์…€์ด ์ œ๊ฑฐ๋˜์–ด ๋ ˆ์ด์•„์›ƒ์ด ๊ท ํ˜•์„ ์ด๋ฃน๋‹ˆ๋‹ค. ๋˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์€ ํ•˜๋‹จ Margin์„ 0ํ”ฝ์…€๋กœ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ๋‹จ Margin์„ ์ถ”๊ฐ€ํ•จ์œผ๋กœ์จ ํ•˜๋‹จ์ด ์ž˜๋ฆฌ๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

4. Jamesnet.WPF Nuget๋ฅผ ์‚ฌ์šฉํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒ์„ฑ

WPF์—์„œ๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋”์šฑ ํฅ๋ฏธ๋กญ๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋‹ค์–‘ํ•œ ๋™์  ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ํ”„๋กœ์ ํŠธ์—์„œ๋Š” TextBlock์˜ ํ…์ŠคํŠธ ๋ถ€๋ถ„์— ํฅ๋ฏธ๋กœ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด ๋‘๊ป˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

<Application x:Class="VickyPlayButton.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:james="https://jamesnet.dev/xaml/presentation"
             StartupUri="MainWindow.xaml">

    <Application.Resources>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Height" Value="38"/>
            <Setter Property="Width" Value="165"/>
            <Setter Property="Foreground" Value="#FFFFFF"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Checked">
                                <james:ThickItem Mode="CubicEaseInOut" TargetName="play" Property="Margin" Duration="0:0:0:0.5" To="30 100 0 0"/>
                                <james:ThickItem Mode="CubicEaseInOut" TargetName="stop" Property="Margin" Duration="0:0:0:0.5" To="30 0 0 0"/>
                            </Storyboard>
                            <Storyboard x:Key="UnChecked">
                                <james:ThickItem Mode="CubicEaseInOut" TargetName="play" Property="Margin" Duration="0:0:0:0.5" To="30 0 0 0"/>
                                <james:ThickItem Mode="CubicEaseInOut" TargetName="stop" Property="Margin" Duration="0:0:0:0.5" To="30 0 0 100"/>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid Background="{TemplateBinding Background}">
                            <Border Style="{StaticResource GoldLine}"/>
                            <Image Style="{StaticResource Emblem}"/>
                            <Border Style="{StaticResource GreenLine}"/>
                            <Path x:Name="path" Style="{StaticResource Arrow}"/>
                            <Grid>
                                <Grid.Clip>
                                    <RectangleGeometry Rect="0,5,165,28"/>
                                </Grid.Clip>
                                <TextBlock x:Name="play" Style="{StaticResource Play}"/>
                                <TextBlock x:Name="stop" Style="{StaticResource Stop}"/>
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="path" Property="Fill" Value="{StaticResource ArrowFillOver}"/>
                                <Setter TargetName="path" Property="Stroke" Value="{StaticResource ArrowStrokeOver}"/>
                                <Setter Property="Foreground" Value="#FFFCF1DC"/>
                                <Setter Property="Cursor" Value="Hand"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="path" Property="Fill" Value="#1E2328"/>
                                <Setter TargetName="path" Property="Stroke" Value="#5C5B57"/>
                                <Setter Property="Foreground" Value="#3C3C41"/>
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource Checked}"/>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource UnChecked}"/>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

์• ๋‹ˆ๋ฉ”์ด์…˜์€ ControlTemplate.Resources๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ •์˜ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ โ€œCheckedโ€ ๋ฐ โ€œUnCheckedโ€ ๋‘ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฆฌ์†Œ์Šค๋ฅผ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. โ€œCheckedโ€ ์ƒํƒœ์—์„œ๋Š” โ€œPlayโ€ ํ…์ŠคํŠธ๊ฐ€ ์ œ๊ฑฐ๋˜๊ณ  โ€œStopโ€ ํ…์ŠคํŠธ๊ฐ€ ๋“ค์–ด์˜ค๋ฉฐ, โ€œUnCheckedโ€ ์ƒํƒœ์—์„œ๋Š” โ€œStopโ€ ํ…์ŠคํŠธ๊ฐ€ ์ œ๊ฑฐ๋˜๊ณ  โ€œPlayโ€ ํ…์ŠคํŠธ๊ฐ€ ๋“ค์–ด์˜ต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋’ค์ง‘๋Š” ํšจ๊ณผ๋ฅผ ์—ฐ์ƒ์‹œํ‚ค๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋งŒ๋“ค์–ด์ง‘๋‹ˆ๋‹ค.

์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ƒ์„ฑํ•˜๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๋„๋ก WPF์˜ ๋‹ค์–‘ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ Jamesnet.WPF Nuget ํŒจํ‚ค์ง€๋กœ ์ปดํŒŒ์ผํ•˜๊ณ  ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ํŒจํ‚ค์ง€๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•˜๊ณ  ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

5.Grid.Clip ์†์„ฑ ์‚ฌ์šฉ

Grid ๋‚ด์˜ ์š”์†Œ๋“ค์ด ์„œ๋กœ ๊ฒน์น˜๊ธฐ ๋•Œ๋ฌธ์— ํ…์ŠคํŠธ๊ฐ€ ์œ„์•„๋ž˜๋กœ ์Šคํฌ๋กค๋˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋งŒ๋“ค ๋•Œ ํ…์ŠคํŠธ๊ฐ€ ํ…Œ๋‘๋ฆฌ๋ฅผ ๋ฒ—์–ด๋‚˜๋Š” ์‹œ๊ฐ์  ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด <Grid.Clip> ์†์„ฑ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

<Grid Background="{TemplateBinding Background}">
         <Border Style="{StaticResource GoldLine}"/>
         <Image Style="{StaticResource Emblem}"/>
         <Border Style="{StaticResource GreenLine}"/>
         <Path x:Name="path" Style="{StaticResource Arrow}"/>
      <Grid>
         <Grid.Clip>
             <RectangleGeometry Rect="0,5,165,28"/>
         </Grid.Clip>
             <TextBlock x:Name="play" Style="{StaticResource Play}"/>
             <TextBlock x:Name="stop" Style="{StaticResource Stop}"/>
      </Grid> 
  </Grid>

<Grid.Clip>์€ ์ž์‹ ์š”์†Œ์˜ ๊ฐ€์‹œ ์˜์—ญ์„ ์ œํ•œํ•˜๋Š” ํด๋ฆฌํ•‘ ์˜์—ญ์„ ์ •์˜ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” XAML ์š”์†Œ์ž…๋‹ˆ๋‹ค. ํด๋ฆฌํ•‘ ์˜์—ญ์€ ์ผ๋ฐ˜์ ์œผ๋กœ ์‚ฌ๊ฐํ˜•๊ณผ ๊ฐ™์€ ๋ชจ์–‘์ด๋ฉฐ, ํด๋ฆฌํ•‘ ์˜์—ญ ๋‚ด์˜ ๋‚ด์šฉ๋งŒ ํ‘œ์‹œ๋˜๊ณ  ๊ทธ ๋ฐ–์˜ ๋‚ด์šฉ์€ ์ˆจ๊ฒจ์ง‘๋‹ˆ๋‹ค.

์ด ํ”„๋กœ์ ํŠธ์—์„œ๋Š” <Grid.Clip> ์˜์—ญ์ด Path์˜ ํฌ๊ธฐ ๋‚ด์—์„œ ์„ค์ •๋ฉ๋‹ˆ๋‹ค: Rect=โ€œ0,5,165,28โ€. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ํ…์ŠคํŠธ๊ฐ€ ์ด ์˜์—ญ ๋‚ด์—์„œ๋งŒ ๋‚˜ํƒ€๋‚˜๋ฏ€๋กœ Path ๋‚ด์—์„œ ์œ„์•„๋ž˜๋กœ ์Šคํฌ๋กค๋˜๋Š” ํšจ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๋์œผ๋กœ, ๊ณผ์ •์„ ์˜์ƒ์œผ๋กœ ๋ณด๊ณ ์‹ถ๋‹ค๋ฉด ์•„๋ž˜ ํ•œ๊ธ€ ์ž๋ง‰๊ณผ ํ•จ๊ป˜ ์ค€๋น„๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์œผ๋กœ ๋‚ด์šฉ์„ ๋งˆ์นฉ๋‹ˆ๋‹ค! ํ˜น์‹œ ๊ถ๊ธˆํ•œ์ ์€ ๋Œ“๊ธ€๋กœ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

20 Likes

์‹ ๊ทœ๊ธ€์€ ๋งํฌ๋ฅผ 1๊ฐœ ์ด์ƒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์—†๋‹ค๊ณ  ํ•ด์„œ ์•„๋ž˜ ์ถ”๊ฐ€์ ์ธ ๋งํฌ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

5 Likes

ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค! ์ƒ์„ธํ•˜๋ฉด์„œ ๊ฐ์„ฑ์„ ๋Š๋‚„ ์ˆ˜ ์žˆ๋Š” ๊ธ€์ด์˜€์Šต๋‹ˆ๋‹ค!

5 Likes

์•ˆ๋…•ํ•˜์„ธ์š”, ์ด์žฌ์›…์ž…๋‹ˆ๋‹ค.

์–ด๋Š ์ค‘๊ตญ์˜ ๊ฐœ๋ฐœ์ž๋ถ„๊ป˜์„œ ์˜์ƒ์˜ ์ž˜๋ชป๋œ ์„ค๋ช…์„ ์ง€์ ํ•ด์ฃผ์…”์„œ ๊ทธ ๋‚ด์šฉ์„ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค.

11:34่ดๅกžๅฐ”ๆ›ฒ็บฟ้‡ŒCไธๆ˜ฏๅผง็บฟ็š„ไธญ็‚นๅง๏ผŒๆŽงๅˆถ็‚นๆ˜ฏๅœจ็บฟๅค–่พน็š„

โ€œ๋ฒ ์ง€์–ด ๊ณก์„ ์—์„œ C๋Š” ๊ณก์„ ์˜ ์ค‘๊ฐ„์ ์ด ์•„๋‹ˆ์—์š”. ์ œ์–ด์ ์€ ์„  ์™ธ๋ถ€์— ์žˆ์–ด์š”.โ€

์‹ค์ œ๋กœ 11:34 ์˜์ƒ์„ ์ฐพ์•„๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. (๋ณธ๋ฌธ์— ์„ค๋ช…๊ณผ ๋™์ผํ•œ ์ด๋ฏธ์ง€)

๋‹ค์‹œ ํ™•์ธํ•ด๋ณด๋‹ˆ ์ดํ•ด๋ฅผ ์™„์ „ ์ž˜๋ชปํ•œ ์ฒด๋กœ ์„ค๋ช…์ด ๋˜์–ด ์žˆ์—ˆ๋„ค์š”. ๋œจ๋” ํ•˜๋„ค์š”โ€ฆ

๋นจ๋ฆฌ ์ •์ •ํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.



๋จผ์ €, ์˜์ƒ์— ์‚ฌ์šฉ๋œ Path๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

M 0,0 L 103,0 L 118,14 L 103,28 L 0,28 C 10,14 0,0 0,0 Z

์•„๋ž˜ Y์ถ•์˜ 0, 0 ๊ธฐ์ค€์ด ๋ฐ˜์ „๋œ ๊ฒƒ์€ ํฌ๊ฒŒ ๋ฌธ์ œ ์—†์œผ๋‹ˆ ์ดํ•ดํ•ด์ฃผ์„ธ์š”.

GPT๋ฅผ ํ†ตํ•ด ๋งŒ๋“ค์–ด๋ณธ ๊ทธ๋ž˜ํ”„๋ฅผ ๋ณด๋ฉด, C (10, 14)์˜ ์ œ์–ด์  ์œ„์น˜๋Š” ์•„์ดํŒจ๋“œ ์„ค๋ช…์—์„œ์˜ ๊ณก์„ ์— ๊ฑธ์นœ ์  ์œ„์น˜๊ฐ€ ์•„๋‹Œ ๋ฐ”๋กœ ๋ณด์ด๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๊ณก์„ ์„ ๋ฒ—์–ด๋‚œ ์ข€ ๋” ์•ˆ์ชฝ์˜ x ์ง€์ ์ž…๋‹ˆ๋‹ค.

๋ฐ”๋กœ ์ด๊ฒƒ์„ ๋‘๊ณ  โ€œ์ œ์–ด์ ์ด ๊ณก์„  ์™ธ๋ถ€์— ์žˆ๋‹คโ€ ์ง€์ ํ•ด์ฃผ์…จ์Šต๋‹ˆ๋‹ค.



์ด์ œ, Cubic Bezier์˜ ๊ณก์„  ๋ฉ”์ปค๋‹ˆ์ฆ˜์— ๋Œ€ํ•ด ์ข€ ๋” ์ž์„ธํžˆ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ P0, P1, P2, P3 ์ด 4๊ฐœ์˜ ํฌ์ธํŠธ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ํ˜„์žฌ Geometry Path ๋ฐ์ดํ„ฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ฐ’์„ ๊ฐ๊ฐ ๋งคํ•‘ํ•ด๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

P0: 0,28 (์‹œ์ž‘์ )
P1: 10,14 (์ œ์–ด์ 1)
P2: 0,0 (์ œ์–ด์ 2)
P3: 0,0 (๋์ )

๊ทธ๋ฆฌ๊ณ , ๊ทธ๋ ค์ง€๋Š” ๊ณก์„ ์— ์‹œ๊ฐ„์„ ์ถ”๊ฐ€ํ•ด์„œ ํƒ€์ž„๋ผ์ธ ๊ณผ์ •๋„ ํ•œ๋ฒˆ ๋งŒ๋“ค์–ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

ํŒŒ๋ž€ ๋ผ์ธ์˜ ์‹œ์ž‘๊ณผ ๋์ ์ด ์ œ์–ด์ ์„ ๊ธฐ์ค€์œผ๋กœ ์›€์ง์ด๋ฉด์„œ ๊ณก์„ ์„ ๊ทธ๋ฆฌ๊ฒŒ ๋˜๋Š”๋ฐ, ์ด๊ฑด ์‹œ๊ฐํ™”๋œ ์ž๋ฃŒ๋กœ ๋ณด์‹œ๋Š”๊ฒŒ ์ข‹์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ ์• ๋‹ˆ๋ฉ”์ด์…˜์œผ๋กœ ์ž˜ ์ •๋ฆฌ๋œ ๋ธ”๋กœ๊ทธ๋ฅผ ํ™•์ธํ•ด๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์œ ํŠœ๋ธŒ์—๋„ ์—ฌ๊ธฐ๋กœ ๋งํฌ๋ฅผ ๊ฑธ์–ด๋‘์–ด์•ผ๊ฒ ๋„ค์š”โ€ฆ

ํ˜น์‹œ ๊ถ๊ธˆํ•œ ์  ์žˆ์œผ์‹œ๋ฉด, ์•„๋ž˜ ๋Œ“๊ธ€๋กœ ๋‚จ๊ฒจ์ฃผ์„ธ์š”.

7 Likes

UI ๋Š” ์—ญ์‹œ ์ •์„ฑ์ด๋„ค์š”.

๋งŽ์ด ๋ฐฐ์›Œ๊ฐ‘๋‹ˆ๋‹ค.

4 Likes

์œ„์˜ ์ƒํ™ฉ์—์„œ๋Š” Cubic Bezier ๋ณด๋‹ค๋Š” Quadratic Bezier ๋ฅผ ์“ฐ๋Š” ๊ฒŒ ๋‚˜์€ ๊ฑฐ ๊ฐ™๋„ค์š”

1 Like

Cubic Bezier

M 0,0 L 103,0 L 118,14 L 103,28 L 0,28 C 10,14 0,0 0,0 Z

Quadratic Bezier

M 0,0 L 103,0 L 118,14 L 103,28 L 0,28 Q 10,14 0,0 Z

๋” ์ ์€ ์ œ์–ด์ ์œผ๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ง€๊ธˆ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” Quadratic Bezier๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋งž๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

@๋‚˜๊ทธ๋„ค ๋ง์”€์ด ๋งž์Šต๋‹ˆ๋‹ค.

2 Likes