[C#/WINUI3/.NET6] ScrollViewer 엘리먼트 사용하기

■ ScrollViewer 엘리먼트를 사용하는 방법을 보여준다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <ScrollViewer Name="scrollViewer"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="400"
            Height="266"
            ZoomMode="Enabled"
            IsTabStop="True"
            IsVerticalScrollChainingEnabled="True">
            <Image
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Stretch="None"
                Source="ms-appx:///IMAGE/cliff.jpg" />
        </ScrollViewer>
        <Grid Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            MinWidth="200"
            RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto"
            ColumnDefinitions="Auto,*">
            <TextBlock Grid.Row="0" Grid.Column="0"
                Text="ZoomMode"
                VerticalAlignment="Center" />
            <ComboBox Name="zoomModeComboBox" Grid.Row="0" Grid.Column="1"
                Margin="10 0 0 0">
                <ComboBoxItem>Disabled</ComboBoxItem>
                <ComboBoxItem>Enabled</ComboBoxItem>
            </ComboBox>
            <Slider Name="zoomSlider" Grid.Row="1" Grid.ColumnSpan="2"
                Margin="0 10 0 0"
                Header="Zoom"
                IsEnabled="True"
                Minimum="{x:Bind scrollViewer.MinZoomFactor, Mode=OneWay}"
                Maximum="{x:Bind scrollViewer.MaxZoomFactor, Mode=OneWay}"
                Value="4" />
            <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
                HorizontalAlignment="Center"
                Margin="0 10 0 0"
                Text="ScrollMode" />
            <TextBlock Grid.Row="3" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 10 0 0"
                Text="Horizontal" />
            <ComboBox Name="horizontalScrollModeComboBox" Grid.Row="3" Grid.Column="1"
                Margin="10 10 0 0">
                <ComboBoxItem>Disabled</ComboBoxItem>
                <ComboBoxItem>Enabled</ComboBoxItem>
                <ComboBoxItem>Auto</ComboBoxItem>
            </ComboBox>
            <TextBlock Grid.Row="4" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 10 0 0"
                Text="Vertical" />
            <ComboBox Name="verticalScrollModeComboBox" Grid.Row="4" Grid.Column="1"
                Margin="10 10 0 0">
                <ComboBoxItem>Disabled</ComboBoxItem>
                <ComboBoxItem>Enabled</ComboBoxItem>
                <ComboBoxItem>Auto</ComboBoxItem>
            </ComboBox>
            <TextBlock Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"
                HorizontalAlignment="Center"
                Margin="0 10 0 0"
                Text="ScrollbarVisibility" />
            <TextBlock Grid.Row="6" Grid.Column="0"
                Margin="0 10 0 0"
                VerticalAlignment="Center"
                Text="Horizontal" />
            <ComboBox Name="horizontalScrollbarVisibilityComboBox" Grid.Row="6" Grid.Column="1"
                Margin="10 10 0 0">
                <ComboBoxItem>Disabled</ComboBoxItem>
                <ComboBoxItem>Auto</ComboBoxItem>
                <ComboBoxItem>Hidden</ComboBoxItem>
                <ComboBoxItem>Visible</ComboBoxItem>
            </ComboBox>
            <TextBlock Grid.Row="7" Grid.Column="0"
                Margin="0 10 0 0"
                VerticalAlignment="Center"
                Text="Vertical" />
            <ComboBox Name="verticalScrollbarVisibilityComboBox" Grid.Row="7" Grid.Column="1"
                Margin="10 10 0 0">
                <ComboBoxItem>Disabled</ComboBoxItem>
                <ComboBoxItem>Auto</ComboBoxItem>
                <ComboBoxItem>Hidden</ComboBoxItem>
                <ComboBoxItem>Visible</ComboBoxItem>
            </ComboBox>
        </Grid>
    </Grid>
</Page>

100

101

102

103

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

<Page x:Class="TestProject.MainPage"

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

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

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<ScrollViewer Name="scrollViewer"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="400"

Height="266"

ZoomMode="Enabled"

IsTabStop="True"

IsVerticalScrollChainingEnabled="True">

<Image

HorizontalAlignment="Left"

VerticalAlignment="Top"

Stretch="None"

Source="ms-appx:///IMAGE/cliff.jpg" />

</ScrollViewer>

<Grid Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

MinWidth="200"

RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto"

ColumnDefinitions="Auto,*">

<TextBlock Grid.Row="0" Grid.Column="0"

Text="ZoomMode"

VerticalAlignment="Center" />

<ComboBox Name="zoomModeComboBox" Grid.Row="0" Grid.Column="1"

Margin="10 0 0 0">

<ComboBoxItem>Disabled</ComboBoxItem>

<ComboBoxItem>Enabled</ComboBoxItem>

</ComboBox>

<Slider Name="zoomSlider" Grid.Row="1" Grid.ColumnSpan="2"

Margin="0 10 0 0"

Header="Zoom"

IsEnabled="True"

Minimum="{x:Bind scrollViewer.MinZoomFactor, Mode=OneWay}"

Maximum="{x:Bind scrollViewer.MaxZoomFactor, Mode=OneWay}"

Value="4" />

<TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Text="ScrollMode" />

<TextBlock Grid.Row="3" Grid.Column="0"

VerticalAlignment="Center"

Margin="0 10 0 0"

Text="Horizontal" />

<ComboBox Name="horizontalScrollModeComboBox" Grid.Row="3" Grid.Column="1"

Margin="10 10 0 0">

<ComboBoxItem>Disabled</ComboBoxItem>

<ComboBoxItem>Enabled</ComboBoxItem>

</ComboBox>

<TextBlock Grid.Row="4" Grid.Column="0"

VerticalAlignment="Center"

Margin="0 10 0 0"

Text="Vertical" />

<ComboBox Name="verticalScrollModeComboBox" Grid.Row="4" Grid.Column="1"

Margin="10 10 0 0">

<ComboBoxItem>Disabled</ComboBoxItem>

<ComboBoxItem>Enabled</ComboBoxItem>

</ComboBox>

<TextBlock Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Text="ScrollbarVisibility" />

<TextBlock Grid.Row="6" Grid.Column="0"

Margin="0 10 0 0"

VerticalAlignment="Center"

Text="Horizontal" />

<ComboBox Name="horizontalScrollbarVisibilityComboBox" Grid.Row="6" Grid.Column="1"

Margin="10 10 0 0">

<ComboBoxItem>Disabled</ComboBoxItem>

<ComboBoxItem>Hidden</ComboBoxItem>

<ComboBoxItem>Visible</ComboBoxItem>

</ComboBox>

<TextBlock Grid.Row="7" Grid.Column="0"

Margin="0 10 0 0"

VerticalAlignment="Center"

Text="Vertical" />

<ComboBox Name="verticalScrollbarVisibilityComboBox" Grid.Row="7" Grid.Column="1"

Margin="10 10 0 0">

<ComboBoxItem>Disabled</ComboBoxItem>

<ComboBoxItem>Hidden</ComboBoxItem>

<ComboBoxItem>Visible</ComboBoxItem>

</ComboBox>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

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

            this.scrollViewer.ViewChanged                               += scrollViewer_ViewChanged;
            this.zoomModeComboBox.SelectionChanged                      += zoomModeComboBox_SelectionChanged;
            this.zoomSlider.ValueChanged                                += zoomSlider_ValueChanged;
            this.horizontalScrollModeComboBox.SelectionChanged          += horizontalScrollModeComboBox_SelectionChanged;
            this.verticalScrollModeComboBox.SelectionChanged            += verticalScrollModeComboBox_SelectionChanged;
            this.horizontalScrollbarVisibilityComboBox.SelectionChanged += horizontalScrollbarVisibilityComboBox_SelectionChanged;
            this.verticalScrollbarVisibilityComboBox.SelectionChanged   += verticalScrollbarVisibilityComboBox_SelectionChanged;

            this.zoomModeComboBox.SelectedIndex                      = 1;
            this.horizontalScrollModeComboBox.SelectedIndex          = 1;
            this.verticalScrollModeComboBox.SelectedIndex            = 1;
            this.horizontalScrollbarVisibilityComboBox.SelectedIndex = 1;
            this.verticalScrollbarVisibilityComboBox.SelectedIndex   = 1;

            this.scrollViewer.ZoomToFactor(4.0f);
        }

        #endregion

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

        #region 스크롤 뷰어 뷰 변경시 처리하기 - scrollViewer_ViewChanged(sender, e)

        /// <summary>
        /// 스크롤 뷰어 뷰 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
        {
            if(!e.IsIntermediate)
            {
                this.zoomSlider.Value = this.scrollViewer.ZoomFactor;
            }
        }

        #endregion
        #region ZoomMode 콤보 박스 선택 변경시 처리하기 - zoomModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// ZoomMode 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void zoomModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.scrollViewer != null && this.zoomSlider != null)
            {
                if(sender is ComboBox comboBox)
                {
                    this.scrollViewer.ZoomMode = (ZoomMode)comboBox.SelectedIndex;
                    this.zoomSlider.IsEnabled  = comboBox.SelectedIndex == 1;

                    if(!this.zoomSlider.IsEnabled)
                    {
                        scrollViewer.ZoomToFactor(1.0f);
                    }
                }
            }
        }

        #endregion
        #region Zoom 슬라이더 값 변경시 처리하기 - zoomSlider_ValueChanged(sender, e)

        /// <summary>
        /// Zoom 슬라이더 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void zoomSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {
            if(this.scrollViewer != null)
            {
                this.scrollViewer.ChangeView(null, null, (float)e.NewValue);
            }
        }

        #endregion
        #region Horizontal ScrollMode 콤보 박스 선택 변경시 처리하기 - horizontalScrollModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// Horizontal ScrollMode 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void horizontalScrollModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.scrollViewer != null)
            {
                if(sender is ComboBox comboBox)
                {
                    this.scrollViewer.HorizontalScrollMode = (ScrollMode)comboBox.SelectedIndex;
                }
            }
        }

        #endregion
        #region Vertical ScrollMode 콤보 박스 선택 변경시 처리하기 - verticalScrollModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// Vertical ScrollMode 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void verticalScrollModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.scrollViewer != null)
            {
                if(sender is ComboBox comboBox)
                {
                    this.scrollViewer.VerticalScrollMode = (ScrollMode)comboBox.SelectedIndex;
                }
            }
        }

        #endregion
        #region Horizontal ScrollbarVisibility 콤보 박스 선택 변경시 처리하기 - horizontalScrollbarVisibilityComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// Horizontal ScrollbarVisibility 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void horizontalScrollbarVisibilityComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.scrollViewer != null)
            {
                if(sender is ComboBox comboBox)
                {
                    this.scrollViewer.HorizontalScrollBarVisibility = (ScrollBarVisibility)comboBox.SelectedIndex;
                }
            }
        }

        #endregion
        #region Vertical ScrollbarVisibility 콤보 박스 선택 변경시 처리하기 - verticalScrollbarVisibilityComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// Vertical ScrollbarVisibility 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void verticalScrollbarVisibilityComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.scrollViewer != null)
            {
                if(sender is ComboBox comboBox)
                {
                    this.scrollViewer.VerticalScrollBarVisibility = (ScrollBarVisibility)comboBox.SelectedIndex;
                }
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Controls.Primitives;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.scrollViewer.ViewChanged += scrollViewer_ViewChanged;

this.zoomModeComboBox.SelectionChanged += zoomModeComboBox_SelectionChanged;

this.zoomSlider.ValueChanged += zoomSlider_ValueChanged;

this.horizontalScrollModeComboBox.SelectionChanged += horizontalScrollModeComboBox_SelectionChanged;

this.verticalScrollModeComboBox.SelectionChanged += verticalScrollModeComboBox_SelectionChanged;

this.horizontalScrollbarVisibilityComboBox.SelectionChanged += horizontalScrollbarVisibilityComboBox_SelectionChanged;

this.verticalScrollbarVisibilityComboBox.SelectionChanged += verticalScrollbarVisibilityComboBox_SelectionChanged;

this.zoomModeComboBox.SelectedIndex = 1;

this.horizontalScrollModeComboBox.SelectedIndex = 1;

this.verticalScrollModeComboBox.SelectedIndex = 1;

this.horizontalScrollbarVisibilityComboBox.SelectedIndex = 1;

this.verticalScrollbarVisibilityComboBox.SelectedIndex = 1;

this.scrollViewer.ZoomToFactor(4.0f);

}

