[C#/WPF] ScrollBar 엘리먼트 : 색상 스크롤하기

■ ScrollBar 엘리먼트를 사용해 색상을 스크롤하는 방법을 보여준다.

▶ 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="ScrollBar 엘리먼트 : 색상 스크롤하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Grid Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"  />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid Grid.Row="0" Grid.Column="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*"    />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Row="0" Grid.Column="0"
                    HorizontalAlignment="Center"
                    Margin="10"
                    Content="적색" />
                <ScrollBar Name="redScrollBar" Grid.Row="1" Grid.Column="0"
                    Margin="10"
                    Orientation="Vertical"
                    Focusable="True"
                    Minimum="0"
                    Maximum="255"
                    SmallChange="1"
                    LargeChange="16" />
                <TextBlock Name="redTextBlock" Grid.Row="2" Grid.Column="0"
                    HorizontalAlignment="Center"
                    Margin="10"
                    TextAlignment="Center" />
                <Label Grid.Row="0" Grid.Column="1"
                    HorizontalAlignment="Center"
                    Margin="10"
                    Content="녹색" />
                <ScrollBar Name="greenScrollBar" Grid.Row="1" Grid.Column="1"
                    Margin="10"
                    Orientation="Vertical"
                    Focusable="True"
                    Minimum="0"
                    Maximum="255"
                    SmallChange="1"
                    LargeChange="16" />
                <TextBlock Name="greenTextBlock" Grid.Row="2" Grid.Column="1"
                    HorizontalAlignment="Center"
                    Margin="10"
                    TextAlignment="Center" />
                <Label Grid.Row="0" Grid.Column="2"
                    HorizontalAlignment="Center"
                    Margin="10"
                    Content="청색" />
                <ScrollBar Name="blueScrollBar" Grid.Row="1" Grid.Column="2"
                    Margin="10"
                    Orientation="Vertical"
                    Focusable="True"
                    Minimum="0"
                    Maximum="255"
                    SmallChange="1"
                    LargeChange="16" />
                <TextBlock Name="blueTextBlock" Grid.Row="2" Grid.Column="3"
                    HorizontalAlignment="Center"
                    Margin="10"
                    TextAlignment="Center" />
            </Grid>
            <GridSplitter Grid.Row="0" Grid.Column="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Stretch"
                Width="10" />
            <StackPanel Name="stackPanel" Grid.Row="0" Grid.Column="2"
                Background="{StaticResource {x:Static SystemColors.WindowBrushKey}}" />
        </Grid>
    </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="ScrollBar 엘리먼트 : 색상 스크롤하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

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

HorizontalAlignment="Center"

Margin="10"

Content="적색" />

<ScrollBar Name="redScrollBar" Grid.Row="1" Grid.Column="0"

Margin="10"

Orientation="Vertical"

Focusable="True"

Minimum="0"

Maximum="255"

SmallChange="1"

LargeChange="16" />

<TextBlock Name="redTextBlock" Grid.Row="2" Grid.Column="0"

HorizontalAlignment="Center"

Margin="10"

TextAlignment="Center" />

<Label Grid.Row="0" Grid.Column="1"

HorizontalAlignment="Center"

Margin="10"

Content="녹색" />

<ScrollBar Name="greenScrollBar" Grid.Row="1" Grid.Column="1"

Margin="10"

Orientation="Vertical"

Focusable="True"

Minimum="0"

Maximum="255"

SmallChange="1"

LargeChange="16" />

<TextBlock Name="greenTextBlock" Grid.Row="2" Grid.Column="1"

HorizontalAlignment="Center"

Margin="10"

TextAlignment="Center" />

<Label Grid.Row="0" Grid.Column="2"

HorizontalAlignment="Center"

Margin="10"

Content="청색" />

<ScrollBar Name="blueScrollBar" Grid.Row="1" Grid.Column="2"

Margin="10"

Orientation="Vertical"

Focusable="True"

Minimum="0"

Maximum="255"

SmallChange="1"

LargeChange="16" />

<TextBlock Name="blueTextBlock" Grid.Row="2" Grid.Column="3"

HorizontalAlignment="Center"

Margin="10"

TextAlignment="Center" />

</Grid>

<GridSplitter Grid.Row="0" Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Stretch"

Width="10" />

<StackPanel Name="stackPanel" Grid.Row="0" Grid.Column="2"

Background="{StaticResource {x:Static SystemColors.WindowBrushKey}}" />

</Grid>

</Window>

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            Loaded                           += Window_Loaded;
            this.redScrollBar.ValueChanged   += colorScrollBar_ValueChanged;
            this.greenScrollBar.ValueChanged += colorScrollBar_ValueChanged;
            this.blueScrollBar.ValueChanged  += colorScrollBar_ValueChanged;
        }

        #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)
        {
            Color color = (this.stackPanel.Background as SolidColorBrush).Color;

            this.redScrollBar.Value   = color.R;
            this.greenScrollBar.Value = color.G;
            this.blueScrollBar.Value  = color.B;

            this.redScrollBar.Focus();
        }

        #endregion
        #region 색상 스크롤바 값 변경시 처리하기 - colorScrollBar_ValueChanged(sender, e)

        /// <summary>
        /// 색상 스크롤바 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void colorScrollBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ScrollBar scrollBar = sender as ScrollBar;

            Panel panel = scrollBar.Parent as Panel;

            TextBlock textBlock;

            if(scrollBar == this.redScrollBar)
            {
                textBlock = this.redTextBlock;
            }
            else if(scrollBar == this.greenScrollBar)
            {
                textBlock = this.greenTextBlock;
            }
            else
            {
                textBlock = this.blueTextBlock;
            }

            textBlock.Text = string.Format("{0}\n0x{0:X2}", (int)scrollBar.Value);

            this.stackPanel.Background = new SolidColorBrush
            (
                Color.FromRgb
                (
                    (byte)redScrollBar.Value,
                    (byte)greenScrollBar.Value,
                    (byte)blueScrollBar.Value
                )
            );
        }

        #endregion
    }
}

