코딩하는 핑구

https://studyingpingu.tistory.com/77

저번글에 이어 조금더 완성도가 높아진 gridsplitter 글

그리드의 row, column의 영역을 마우스 드래그로 조절할수있는 gridsplitter 추가 예제

divideCnt만 정해주면 그만큼 gridsplitter 추가해주는 코드

public void divideRowAuto()
{	
	if (divideCnt == 0) return;

	double dividedHeight = mainGrid.Height / divideCnt;

	mainGrid.RowDefinitions.Clear();
	mainGrid.Children.Clear();

	//첫번째 로우
	RowDefinition row = new RowDefinition()
	{
		Height = new GridLength(dividedHeight, GridUnitType.Star),
		MinHeight = 30
	};
	mainGrid.RowDefinitions.Add(row);

	for (int i = 1; i <= (divideCnt - 1) * 2; i += 2)
	{
		RowDefinition row1 = new RowDefinition()
		{
			Height = new GridLength(15),
			MaxHeight = 15,
			MinHeight = 15
		};

		GridSplitter splitter1 = new GridSplitter()
		{
			VerticalAlignment = VerticalAlignment.Center,
			HorizontalAlignment = HorizontalAlignment.Stretch,
			ResizeBehavior = GridResizeBehavior.PreviousAndNext,
			Background = new SolidColorBrush(Colors.Red),
			Height = 2
		};
		mainGrid.RowDefinitions.Add(row1);
		mainGrid.Children.Add(splitter1);
		
		Grid.SetRow(splitter1, i);
		Grid.SetColumn(splitter1, 0);

		RowDefinition row2 = new RowDefinition()
		{
			Height = new GridLength(dividedHeight, GridUnitType.Star),
			MinHeight = 30,
		};

		mainGrid.RowDefinitions.Add(row2);
	}
}

코드 요약

gridsplitter는 독립된 row에 하나씩 배치된다

rowdefinition은 추가하면 이거 자체가 row다 보니 순서대로 추가가 되지만

gridsplitter를 생성한 다음 그리드에 추가하고 row를 세팅해줘야 분할하고자 하는 위치에 정확하게 추가된다

gridsplitter 1개가 생기면 row는 총 3개가 된다

6분할 예시 (divideCnt가 6인 경우 gridsplitter는 5개가 생성됨)

grid를 분할할수있는 RowDefinition과 분할 영역을 자유롭게 바꿀수있는

gridsplitter를 c# 코드적으로 생성하는 법을 기록해봄

이 방법을 응용하면 columndefinition에도 적용이 가능하다

gridsplitter란

진짜 말그대로 grid 영역 늘였다 줄였다 가능한 선

대충 사용하려는 grid는 위와같다

코드 영역을 주석으로 대강 설명해둔 코드들

mainGrid.RowDefinitions.Add(new RowDefinition
{
    //auto, star pixel로 Row의 height 지정 가능 
    Height = GridLength.Auto,
    
    //Height = new GridLength(1, GridUnitType.Star), 
    //1* 또는*과 같은듯 2*을 하고 싶다면 아래와 같이 적으면 됨
    //Height = new GridLength(2, GridUnitType.Star), 
    
    MinHeight = 15
    // 생성된 Row가 갖는 최소한의 높이 영역 값이 커질수록
    //각 Row가 갖는 영역의 height가 높아진다/넓어진다
});

height를 auto로 잡지 않으면 gridsplitter로 영역을 재분배해도 보이지않는 한계가 생긴다

만약 row가 3개이고 height 값들이 다 1*인 경우,

1을 3으로 나눈 영역까지만 이동되는 그런거

얇은 선으로 생겨서 마우스로 드래그하여grid 영역 조절이 가능한 gridsplitter

