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

TestProject.zip

다운로드

▶ 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>

 

728x90

 

▶ 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
    }
}