image zoom in out

ํ˜„์žฌ ์ด๋Ÿฌํ•œ ์ฝ”๋“œ๋กœ image๋ฅผ zoom controlํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

if (e.delta > 0)
{
    zoomFactor *= 1.1;
}
else
{
    zoomFactor *= 0.9;
}

Image.RenderTransform = new ScaleTransform(zoomFactor, zoomFactor);

์ œ๊ฐ€ ์›ํ•˜๋Š” ๋™์ž‘์€ ์˜ˆ๋ฅผ ๋“ค์–ด width์™€ height์ด 300์ด๋ผ๊ณ  ํ•  ๋•Œ ํ•ด๋‹น ๊ฐ’์€ ๊ณ ์ •ํ•˜๊ณ 
๋‚ด๋ถ€ ์ด๋ฏธ์ง€๋งŒ zoom in out ๋˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ฒฝํ—˜์น˜๊ฐ€ ๊ฒฌ์ง€์ธ์ง€๋ผ ์–ด๋–ค ์†์„ฑ์„ ๊ฑด๋“ค์—ฌ์•ผ width, height์„ ๊ณ ์ •ํ•˜๊ณ  zoom in out ๋˜๋Š”์ง€๋ฅผ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

๋„์™€์ฃผ์‹œ๋ฉด ๋„ˆ๋ฌด ๊ฐ์‚ฌํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. !

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

๋ฌด์„œ์šธ ์ •๋„๋กœ ์งˆ๋ฌธ์„ ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ํ•ด๊ฒฐ๋˜๋„ค์š”,
์ดํ‹€์„ ๋ชปํ–ˆ๋Š”๋ฐ 5๋ถ„๋งŒ์— ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค.

Grid๋กœ ๊ฐ์‹ธ๊ณ  Viewport ์ž์ฒด์˜ ํฌ๊ธฐ๋ฅผ ๋ฐ”๊พธ๋‹ˆ๊นŒ ๋˜๋Š” ๊ฒƒ ๊ฐ™๋„ค์š”

Viewbox.LayoutTransform = new ScaleTransform(Viewbox.LayoutTransform.Value.M11 * 0.9, Viewbox.LayoutTransform.Value.M22 * 0.9);
3๊ฐœ์˜ ์ข‹์•„์š”

๊ฐ์‹ธ๋Š” Grid์— ClipToBounds ์†์„ฑ ๊ฐ’์„ True๋กœ ์ฃผ๋ฉด ์•„๋งˆ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ์ด์ง€ ์•Š์„๊นŒ ํ•ฉ๋‹ˆ๋‹ค.

| ClipToBounds = โ€œFalseโ€
image

| ClipToBounds = โ€œTrueโ€
image

        <Grid
            Width="200"
            Height="200"
            Background="Red"
            ClipToBounds="True">
            <Image Source="https://www.hdec.kr/FileContents/EditorImg/20211227/%EA%B0%95%EC%9B%90%20%EC%A0%95%EC%84%A0%20%EB%A7%8C%ED%95%AD%EC%9E%AC_770.jpg">
                <Image.RenderTransform>
                    <ScaleTransform ScaleX="2" ScaleY="2" />
                </Image.RenderTransform>
            </Image>
        </Grid>
1๊ฐœ์˜ ์ข‹์•„์š”

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ใ…Žใ…Ž ๋””๋ชจ์ด๋‹˜ ๋•๋ถ„์— ํ•ด๊ฒฐํ•˜๊ณ  Pan ๊ตฌํ˜„ํ•˜๊ณ ์žˆ์Šต๋‹ˆ๋‹น

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