100

using System.Windows;

using System.Windows.Controls;

using System.Windows.Controls.Primitives;

using System.Windows.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

Loaded += Window_Loaded;

this.redScrollBar.ValueChanged += colorScrollBar_ValueChanged;

this.greenScrollBar.ValueChanged += colorScrollBar_ValueChanged;

this.blueScrollBar.ValueChanged += colorScrollBar_ValueChanged;

}

#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)

{

Color color = (this.stackPanel.Background as SolidColorBrush).Color;

this.redScrollBar.Value = color.R;

this.greenScrollBar.Value = color.G;

this.blueScrollBar.Value = color.B;

this.redScrollBar.Focus();

}

#endregion

#region 색상 스크롤바 값 변경시 처리하기 - colorScrollBar_ValueChanged(sender, e)

/// <summary>

/// 색상 스크롤바 값 변경시 처리하기

/// </summary>

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

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

private void colorScrollBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

{

ScrollBar scrollBar = sender as ScrollBar;

Panel panel = scrollBar.Parent as Panel;

TextBlock textBlock;

if(scrollBar == this.redScrollBar)

{

textBlock = this.redTextBlock;

}

else if(scrollBar == this.greenScrollBar)

{

textBlock = this.greenTextBlock;

}

else

{

textBlock = this.blueTextBlock;

}

textBlock.Text = string.Format("{0}\n0x{0:X2}", (int)scrollBar.Value);

this.stackPanel.Background = new SolidColorBrush

(

Color.FromRgb

(

(byte)redScrollBar.Value,

(byte)greenScrollBar.Value,

(byte)blueScrollBar.Value

)

);

}

#endregion

}

TestProject.zip