#endregion

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

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

#region 스크롤 뷰어 뷰 변경시 처리하기 - scrollViewer_ViewChanged(sender, e)

/// <summary>

/// 스크롤 뷰어 뷰 변경시 처리하기

/// </summary>

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

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

private void scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)

{

if(!e.IsIntermediate)

{

this.zoomSlider.Value = this.scrollViewer.ZoomFactor;

}

#endregion

#region ZoomMode 콤보 박스 선택 변경시 처리하기 - zoomModeComboBox_SelectionChanged(sender, e)

/// <summary>

/// ZoomMode 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void zoomModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.scrollViewer != null && this.zoomSlider != null)

{

if(sender is ComboBox comboBox)

{

this.scrollViewer.ZoomMode = (ZoomMode)comboBox.SelectedIndex;

this.zoomSlider.IsEnabled = comboBox.SelectedIndex == 1;

if(!this.zoomSlider.IsEnabled)

{

scrollViewer.ZoomToFactor(1.0f);

}

#endregion

#region Zoom 슬라이더 값 변경시 처리하기 - zoomSlider_ValueChanged(sender, e)

/// <summary>

/// Zoom 슬라이더 값 변경시 처리하기

/// </summary>

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

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

private void zoomSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

{

if(this.scrollViewer != null)

{

this.scrollViewer.ChangeView(null, null, (float)e.NewValue);

}

#endregion

#region Horizontal ScrollMode 콤보 박스 선택 변경시 처리하기 - horizontalScrollModeComboBox_SelectionChanged(sender, e)

/// <summary>

/// Horizontal ScrollMode 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void horizontalScrollModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.scrollViewer != null)

{

if(sender is ComboBox comboBox)

{

this.scrollViewer.HorizontalScrollMode = (ScrollMode)comboBox.SelectedIndex;

}

#endregion

#region Vertical ScrollMode 콤보 박스 선택 변경시 처리하기 - verticalScrollModeComboBox_SelectionChanged(sender, e)

/// <summary>

/// Vertical ScrollMode 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void verticalScrollModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.scrollViewer != null)

{

if(sender is ComboBox comboBox)

{

this.scrollViewer.VerticalScrollMode = (ScrollMode)comboBox.SelectedIndex;

}

#endregion

#region Horizontal ScrollbarVisibility 콤보 박스 선택 변경시 처리하기 - horizontalScrollbarVisibilityComboBox_SelectionChanged(sender, e)

/// <summary>

/// Horizontal ScrollbarVisibility 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void horizontalScrollbarVisibilityComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.scrollViewer != null)

{

if(sender is ComboBox comboBox)

{

this.scrollViewer.HorizontalScrollBarVisibility = (ScrollBarVisibility)comboBox.SelectedIndex;

}

#endregion

#region Vertical ScrollbarVisibility 콤보 박스 선택 변경시 처리하기 - verticalScrollbarVisibilityComboBox_SelectionChanged(sender, e)

/// <summary>

/// Vertical ScrollbarVisibility 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void verticalScrollbarVisibilityComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.scrollViewer != null)

{

if(sender is ComboBox comboBox)

{

this.scrollViewer.VerticalScrollBarVisibility = (ScrollBarVisibility)comboBox.SelectedIndex;

}

#endregion

}

TestProject.zip