GridSplitter splitter = new GridSplitter()
{	
    //gridsplitter 선을 그리드 row 영역의 맨 위에 오게 함
    VerticalAlignment = VerticalAlignment.Top,
    
    //Row 영역에 gridsplitter를 생성하는 경우 stretch 속성을 사용하여
    //가로를 꽉차게 해주는 듯하다    
    HorizontalAlignment = HorizontalAlignment.Stretch,
    
    //ResizeBehavior 이건 조금 헷갈리는데 위아래로 그리드 영역을 넓히고 줄이고 싶으면
    //PreviousAndNext 이 값을 사용하면 되는듯 몇개의 값들이 더 있긴 한데
    //그건 본인 상황에 따라 다르게 쓰면 되겠다
    ResizeBehavior = GridResizeBehavior.PreviousAndNext,
    
    //gridsplitter 선 색
    Background = new SolidColorBrush(Colors.LightPink),
    
    //gridsplitter 두께
    Height = 5
};

	
    //메인 그리드에 생성한 splitter들을 추가해준다
    mainGrid.Children.Add(splitter);
    mainGrid.Children.Add(splitter2);
	
    //나는 각 컬럼 별 생성한 gridsplitter를 다르게 사용할 것이므로 다음과 같이
    //그리드의 Row 영역에 덧붙여 줬다
    Grid.SetRow(splitter, mainGrid.RowDefinitions.Count - 1);
    Grid.SetColumn(splitter, 0);

    Grid.SetRow(splitter2, mainGrid.RowDefinitions.Count - 1);
    Grid.SetColumn(splitter2, 1);

동적으로 생성한 gridsplitter를 메인으로 사용할 그리드에 추가하는 방법

아래는 최종 본 cs 코드

//추가한 gridsplitter 위아래로 자유롭게 이동됨, gridsplitter 잘 추가됨
private void addRow_Click(object sender, RoutedEventArgs e)
{
    mainGrid.RowDefinitions.Add(new RowDefinition
    {
        //auto, star pixel로 사이즈 지정 가능 
        Height = GridLength.Auto,
        //Height = new GridLength(1, GridUnitType.Star),
        MinHeight = 15
    });

    GridSplitter splitter = new GridSplitter()
    {
        VerticalAlignment = VerticalAlignment.Top,
        HorizontalAlignment = HorizontalAlignment.Stretch,
        ResizeBehavior = GridResizeBehavior.PreviousAndNext,
        Background = new SolidColorBrush(Colors.LightPink),
        Height = 5
    };

    GridSplitter splitter2 = new GridSplitter()
    {
        VerticalAlignment = VerticalAlignment.Top,
        HorizontalAlignment = HorizontalAlignment.Stretch,
        ResizeBehavior = GridResizeBehavior.PreviousAndNext,
        Background = new SolidColorBrush(Colors.LightGray),
        Margin = new Thickness(0, -8, 0, 0),
        Height = 20
    };

    mainGrid.Children.Add(splitter);
    mainGrid.Children.Add(splitter2);

    Grid.SetRow(splitter, mainGrid.RowDefinitions.Count - 1);
    Grid.SetColumn(splitter, 0);

    Grid.SetRow(splitter2, mainGrid.RowDefinitions.Count - 1);
    Grid.SetColumn(splitter2, 1);


    mainGrid.RowDefinitions.Add(new RowDefinition
    {
        Height = new GridLength(1, GridUnitType.Star)
    });
}

사용한 xaml 코드

<ScrollViewer>
    <Grid x:Name="mainGrid" Background="Salmon" Height="1500">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" MinHeight="25"/>                
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="0*" MinWidth="30" />
            <ColumnDefinition Width="0*" MinWidth="30" />
        </Grid.ColumnDefinitions>
        <Button x:Name="addRow" Click="addRow_Click" Width="40" Panel.ZIndex="12" Height="50" VerticalAlignment="Top">추가</Button>        
    </Grid>
</ScrollViewer>

현재 grid의 height의 경우 고정된 값으로 주었기때문에 동적으로 재조절해서 사용하면 되겠다

실행 예시

msdn 참고

출처 : https://social.msdn.microsoft.com/Forums/vstudio/en-US/8f9ad61f-3af6-44ef-a1a7-e14c8c323852/how-to-programmatically-create-and-attach-a-gridsplitter-to-a-grid?forum=wpf