[C#/UWP] ScrollViewer 엘리먼트 사용하기

728x90

반응형

728x170

TestProject.zip

0.17MB

▶ MainPage.xaml

<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="50"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <ScrollViewer Name="scrollViewer" Grid.Column="0"
            IsTabStop="True"
            ZoomMode="Disabled"
            IsVerticalScrollChainingEnabled="True"
            ManipulationCompleted="scrollViewer_ManipulationCompleted">
            <Image
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Stretch="None"
                Source="ms-appx:///IMAGE/cliff.jpg" />
        </ScrollViewer>
        <Grid MinWidth="200" Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 0 10 0"
                Text="확대/축소 모드" />
            <ComboBox Grid.Row="0" Grid.Column="1"
                HorizontalAlignment="Stretch"
                SelectionChanged="zoomModeComboBox_SelectionChanged">
                <ComboBoxItem>Enabled</ComboBoxItem>
                <ComboBoxItem IsSelected="True">Disabled</ComboBoxItem>
            </ComboBox>
            <Slider Name="zoomSlider" Grid.Row="1" Grid.ColumnSpan="2"
                Margin="0 10 0 0"
                Header="확대/축소"
                IsEnabled="False"
                Minimum="{x:Bind scrollViewer.MinZoomFactor, Mode=OneWay}"
                Maximum="{x:Bind scrollViewer.MaxZoomFactor, Mode=OneWay}"
                Value="1"
                ValueChanged="zoomSlider_ValueChanged" />
            <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
                HorizontalAlignment="Center"
                Margin="0 10"
                Text="스크롤 모드" />
            <TextBlock Grid.Row="3" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 0 10 0"
                Text="수평" />
            <ComboBox Grid.Row="3" Grid.Column="1"
                HorizontalAlignment="Stretch"
                SelectedIndex="1"
                SelectionChanged="horizontalScrollModeComboBox_SelectionChanged">
                <ComboBoxItem>Auto</ComboBoxItem>
                <ComboBoxItem>Enabled</ComboBoxItem>
                <ComboBoxItem>Disabled</ComboBoxItem>
            </ComboBox>
            <TextBlock Grid.Row="4" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 10 10 0"
                Text="수직" />
            <ComboBox Grid.Row="4" Grid.Column="1"
                HorizontalAlignment="Stretch"
                Margin="0 10 0 0"
                SelectedIndex="1"
                SelectionChanged="verticalScrollModeComboBox_SelectionChanged">
                <ComboBoxItem>Auto</ComboBoxItem>
                <ComboBoxItem>Enabled</ComboBoxItem>
                <ComboBoxItem>Disabled</ComboBoxItem>
            </ComboBox>
            <TextBlock Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"
                HorizontalAlignment="Center"
                Margin="0 20 0 10"
                Text="스크롤바 표시" />
            <TextBlock Grid.Row="6" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 0 10 0"
                Text="수평" />
            <ComboBox Grid.Row="6" Grid.Column="1"
                HorizontalAlignment="Stretch"
                SelectedIndex="3"
                SelectionChanged="horizontalScrollBarVisibilityComboBox_SelectionChanged">
                <ComboBoxItem>Auto</ComboBoxItem>
                <ComboBoxItem>Visible</ComboBoxItem>
                <ComboBoxItem>Hidden</ComboBoxItem>
                <ComboBoxItem>Disabled</ComboBoxItem>
            </ComboBox>
            <TextBlock Grid.Row="7" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 10 10 0"
                Text="수직" />
            <ComboBox Grid.Row="7" Grid.Column="1"
                HorizontalAlignment="Stretch"
                Margin="0 10 0 0"
                SelectedIndex="1"
                SelectionChanged="verticalScrollBarVisibilityComboBox_SelectionChanged">
                <ComboBoxItem>Auto</ComboBoxItem>
                <ComboBoxItem>Visible</ComboBoxItem>
                <ComboBoxItem>Hidden</ComboBoxItem>
                <ComboBoxItem>Disabled</ComboBoxItem>
            </ComboBox>
        </Grid>
    </Grid>
</Page>

 

728x90

 

▶ MainPage.xaml.cs

using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Input;

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

        #region 생성자 - MainPage()

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

            #region 윈도우 크기를 설정한다.

            double width  = 800d;
            double height = 600d;

            double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

            Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

            ApplicationView.PreferredLaunchViewSize = windowSize;

            Window.Current.Activate();

            ApplicationView.GetForCurrentView().TryResizeView(windowSize);

            #endregion
            #region 윈도우 제목을 설정한다.

            ApplicationView.GetForCurrentView().Title = "ScrollViewer 엘리먼트 사용하기";

            #endregion
        }

        #endregion

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

        #region 스크롤 뷰어 조작 완료시 처리하기 - scrollViewer_ManipulationCompleted(sender, e)

        /// <summary>
        /// 스크롤 뷰어 조작 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void scrollViewer_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {
            this.zoomSlider.Value = this.scrollViewer.ZoomFactor;
        }

        #endregion
        #region 확대/축소 모드 콤보 박스 선택 변경시 처리하기 - zoomModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 확대/축소 모드 콤보 박스 선택 변경시 처리하기
        /// </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)
                {
                    switch(comboBox.SelectedIndex)
                    {
                        case 0 : // Enabled

                            this.scrollViewer.ZoomMode = ZoomMode.Enabled;

                            this.zoomSlider.IsEnabled = true;

                            break;

                        case 1 : // Disabled
                        default : // Disabled

                            this.scrollViewer.ZoomMode = ZoomMode.Disabled;

                            this.scrollViewer.ChangeView(null, null, (float)1.0);

                            this.zoomSlider.Value     = 1;
                            this.zoomSlider.IsEnabled = false;

                            break;
                    }
                }
            }
        }

        #endregion
        #region 확대/축소 슬라이더 값 변경시 처리하기 - zoomSlider_ValueChanged(sender, e)

        /// <summary>
        /// 확대/축소 슬라이더 값 변경시 처리하기
        /// </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 수평 스크롤 모드 콤보 박스 선택 변경시 처리하기 - horizontalScrollModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 수평 스크롤 모드 콤보 박스 선택 변경시 처리하기
        /// </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)
                {
                    switch(comboBox.SelectedIndex)
                    {
                        case 0  : this.scrollViewer.HorizontalScrollMode = ScrollMode.Auto;     break;
                        case 1  : this.scrollViewer.HorizontalScrollMode = ScrollMode.Enabled;  break;
                        case 2  : this.scrollViewer.HorizontalScrollMode = ScrollMode.Disabled; break;
                        default : this.scrollViewer.HorizontalScrollMode = ScrollMode.Enabled;  break;
                    }
                }
            }
        }

        #endregion
        #region 수직 스크롤 모드 콤보 박스 선택 변경시 처리하기 - verticalScrollModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 수직 스크롤 모드 콤보 박스 선택 변경시 처리하기
        /// </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)
                {
                    switch(comboBox.SelectedIndex)
                    {
                        case 0  : this.scrollViewer.VerticalScrollMode = ScrollMode.Auto;     break;
                        case 1  : this.scrollViewer.VerticalScrollMode = ScrollMode.Enabled;  break;
                        case 2  : this.scrollViewer.VerticalScrollMode = ScrollMode.Disabled; break;
                        default : this.scrollViewer.VerticalScrollMode = ScrollMode.Enabled;  break;
                    }
                }
            }
        }

        #endregion
        #region 수평 스크롤바 표시 콤보 박스 선택 변경시 처리하기 - horizontalScrollBarVisibilityComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 수평 스크롤바 표시 콤보 박스 선택 변경시 처리하기
        /// </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)
                {
                    switch(comboBox.SelectedIndex)
                    {
                        case 0  : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;     break;
                        case 1  : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Visible;  break;
                        case 2  : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;   break;
                        case 3  : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled; break;
                        default : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled; break;
                    }
                }
            }
        }

        #endregion
        #region 수직 스크롤바 표시 콤보 박스 선택 변경시 처리하기 - verticalScrollBarVisibilityComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 수직 스크롤바 표시 콤보 박스 선택 변경시 처리하기
        /// </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)
                {
                    switch(comboBox.SelectedIndex)
                    {
                        case 0  : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;     break;
                        case 1  : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;  break;
                        case 2  : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;   break;
                        case 3  : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled; break;
                        default : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;  break;
                    }
                }
            }
        }

        #endregion
    }
}

