[C#/WPF] 이미지 확대, 축소 처리 (Zoom In, Zoom Out)

C# 이미지(Image) 프로그래밍 중 이미지를 확대 및 축소해야 하는 경우가 발생하였습니다. Image 클래스에서 제공하는 ScaleTransform을 이용하여 이미지를 Zoom In 또는 Zomm Out 하는 방법에 대하여 알아보도록 하겠습니다.

---

C#/WPF 이미지(Image) 확대, 축소

 

Xaml 파일

// Iamge 추가
<ScrollViewer HorizontalScrollBarVisibility="Visible">
    <Image x:Name="ImageView" Stretch="Fill" Width="auto" Height="auto">
        <Image.LayoutTransform>
            <TransformGroup>
                <ScaleTransform x:Name="ScaleTrans"/>
            </TransformGroup>
        </Image.LayoutTransform>
    </Image>
</ScrollViewer>

// Button 추가
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom">
    <Button Margin="3" FontSize="30" FontWeight="Bold" Width="200" Height="50" Content="Zoom In" Click="Button_ZoonIn_Click"/>
    <Button Margin="3" FontSize="30" FontWeight="Bold" Width="200" Height="50" Content="Zoom Out" Click="Button_ZoonOut_Click"/>
</StackPanel>

 

ScrollViewer를 추가한 이유는 확대를 하였을 경우 스크롤이 없을 경우 확대된 이미지의 이동을 하지 못하기 때문입니다. 이미지의 확대 및 축소는 ScaleTransform 으로 조절하도록 합니다.

 

버튼을 통하여 이미지의 확대(Zoom In)와 축소(Zoom Out)를 조절하는 이벤트를 생성하였습니다.

 

Xaml.cs 파일

// 확대 버튼
private void Button_ZoonIn_Click(object sender, RoutedEventArgs e)
{
    ScaleTrans.ScaleX *= 1.1;
    ScaleTrans.ScaleY *= 1.1;
}

// 축소 버튼
private void Button_ZoonOut_Click(object sender, RoutedEventArgs e)
{
    ScaleTrans.ScaleX /= 1.1;
    ScaleTrans.ScaleY /= 1.1;
}

 

확대와 축소 버튼 이벤트를 통하여 이미지의 크기를 조정하는 소스입니다. 버튼을 클릭하면 10%씩 이미지가 확대 또는 축소하는 기능입니다.

 

이상으로 C#에서 이미지(Image)를 확대 및 축소하는 방법에 대하여 알아보았습니다.