[C#/WINUI3/.NET6] Image 엘리먼트 : Stretch 속성 사용하기

■ Image 엘리먼트의 Stretch 속성을 사용하는 방법을 보여준다.

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Name="image" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="200"
            Height="200"
            Stretch="None"
            Source="/IMAGE/valley.jpg" />
        <RadioButtons Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Header="Image stretch mode">
            <RadioButton Name="noneStretchRadioButton"
                GroupName="ImageStretch"
                Content="None" />
            <RadioButton Name="fillStretchRadioButton"
                GroupName="ImageStretch"
                Content="Fill" />
            <RadioButton Name="uniformStretchRadioButton"
                GroupName="ImageStretch"
                Content="Uniform" />
            <RadioButton Name="uniformToFillStretchRadioButton"
                GroupName="ImageStretch"
                Content="UniformToFill" />
        </RadioButtons>
    </Grid>
</Window>

<?xml version="1.0" encoding="utf-8"?>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="TestProject">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Name="image" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Height="200"

Stretch="None"

Source="/IMAGE/valley.jpg" />

<RadioButtons Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Header="Image stretch mode">

<RadioButton Name="noneStretchRadioButton"

GroupName="ImageStretch"

Content="None" />

<RadioButton Name="fillStretchRadioButton"

GroupName="ImageStretch"

Content="Fill" />

<RadioButton Name="uniformStretchRadioButton"

GroupName="ImageStretch"

Content="Uniform" />

<RadioButton Name="uniformToFillStretchRadioButton"

GroupName="ImageStretch"

Content="UniformToFill" />

</RadioButtons>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            this.noneStretchRadioButton.Checked          += stretchRadioButton_Checked;
            this.fillStretchRadioButton.Checked          += stretchRadioButton_Checked;
            this.uniformStretchRadioButton.Checked       += stretchRadioButton_Checked;
            this.uniformToFillStretchRadioButton.Checked += stretchRadioButton_Checked;

            this.noneStretchRadioButton.IsChecked = true;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Stretch 라디오 버튼 체크시 처리하기 - stretchRadioButton_Checked(sender, e)

        /// <summary>
        /// Stretch 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void stretchRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            if(this.image != null)
            {
                string  stretchString = (sender as RadioButton).Content.ToString();
                Stretch stretch       = (Stretch)Enum.Parse(typeof(Stretch), stretchString);

                this.image.Stretch = stretch;
            }
        }

        #endregion
    }
}

using System;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.noneStretchRadioButton.Checked += stretchRadioButton_Checked;

this.fillStretchRadioButton.Checked += stretchRadioButton_Checked;

this.uniformStretchRadioButton.Checked += stretchRadioButton_Checked;

this.uniformToFillStretchRadioButton.Checked += stretchRadioButton_Checked;

this.noneStretchRadioButton.IsChecked = true;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Stretch 라디오 버튼 체크시 처리하기 - stretchRadioButton_Checked(sender, e)

/// <summary>

/// Stretch 라디오 버튼 체크시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void stretchRadioButton_Checked(object sender, RoutedEventArgs e)

{

if(this.image != null)

{

string stretchString = (sender as RadioButton).Content.ToString();

Stretch stretch = (Stretch)Enum.Parse(typeof(Stretch), stretchString);

this.image.Stretch = stretch;

}

#endregion

}

TestProject.zip