[C#/WPF] Grid 클래스 : 자동 인덱스 설정 그리드 만들기

■ Grid 클래스를 사용해 자동 인덱스 설정 그리드를 만드는 방법을 보여준다.

▶ 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"
    xmlns:local="clr-namespace:TestProject"
    Width="800"
    Height="600"
    Title="Grid 클래스 : 자동 인덱스 설정 그리드 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        Margin="10"
        Background="LightSteelBlue">
        <Grid.Resources>
            <Style x:Key="SampleBorderStyleKey" TargetType="{x:Type Border}">
                <Setter Property="Margin"          Value="2"    />
                <Setter Property="BorderBrush"     Value="Navy" />
                <Setter Property="BorderThickness" Value="3"    />
                <Setter Property="CornerRadius"    Value="5"    />
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush
                            StartPoint="0 0"
                            EndPoint="0 1">
                            <GradientBrush.GradientStops>
                                <GradientStopCollection>
                                    <GradientStop Color="Azure"     Offset="0" />
                                    <GradientStop Color="LightBlue" Offset="1" />
                                </GradientStopCollection>
                            </GradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Padding"         Value="5"    />
            </Style>
            <Style x:Key="ControlStyleKey" TargetType="{x:Type Control}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Control}">
                            <Border
                                Margin="1"
                                CornerRadius="5"
                                BorderBrush="Navy"
                                BorderThickness="3"
                                Background="Azure"
                                Padding="5">
                                <Image
                                    Width="50"
                                    Source="IMAGE/smiley.png" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <Border Style="{DynamicResource SampleBorderStyleKey}">
            <ScrollViewer>
                <StackPanel>
                    <Grid>
                        <Grid.Resources>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="VerticalAlignment" Value="Center" />
                                <Setter Property="Margin"            Value="8"      />
                            </Style>
                        </Grid.Resources>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*"    />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
                            TextWrapping="WrapWithOverflow">
    이것은 열 수에 따라 하위 컬렉션을 인덱싱하는 사용자 지정 Grid 요소의 예입니다.
    슬라이더를 사용하여 그리드의 하위 요소 및 열 수를 조작합니다.
    그리드 선을 사용하여 새 기둥 작성을 시각적으로 보여줍니다.
                        </TextBlock>
                        <Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"
                            Style="{DynamicResource SampleBorderStyleKey}" />
                        <TextBlock Grid.Row="1" Grid.Column="0"
                            TextAlignment="Right">
                            자식 수 :
                        </TextBlock>
                        <Slider Name="childCountSlider" Grid.Row="1" Grid.Column="1"
                            Margin="10"
                            Width="300"
                            Height="20"
                            Minimum="0"
                            Maximum="24"
                            Value="3" />
                        <TextBlock Name="childCountTextBlock" Grid.Row="1" Grid.Column="2"
                            TextAlignment="Left">
                            3
                        </TextBlock>
                        <Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"
                            Style="{DynamicResource SampleBorderStyleKey}" />
                        <TextBlock Grid.Row="2" Grid.Column="0"
                            TextAlignment="Right">
                            컬럼 수 :
                        </TextBlock>
                        <Slider Name="columnCountSlider" Grid.Row="2" Grid.Column="1"
                            Margin="10"
                            Width="300"
                            Height="20"
                            Minimum="1"
                            Maximum="8"
                            Value="3" />
                        <TextBlock Name="columnCountTextBlock" Grid.Row="2" Grid.Column="2"
                            TextAlignment="Left">
                            3
                        </TextBlock>
                    </Grid>
                    <local:AutoIndexingGrid x:Name="targetGrid"
                        ShowGridLines="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Control Style="{DynamicResource ControlStyleKey}" />
                            <Control Style="{DynamicResource ControlStyleKey}" />
                            <Control Style="{DynamicResource ControlStyleKey}" />
                    </local:AutoIndexingGrid>
                </StackPanel>
            </ScrollViewer>
        </Border>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

xmlns:local="clr-namespace:TestProject"

Width="800"

Height="600"

Title="Grid 클래스 : 자동 인덱스 설정 그리드 사용하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

Margin="10"

Background="LightSteelBlue">

<Grid.Resources>

<Setter.Value>

<LinearGradientBrush

StartPoint="0 0"

EndPoint="0 1">

<GradientBrush.GradientStops>

</GradientStopCollection>

</GradientBrush.GradientStops>

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Style>

<Setter.Value>

<Border

Margin="1"

CornerRadius="5"

BorderBrush="Navy"

BorderThickness="3"

Background="Azure"

Padding="5">

<Image

Width="50"

Source="IMAGE/smiley.png" />

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

<Grid>

<Grid.Resources>

</Style>

</Grid.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

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

TextWrapping="WrapWithOverflow">

이것은 열 수에 따라 하위 컬렉션을 인덱싱하는 사용자 지정 Grid 요소의 예입니다.

슬라이더를 사용하여 그리드의 하위 요소 및 열 수를 조작합니다.

그리드 선을 사용하여 새 기둥 작성을 시각적으로 보여줍니다.

</TextBlock>

<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"

Style="{DynamicResource SampleBorderStyleKey}" />

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

TextAlignment="Right">

자식 수 :

</TextBlock>

<Slider Name="childCountSlider" Grid.Row="1" Grid.Column="1"

Margin="10"

Width="300"

Height="20"

Minimum="0"

Maximum="24"

Value="3" />

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

TextAlignment="Left">

</TextBlock>

<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"

Style="{DynamicResource SampleBorderStyleKey}" />

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

TextAlignment="Right">

컬럼 수 :

</TextBlock>

<Slider Name="columnCountSlider" Grid.Row="2" Grid.Column="1"

Margin="10"

Width="300"

Height="20"

Minimum="1"

Maximum="8"

Value="3" />

<TextBlock Name="columnCountTextBlock" Grid.Row="2" Grid.Column="2"

TextAlignment="Left">

</TextBlock>

</Grid>

<local:AutoIndexingGrid x:Name="targetGrid"

ShowGridLines="True">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</local:AutoIndexingGrid>

</StackPanel>

</ScrollViewer>

</Border>

</Grid>

</Window>

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            Loaded += Window_Loaded;
        }

        #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)
        {
            Slider childCountSlider  = (Slider)LogicalTreeHelper.FindLogicalNode(this, "childCountSlider" );
            Slider columnCountSlider = (Slider)LogicalTreeHelper.FindLogicalNode(this, "columnCountSlider");

            childCountSlider.ValueChanged  += childCountSlider_ValueChanged;
            columnCountSlider.ValueChanged += columnCountSlider_ValueChanged;
        }

        #endregion
        #region 자식 수 슬라이더 값 변경시 처리하기 - childCountSlider_ValueChanged(sender, e)

        /// <summary>
        /// 자식 수 슬라이더 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void childCountSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            int childrenCount = (int)Math.Floor(e.NewValue + 0.5);

            AutoIndexingGrid targetGrid = (AutoIndexingGrid)LogicalTreeHelper.FindLogicalNode(this, "targetGrid");

            while(targetGrid.Children.Count < childrenCount)
            {
                Control control = new Control();

                targetGrid.Children.Add(control);

                control.Style = (Style)control.FindResource("ControlStyleKey");
            }

            while(targetGrid.Children.Count > childrenCount)
            {
                targetGrid.Children.Remove(targetGrid.Children[targetGrid.Children.Count - 1]);
            }

            TextBlock childCountTextBlock = (TextBlock)LogicalTreeHelper.FindLogicalNode(this, "childCountTextBlock");

            childCountTextBlock.Text = childrenCount.ToString();
        }

        #endregion
        #region 컬럼 수 슬라이더 값 변경시 처리하기 - columnCountSlider_ValueChanged(sender, e)

        /// <summary>
        /// 컬럼 수 슬라이더 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void columnCountSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            int columnCount = (int)Math.Floor(e.NewValue + 0.5);

            AutoIndexingGrid targetGrid = (AutoIndexingGrid)LogicalTreeHelper.FindLogicalNode(this, "targetGrid");

            while(targetGrid.ColumnDefinitions.Count < columnCount)
            {
                targetGrid.ColumnDefinitions.Add(new ColumnDefinition());
            }

            while(targetGrid.ColumnDefinitions.Count > columnCount)
            {
                targetGrid.ColumnDefinitions.Remove(targetGrid.ColumnDefinitions[targetGrid.ColumnDefinitions.Count - 1]);
            }

            TextBlock columnCountTextBlock = (TextBlock)LogicalTreeHelper.FindLogicalNode(this, "columnCountTextBlock");

            columnCountTextBlock.Text = columnCount.ToString();
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

