샘플 찾아보기
.NET 다중 플랫폼 앱 UI(.NET MAUI) Grid는 자식을 행과 열로 구성하는 레이아웃으로, 비례 또는 절대적인 크기를 설정할 수 있습니다. 기본적으로 하나의 Grid 행과 하나의 열이 포함됩니다. Grid는 또한 다른 자식 레이아웃을 포함하는 부모 레이아웃으로 사용할 수 있습니다.
Grid 테이블과 혼동해서는 안 되며 테이블 형식 데이터를 표시하기 위한 것이 아닙니다. HTML 테이블과 달리, Grid는 콘텐츠 레이아웃을 위한 것입니다. 테이블 형식 데이터를 표시하려면 ListView 또는 CollectionView를 사용하는 것이 좋습니다.
Grid 클래스는 다음 속성을 정의합니다.
-
Column- 부모int내에서 뷰의 열 맞춤을 나타내는 연결된 속성인 형식Grid입니다. 이 속성의 기본값은 0입니다. 유효성 검사 콜백은 속성이 설정되면 해당 값이 0보다 크거나 같은지 확인합니다. -
ColumnDefinitions,ColumnDefinitionCollection유형의ColumnDefinition개체 목록으로, 그리드 열의 너비를 정의합니다. - 형식
double의ColumnSpacing는 그리드 열 사이의 거리를 나타냅니다. 이 속성의 기본값은 0입니다. -
ColumnSpan,int형식의 속성으로, 이는 부모 Grid 내에서 뷰가 걸쳐 있는 열의 총 수를 나타내는 연결된 속성입니다. 이 속성의 기본값은 1입니다. 유효성 검사 콜백은 속성이 설정되면 해당 값이 1보다 크거나 같은지 확인합니다. -
Row는 부모int내에서 뷰의 행 맞춤을 나타내는 연결된 속성인 Grid 타입입니다. 이 속성의 기본값은 0입니다. 유효성 검사 콜백은 속성이 설정되면 해당 값이 0보다 크거나 같은지 확인합니다. -
RowDefinitions유형RowDefinitionCollection의 그리드 행의RowDefinition높이를 정의하는 개체 목록입니다. -
RowSpacing유형double은 눈금 행 간의 거리를 나타냅니다. 이 속성의 기본값은 0입니다. -
RowSpan는 부모 Grid 내에서 뷰가 걸치는 행의 총 수를 나타내는 연결된 속성인int유형입니다. 이 속성의 기본값은 1입니다. 유효성 검사 콜백은 속성이 설정되면 해당 값이 1보다 크거나 같은지 확인합니다.
이러한 속성은 개체에 의해 BindableProperty 지원됩니다. 즉, 속성이 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정될 수 있습니다.
행 및 열
기본적으로 하나의 Grid 행과 하나의 열이 포함됩니다.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridTutorial.MainPage">
<Grid Margin="20,35,20,20">
<Label Text="By default, a Grid contains one row and one column." />
</Grid>
</ContentPage>
이 예제에서는 Grid 단일 위치에 자동으로 배치되는 단일 자식 Label 이 포함됩니다.
Grid의 레이아웃 동작은 각각 RowDefinition 및 ColumnDefinition 객체의 컬렉션인 RowDefinitions 및 ColumnDefinitions 속성으로 정의할 수 있습니다. 이러한 컬렉션은 행과 열의 Grid특성을 정의하며, 각 행에 대해 하나의 RowDefinition 개체와 각 열 Grid에 대해 하나의 ColumnDefinition 개체를 Grid포함해야 합니다.
RowDefinition 클래스는 Height 속성을 정의하며, 형식은 GridLength입니다. 그리고 ColumnDefinition 클래스는 Width 속성을 정의하며, 형식은 GridLength입니다. 이 구조체는 GridLength 세 개의 멤버가 있는 열거형 측면에서 GridUnitType 행 높이 또는 열 너비를 지정합니다.
-
Absolute– 행 높이 또는 열 너비는 디바이스 독립적 단위의 값(XAML의 숫자)입니다. -
Auto– 행 높이 또는 열 너비는 셀 내용(AutoXAML)에 따라 자동으로 조정됩니다. -
Star– 남은 행 높이 또는 열 너비가 비례적으로 할당됩니다(XAML 뒤에 숫자*).
Grid 속성을 가진 Height 행은 Auto에서의 뷰 높이를 StackLayout와 같은 세로 제약으로 제한합니다. 마찬가지로 Width 속성이 있는 열은 Auto 가로 StackLayout와 매우 유사하게 작동합니다.
주의
행과 열이 가능한 한 Auto 크기로 설정되지 않도록 하십시오. 각 자동 크기 행 또는 열은 레이아웃 엔진이 추가 레이아웃 계산을 수행하도록 합니다. 대신 가능한 경우 고정 크기 행 및 열을 사용합니다. 또는 열과 GridUnitType.Star 행을 열거형 값을 사용하여 비례적으로 공간을 차지하도록 설정합니다.
다음 XAML에서는 행 3개와 열 2개를 사용하여 만드는 Grid 방법을 보여 줍니다.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.XAML.BasicGridPage"
Title="Basic Grid demo">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
...
</Grid>
</ContentPage>
이 예제에서는 Grid 페이지의 높이인 전체 높이를 가집니다. Grid은 세 번째 행의 높이가 100개의 디바이스 독립적 단위임을 알고 있습니다. 자체 높이에서 높이를 빼고 별 앞의 숫자를 기준으로 첫 번째 행과 두 번째 행 사이에 나머지 높이를 비례적으로 할당합니다. 이 예제에서 첫 번째 행의 높이는 두 번째 행의 두 배입니다.
두 ColumnDefinition 객체는 모두 Width를 *로 설정합니다. 이것은 1*와 동일하며, 이는 화면 너비가 두 열 아래에서 균등하게 나뉜다는 것을 의미합니다.
중요합니다
속성의 RowDefinition.Height 기본값은 .입니다 *. 마찬가지로 속성의 기본값은 ColumnDefinition.Width .입니다 *. 따라서 이러한 기본값이 허용되는 경우 이러한 속성을 설정할 필요가 없습니다.
자식 뷰는 특정 Grid 셀에 Grid.Column 및 Grid.Row 연결된 속성을 사용하여 배치할 수 있습니다. 또한 자식 뷰가 여러 행과 열에 걸쳐 있도록 하려면 Grid.RowSpan 및 Grid.ColumnSpan 부착 속성을 사용하십시오.
다음 XAML은 동일한 Grid 정의를 보여 줍니다. 또한 자식 뷰를 특정 Grid 셀에 배치합니다.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.XAML.BasicGridPage"
Title="Basic Grid demo">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Color="Green" />
<Label Text="Row 0, Column 0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Column="1"
Color="Blue" />
<Label Grid.Column="1"
Text="Row 0, Column 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Color="Teal" />
<Label Grid.Row="1"
Text="Row 1, Column 0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="1"
Color="Purple" />
<Label Grid.Row="1"
Grid.Column="1"
Text="Row1, Column 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Grid.ColumnSpan="2"
Color="Red" />
<Label Grid.Row="2"
Grid.ColumnSpan="2"
Text="Row 2, Columns 0 and 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</ContentPage>
메모
Grid.Row 및 Grid.Column 속성은 모두 0에서 인덱싱되므로 Grid.Row="2"는 세 번째 행을 참조하고 Grid.Column="1"는 두 번째 열을 참조합니다. 또한 이러한 두 속성의 기본값은 0이므로 첫 번째 행 또는 첫 번째 열을 Grid차지하는 자식 뷰에서 설정할 필요가 없습니다.
이 예제에서는 세 Grid 행이 모두 BoxView 및 Label 뷰로 점유됩니다. 세 번째 행은 디바이스 독립적 단위가 100개이고, 처음 두 행은 나머지 공간을 차지합니다(첫 번째 행은 두 번째 행보다 두 배 높음). 두 열은 너비가 같으며 Grid를 반으로 나눕니다. 세 번째 행의 BoxView는 두 열에 걸쳐 있습니다.
또한 Grid에 있는 자식 뷰는 셀을 공유할 수 있습니다. XAML에 자식이 표시되는 순서는 Grid에 자식이 배치되는 순서입니다. 이전 예제에서, Label 개체들이 BoxView 개체 위에 렌더링되었기 때문에 보이는 것입니다. BoxView 개체가 위에 렌더링된다면 Label 개체는 보이지 않을 것입니다.
해당하는 C# 코드는 다음과 같습니다.
public class BasicGridPage : ContentPage
{
public BasicGridPage()
{
Grid grid = new Grid
{
RowDefinitions =
{
new RowDefinition { Height = new GridLength(2, GridUnitType.Star) },
new RowDefinition(),
new RowDefinition { Height = new GridLength(100) }
},
ColumnDefinitions =
{
new ColumnDefinition(),
new ColumnDefinition()
}
};
// Row 0
// The BoxView and Label are in row 0 and column 0, and so only need to be added to the
// Grid to obtain the default row and column settings.
grid.Add(new BoxView
{
Color = Colors.Green
});
grid.Add(new Label
{
Text = "Row 0, Column 0",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
});
// This BoxView and Label are in row 0 and column 1, which are specified as arguments
// to the Add method.
grid.Add(new BoxView
{
Color = Colors.Blue
}, 1, 0);
grid.Add(new Label
{
Text = "Row 0, Column 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 0);
// Row 1
// This BoxView and Label are in row 1 and column 0, which are specified as arguments
// to the Add method overload.
grid.Add(new BoxView
{
Color = Colors.Teal
}, 0, 1);
grid.Add(new Label
{
Text = "Row 1, Column 0",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 0, 1);
// This BoxView and Label are in row 1 and column 1, which are specified as arguments
// to the Add method overload.
grid.Add(new BoxView
{
Color = Colors.Purple
}, 1, 1);
grid.Add(new Label
{
Text = "Row1, Column 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 1);
// Row 2
// Alternatively, the BoxView and Label can be positioned in cells with the Grid.SetRow
// and Grid.SetColumn methods. Here, the Grid.SetColumnSpan method is used to span two columns.
BoxView boxView = new BoxView { Color = Colors.Red };
Grid.SetRow(boxView, 2);
Grid.SetColumnSpan(boxView, 2);
Label label = new Label
{
Text = "Row 2, Column 0 and 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
Grid.SetRow(label, 2);
Grid.SetColumnSpan(label, 2);
grid.Add(boxView);
grid.Add(label);
Title = "Basic Grid demo";
Content = grid;
}
}
코드에서 개체의 RowDefinition 높이와 ColumnDefinition 너비를 지정하려면, 구조체의 GridLength 값을 GridUnitType 열거형과 함께 사용합니다.
메모
Grid에는 또한 지정된 행 및 열 범위를 사용하여 지정된 행 및 열에 뷰를 AddWithSpan에 추가하는 확장 메서드를 Grid 정의합니다.
행 및 열 정의 간소화
XAML에서는 각 행과 열에 대해 RowDefinition 및 ColumnDefinition 개체를 정의할 필요를 피하기 위해 간소화된 구문을 사용하여 Grid의 행 및 열 특성을 지정할 수 있습니다. 대신 RowDefinitions 및 ColumnDefinitions 속성은 .NET MAUI에 내장된 형식 변환기가 RowDefinition 및 ColumnDefinition 객체를 생성할 수 있도록 쉼표로 구분된 GridUnitType 값을 포함하는 문자열로 설정할 수 있습니다.
<Grid RowDefinitions="1*, Auto, 25, 14, 20"
ColumnDefinitions="*, 2*, Auto, 300">
...
</Grid>
이 예제에서는 Grid 5개의 행과 4개의 열이 있습니다. 세 번째, 앞, 다섯 번째 행은 절대 높이로 설정되며 두 번째 행은 콘텐츠에 맞게 자동 크기 조정됩니다. 그러면 나머지 높이가 첫 번째 행에 할당됩니다.
다음 열은 절대 너비로 설정되며 세 번째 열은 내용에 맞게 자동 크기 조정됩니다. 나머지 너비는 별 앞의 숫자에 따라 첫 번째 열과 두 번째 열 사이에 비례적으로 할당됩니다. 이 예제에서 두 번째 열의 너비는 첫 번째 열의 두 배입니다(*가 1*와 동일하기 때문입니다).
행과 열 사이의 공백
기본적으로 Grid 행과 열 사이에 공백이 없습니다.
RowSpacing 및 ColumnSpacing 속성을 각각 설정하여 변경할 수 있습니다.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.XAML.GridSpacingPage"
Title="Grid spacing demo">
<Grid RowSpacing="6"
ColumnSpacing="6">
...
</Grid>
</ContentPage>
이 예제에서는 행과 열이 6개의 디바이스 독립적 공간 단위로 구분된 Grid를 만듭니다.
팁 (조언)
RowSpacing 및 ColumnSpacing 속성을 음수 값으로 설정하여 셀 내용이 겹치도록 할 수 있습니다.
해당하는 C# 코드는 다음과 같습니다.
public class GridSpacingPage : ContentPage
{
public GridSpacingPage()
{
Grid grid = new Grid
{
RowSpacing = 6,
ColumnSpacing = 6,
...
};
...
Content = grid;
}
}
정렬
Grid의 자식 뷰는 HorizontalOptions 및 VerticalOptions 속성을 사용하여 해당 셀 내에 배치할 수 있습니다. 이러한 속성은 구조체에서 다음 필드로 LayoutOptions 설정할 수 있습니다.
StartCenterEndFill
다음 XAML은 같은 크기의 9개의 셀을 만들고 각 셀에 서로 다른 맞춤으로 Label을 배치합니다.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.XAML.GridAlignmentPage"
Title="Grid alignment demo">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Color="AliceBlue" />
<Label Text="Upper left"
HorizontalOptions="Start"
VerticalOptions="Start" />
<BoxView Grid.Column="1"
Color="LightSkyBlue" />
<Label Grid.Column="1"
Text="Upper center"
HorizontalOptions="Center"
VerticalOptions="Start"/>
<BoxView Grid.Column="2"
Color="CadetBlue" />
<Label Grid.Column="2"
Text="Upper right"
HorizontalOptions="End"
VerticalOptions="Start" />
<BoxView Grid.Row="1"
Color="CornflowerBlue" />
<Label Grid.Row="1"
Text="Center left"
HorizontalOptions="Start"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="1"
Color="DodgerBlue" />
<Label Grid.Row="1"
Grid.Column="1"
Text="Center center"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="2"
Color="DarkSlateBlue" />
<Label Grid.Row="1"
Grid.Column="2"
Text="Center right"
HorizontalOptions="End"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Color="SteelBlue" />
<Label Grid.Row="2"
Text="Lower left"
HorizontalOptions="Start"
VerticalOptions="End" />
<BoxView Grid.Row="2"
Grid.Column="1"
Color="LightBlue" />
<Label Grid.Row="2"
Grid.Column="1"
Text="Lower center"
HorizontalOptions="Center"
VerticalOptions="End" />
<BoxView Grid.Row="2"
Grid.Column="2"
Color="BlueViolet" />
<Label Grid.Row="2"
Grid.Column="2"
Text="Lower right"
HorizontalOptions="End"
VerticalOptions="End" />
</Grid>
</ContentPage>
이 예제에서는 각 행의 Label 개체가 모두 동일하게 세로로 정렬되지만 다른 가로 맞춤을 사용합니다. 또는 각 열의 Label 개체가 가로로 동일하게 정렬되고, 다른 세로 정렬을 사용하는 것으로 생각할 수 있습니다.
해당하는 C# 코드는 다음과 같습니다.
public class GridAlignmentPage : ContentPage
{
public GridAlignmentPage()
{
Grid grid = new Grid
{
RowDefinitions =
{
new RowDefinition(),
new RowDefinition(),
new RowDefinition()
},
ColumnDefinitions =
{
new ColumnDefinition(),
new ColumnDefinition(),
new ColumnDefinition()
}
};
// Row 0
grid.Add(new BoxView
{
Color = Colors.AliceBlue
});
grid.Add(new Label
{
Text = "Upper left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Start
});
grid.Add(new BoxView
{
Color = Colors.LightSkyBlue
}, 1, 0);
grid.Add(new Label
{
Text = "Upper center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Start
}, 1, 0);
grid.Add(new BoxView
{
Color = Colors.CadetBlue
}, 2, 0);
grid.Add(new Label
{
Text = "Upper right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Start
}, 2, 0);
// Row 1
grid.Add(new BoxView
{
Color = Colors.CornflowerBlue
}, 0, 1);
grid.Add(new Label
{
Text = "Center left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Center
}, 0, 1);
grid.Add(new BoxView
{
Color = Colors.DodgerBlue
}, 1, 1);
grid.Add(new Label
{
Text = "Center center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 1);
grid.Add(new BoxView
{
Color = Colors.DarkSlateBlue
}, 2, 1);
grid.Add(new Label
{
Text = "Center right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center
}, 2, 1);
// Row 2
grid.Add(new BoxView
{
Color = Colors.SteelBlue
}, 0, 2);
grid.Add(new Label
{
Text = "Lower left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.End
}, 0, 2);
grid.Add(new BoxView
{
Color = Colors.LightBlue
}, 1, 2);
grid.Add(new Label
{
Text = "Lower center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.End
}, 1, 2);
grid.Add(new BoxView
{
Color = Colors.BlueViolet
}, 2, 2);
grid.Add(new Label
{
Text = "Lower right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.End
}, 2, 2);
Title = "Grid alignment demo";
Content = grid;
}
}
중첩된 Grid 개체
A Grid는 Grid 중첩된 자식 개체나 다른 자식 레이아웃을 포함하는 부모 레이아웃으로 사용할 수 있습니다.
Grid 개체를 중첩할 때, Grid.Row, Grid.Column, Grid.RowSpan, 그리고 Grid.ColumnSpan 연결된 속성은 항상 부모 Grid 내에서 뷰의 위치를 참조합니다.
다음 XAML은 중첩 Grid 개체의 예를 보여줍니다.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:GridDemos.Converters"
x:Class="GridDemos.Views.XAML.ColorSlidersGridPage"
Title="Nested Grids demo">
<ContentPage.Resources>
<converters:DoubleToIntConverter x:Key="doubleToInt" />
<Style TargetType="Label">
<Setter Property="HorizontalTextAlignment"
Value="Center" />
</Style>
</ContentPage.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="500" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView x:Name="boxView"
Color="Black" />
<Grid Grid.Row="1"
Margin="20">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Slider x:Name="redSlider"
ValueChanged="OnSliderValueChanged" />
<Label x:DataType="Slider"
Grid.Row="1"
Text="{Binding Source={x:Reference redSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Red = {0}'}" />
<Slider x:Name="greenSlider"
Grid.Row="2"
ValueChanged="OnSliderValueChanged" />
<Label x:DataType="Slider"
Grid.Row="3"
Text="{Binding Source={x:Reference greenSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Green = {0}'}" />
<Slider x:Name="blueSlider"
Grid.Row="4"
ValueChanged="OnSliderValueChanged" />
<Label x:DataType="Slider"
Grid.Row="5"
Text="{Binding Source={x:Reference blueSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Blue = {0}'}" />
</Grid>
</Grid>
</ContentPage>
이 예제에서 루트 Grid 는 BoxView 첫 번째 행에, 두 번째 행에는 자식 Grid 이 포함됩니다. 자식 Grid에는 BoxView에 의해 표시되는 색상을 조작하는 Slider 개체와 각 Slider의 값을 표시하는 Label 개체가 포함됩니다.
중요합니다
개체 및 기타 레이아웃을 중첩 Grid 할수록 성능에 영향을 줄 수 있는 더 많은 레이아웃 계산이 수행됩니다. 자세한 내용은 올바른 레이아웃 선택을 참조하세요.
해당하는 C# 코드는 다음과 같습니다.
public class ColorSlidersGridPage : ContentPage
{
BoxView boxView;
Slider redSlider;
Slider greenSlider;
Slider blueSlider;
public ColorSlidersGridPage()
{
// Create an implicit style for the Labels
Style labelStyle = new Style(typeof(Label))
{
Setters =
{
new Setter { Property = Label.HorizontalTextAlignmentProperty, Value = TextAlignment.Center }
}
};
Resources.Add(labelStyle);
// Root page layout
Grid rootGrid = new Grid
{
RowDefinitions =
{
new RowDefinition { HeightRequest = 500 },
new RowDefinition()
}
};
boxView = new BoxView { Color = Colors.Black };
rootGrid.Add(boxView);
// Child page layout
Grid childGrid = new Grid
{
Margin = new Thickness(20),
RowDefinitions =
{
new RowDefinition(),
new RowDefinition(),
new RowDefinition(),
new RowDefinition(),
new RowDefinition(),
new RowDefinition()
}
};
DoubleToIntConverter doubleToInt = new DoubleToIntConverter();
redSlider = new Slider();
redSlider.ValueChanged += OnSliderValueChanged;
childGrid.Add(redSlider);
Label redLabel = new Label();
redLabel.SetBinding(Label.TextProperty, Binding.Create(static (Slider slider) => slider.Value, converter: doubleToInt, converterParameter: "255", stringFormat: "Red = {0}", source: redSlider));
Grid.SetRow(redLabel, 1);
childGrid.Add(redLabel);
greenSlider = new Slider();
greenSlider.ValueChanged += OnSliderValueChanged;
Grid.SetRow(greenSlider, 2);
childGrid.Add(greenSlider);
Label greenLabel = new Label();
greenLabel.SetBinding(Label.TextProperty, Binding.Create(static (Slider slider) => slider.Value, converter: doubleToInt, converterParameter: "255", stringFormat: "Green = {0}", source: greenSlider));
Grid.SetRow(greenLabel, 3);
childGrid.Add(greenLabel);
blueSlider = new Slider();
blueSlider.ValueChanged += OnSliderValueChanged;
Grid.SetRow(blueSlider, 4);
childGrid.Add(blueSlider);
Label blueLabel = new Label();
blueLabel.SetBinding(Label.TextProperty, Binding.Create(static (Slider slider) => slider.Value, converter: doubleToInt, converterParameter: "255", stringFormat: "Blue = {0}", source: blueSlider));
Grid.SetRow(blueLabel, 5);
childGrid.Add(blueLabel);
// Place the child Grid in the root Grid
rootGrid.Add(childGrid, 0, 1);
Title = "Nested Grids demo";
Content = rootGrid;
}
void OnSliderValueChanged(object sender, ValueChangedEventArgs e)
{
boxView.Color = new Color(redSlider.Value, greenSlider.Value, blueSlider.Value);
}
}
GitHub에서 Microsoft와 공동 작업
이 콘텐츠의 원본은 GitHub에서 찾을 수 있으며, 여기서 문제와 끌어오기 요청을 만들고 검토할 수도 있습니다. 자세한 내용은 참여자 가이드를 참조하세요.
.NET MAUI