[C#/WPF] ScrollViewer 클래스 : ScrollChanged 이벤트를 사용해 그리드 컨트롤 흉내내기

■ ScrollViewer 클래스의 ScrollChanged 이벤트를 사용해 그리드 컨트롤을 흉내내는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="ScrollViewer 클래스 : ScrollChanged 이벤트를 사용해 그리드 컨트롤 흉내내기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <ScrollViewer Name="headerScrollViewer"
            HorizontalScrollBarVisibility="Hidden"
            VerticalScrollBarVisibility="Hidden">
            <Grid Background="Beige">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" SharedSizeGroup="column1" />
                    <ColumnDefinition Width="100" SharedSizeGroup="column2" />
                    <ColumnDefinition Width="100" SharedSizeGroup="column3" />
                    <ColumnDefinition Width="100" SharedSizeGroup="column4" />
                    <ColumnDefinition Width="100" SharedSizeGroup="column5" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="25" />
                </Grid.RowDefinitions>
                <Border Grid.Column="0"
                    BorderThickness="1"
                    BorderBrush="DarkGray">
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Foreground="Black">헤더 1
                    </TextBlock>
                </Border>
                <Border Grid.Column="1"
                    BorderThickness="1"
                    BorderBrush="DarkGray">
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Foreground="Black">헤더 2
                    </TextBlock>
                </Border>
                <Border Grid.Column="2"
                    BorderThickness="1"
                    BorderBrush="DarkGray">
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Foreground="Black">헤더 3
                    </TextBlock>
                </Border>
                <Border Grid.Column="3"
                    BorderThickness="1"
                    BorderBrush="DarkGray">
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Foreground="Black">헤더 4
                    </TextBlock>
                </Border>
                <Border Grid.Column="4"
                    BorderThickness="1"
                    BorderBrush="DarkGray">
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Foreground="Black">헤더 5
                    </TextBlock>
                </Border>
                <FrameworkElement Grid.Column="5"
                    Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" />
            </Grid>
        </ScrollViewer>
        <ScrollViewer Name="contentScrollViewer" Grid.Row="1"
            HorizontalScrollBarVisibility="Auto"
            VerticalScrollBarVisibility="AUto">
            <Grid Name="contentGrid" Background="White">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" SharedSizeGroup="column1" />
                    <ColumnDefinition Width="100" SharedSizeGroup="column2" />
                    <ColumnDefinition Width="100" SharedSizeGroup="column3" />
                    <ColumnDefinition Width="100" SharedSizeGroup="column4" />
                    <ColumnDefinition Width="100" SharedSizeGroup="column5" />
                </Grid.ColumnDefinitions>
            </Grid>
        </ScrollViewer>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="ScrollViewer 클래스 : ScrollChanged 이벤트를 사용해 그리드 컨트롤 흉내내기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<ScrollViewer Name="headerScrollViewer"

HorizontalScrollBarVisibility="Hidden"

VerticalScrollBarVisibility="Hidden">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Border Grid.Column="0"

BorderThickness="1"

BorderBrush="DarkGray">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="Black">헤더 1

</TextBlock>

</Border>

<Border Grid.Column="1"

BorderThickness="1"

BorderBrush="DarkGray">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="Black">헤더 2

</TextBlock>

</Border>

<Border Grid.Column="2"

BorderThickness="1"

BorderBrush="DarkGray">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="Black">헤더 3

</TextBlock>

</Border>

<Border Grid.Column="3"

BorderThickness="1"

BorderBrush="DarkGray">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="Black">헤더 4

</TextBlock>

</Border>

<Border Grid.Column="4"

BorderThickness="1"

BorderBrush="DarkGray">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="Black">헤더 5

</TextBlock>

</Border>

<FrameworkElement Grid.Column="5"

Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" />

</Grid>

</ScrollViewer>

<ScrollViewer Name="contentScrollViewer" Grid.Row="1"

HorizontalScrollBarVisibility="Auto"

VerticalScrollBarVisibility="AUto">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</ScrollViewer>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

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

        #region 생성자 - MainWindow()

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

            this.Loaded                            += Window_Loaded;
            this.contentScrollViewer.ScrollChanged += contentScrollViewer_ScrollChanged;
        }

        #endregion

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

        #region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

        /// <summary>
        /// 윈도우 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            for(int y = 0; y < 1000; y++)
            {
                RowDefinition rowDefinition = new RowDefinition();

                rowDefinition.Height = new GridLength(25d, GridUnitType.Pixel);

                this.contentGrid.RowDefinitions.Add(rowDefinition);
            }

            for(int y = 0; y < 1000; y++)
            {
                for(int x = 0; x < 5; x++)
                {
                    TextBlock textBlock = new TextBlock();

                    textBlock.Margin     = new Thickness(3);
                    textBlock.Foreground = Brushes.Black;
                    textBlock.Text       = string.Format("셀({0},{1})", y, x);

                    Border border = new Border();

                    border.BorderThickness = new Thickness(0.5);
                    border.BorderBrush     = Brushes.DarkGray;

                    border.Child = textBlock;

                    Grid.SetRow   (border, y);
                    Grid.SetColumn(border, x);

                    this.contentGrid.Children.Add(border);
                }
            }
        }

        #endregion
        #region 컨텐트 스크롤 뷰어 스크롤 변경시 처리하기 - contentScrollViewer_ScrollChanged(sender, e)

        /// <summary>
        /// 컨텐트 스크롤 뷰어 스크롤 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void contentScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
        {
            this.headerScrollViewer.ScrollToHorizontalOffset(this.contentScrollViewer.ContentHorizontalOffset);
        }

        #endregion
    }
}

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.Loaded += Window_Loaded;

this.contentScrollViewer.ScrollChanged += contentScrollViewer_ScrollChanged;

}

#endregion

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

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

#region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

/// <summary>

/// 윈도우 로드시 처리하기

/// </summary>

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

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

private void Window_Loaded(object sender, RoutedEventArgs e)

{

for(int y = 0; y < 1000; y++)

{

RowDefinition rowDefinition = new RowDefinition();

rowDefinition.Height = new GridLength(25d, GridUnitType.Pixel);

this.contentGrid.RowDefinitions.Add(rowDefinition);

}

for(int y = 0; y < 1000; y++)

{

for(int x = 0; x < 5; x++)

{

TextBlock textBlock = new TextBlock();

textBlock.Margin = new Thickness(3);

textBlock.Foreground = Brushes.Black;

textBlock.Text = string.Format("셀({0},{1})", y, x);

Border border = new Border();

border.BorderThickness = new Thickness(0.5);

border.BorderBrush = Brushes.DarkGray;

border.Child = textBlock;

Grid.SetRow (border, y);

Grid.SetColumn(border, x);

this.contentGrid.Children.Add(border);

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void contentScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)

{

this.headerScrollViewer.ScrollToHorizontalOffset(this.contentScrollViewer.ContentHorizontalOffset);

}

#endregion

}

TestProject.zip