728x90

반응형

그리드형(광고전용)

• 카카오스토리
• 트위터
• 페이스북

'C# > UWP' 카테고리의 다른 글

[C#/UWP] ProgressBar 엘리먼트 : ShowPaused/ShowError 속성 사용하기  (0)	2021.07.17
[C#/UWP] InfoBar 엘리먼트 : IsOpen/IsIconVisible/IsClosable 속성 사용하기  (0)	2021.07.17
[C#/UWP] InfoBar 엘리먼트 : Message/ActionButton 속성 사용하기  (0)	2021.07.17
[C#/UWP] InfoBar 엘리먼트 : IsOpen/Severity 속성 사용하기  (0)	2021.07.17
[C#/UWP] SemanticZoom 엘리먼트 사용하기  (0)	2021.07.16
[C#/UWP] ApplicationViewSwitcher 클래스 : TryShowAsStandaloneAsync 정적 메소드를 사용해 신규 윈도우 표시하기  (0)	2021.07.16
[C#/UWP] TabView 엘리먼트 : 강조 색상 탭 스트립 배경 사용하기  (0)	2021.07.16
[C#/UWP] TabViewItem 엘리먼트 : IconSource 속성 사용하기  (0)	2021.07.16
[C#/UWP] TabView 엘리먼트 : CloseButtonOverlayMode 속성 사용하기  (0)	2021.07.16
[C#/UWP] TabView 엘리먼트 : TabWidthMode 속성 사용하기  (0)	2021.07.16