using System;

using System.Windows;

using System.Windows.Controls;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

Loaded += Window_Loaded;

}

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

{

Slider childCountSlider = (Slider)LogicalTreeHelper.FindLogicalNode(this, "childCountSlider" );

Slider columnCountSlider = (Slider)LogicalTreeHelper.FindLogicalNode(this, "columnCountSlider");

childCountSlider.ValueChanged += childCountSlider_ValueChanged;

columnCountSlider.ValueChanged += columnCountSlider_ValueChanged;

}

#endregion

#region 자식 수 슬라이더 값 변경시 처리하기 - childCountSlider_ValueChanged(sender, e)

/// <summary>

/// 자식 수 슬라이더 값 변경시 처리하기

/// </summary>

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

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

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

{

int childrenCount = (int)Math.Floor(e.NewValue + 0.5);

AutoIndexingGrid targetGrid = (AutoIndexingGrid)LogicalTreeHelper.FindLogicalNode(this, "targetGrid");

while(targetGrid.Children.Count < childrenCount)

{

Control control = new Control();

targetGrid.Children.Add(control);

control.Style = (Style)control.FindResource("ControlStyleKey");

}

while(targetGrid.Children.Count > childrenCount)

{

targetGrid.Children.Remove(targetGrid.Children[targetGrid.Children.Count - 1]);

}

TextBlock childCountTextBlock = (TextBlock)LogicalTreeHelper.FindLogicalNode(this, "childCountTextBlock");

childCountTextBlock.Text = childrenCount.ToString();

}

#endregion

#region 컬럼 수 슬라이더 값 변경시 처리하기 - columnCountSlider_ValueChanged(sender, e)

/// <summary>

/// 컬럼 수 슬라이더 값 변경시 처리하기

/// </summary>

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

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

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

{

int columnCount = (int)Math.Floor(e.NewValue + 0.5);

AutoIndexingGrid targetGrid = (AutoIndexingGrid)LogicalTreeHelper.FindLogicalNode(this, "targetGrid");

while(targetGrid.ColumnDefinitions.Count < columnCount)

{

targetGrid.ColumnDefinitions.Add(new ColumnDefinition());

}

while(targetGrid.ColumnDefinitions.Count > columnCount)

{

targetGrid.ColumnDefinitions.Remove(targetGrid.ColumnDefinitions[targetGrid.ColumnDefinitions.Count - 1]);

}

TextBlock columnCountTextBlock = (TextBlock)LogicalTreeHelper.FindLogicalNode(this, "columnCountTextBlock");

columnCountTextBlock.Text = columnCount.ToString();

}

#endregion

}

TestProject.zip