Xamarin.Forms Rejilla
Descarga del ejemplo Xamarin.Forms= Grid" data-linktype="relative-path">
Xamarin.Forms Grid" title=" Xamarin.Forms Grid" data-linktype="relative-path"/>
es Grid un diseño que organiza sus secundarios en filas y columnas, que pueden tener tamaños proporcionales o absolutos. De forma predeterminada, las vistas Grid contienen una fila y una columna. Además, se Grid puede usar como un diseño primario que contiene otros diseños secundarios.
El Grid diseño no debe confundirse con las tablas y no está diseñado para presentar datos tabulares. A diferencia de las tablas HTML, Grid un objeto está pensado para la colocación de contenido. Para mostrar datos tabulares, considere la posibilidad de usar listView,CollectionViewo TableView.
La clase Grid define las propiedades siguientes:
Column, de tipoint, que es una propiedad adjunta que indica la alineación de columna de una vista dentro de un elementoGridprimario. El valor predeterminado de esta propiedad es 0. Una devolución de llamada de validación garantiza que, cuando se establece la propiedad, su valor es mayor o igual que 0.- _Grid_ColumnDefinitions" data-linktype="absolute-path">, de tipo , es una lista de objetos que definen el ancho de las columnas
ColumnDefinitionsColumnDefinitionCollectionColumnDefinitionde cuadrícula. - Xamarin_Forms _Grid_ColumnSpacing" data-linktype="absolute-path">, de tipo , indica la distancia entre
ColumnSpacingcolumnas dedoublecuadrícula. El valor predeterminado de esta propiedad es 6 unidades independientes del dispositivo. ColumnSpan, de tipo , que es una propiedad adjunta que indica el número total de columnas queintuna vista abarca dentro de un elementoGridprimario. El valor predeterminado de esta propiedad es 1. Una devolución de llamada de validación garantiza que, cuando se establece la propiedad, su valor es mayor o igual que 1.Row, de tipo , que es una propiedad adjunta que indica la alineaciónintde fila de una vista dentro de un elementoGridprimario. El valor predeterminado de esta propiedad es 0. Una devolución de llamada de validación garantiza que, cuando se establece la propiedad, su valor es mayor o igual que 0.- Xamarin_Forms _Grid_RowDefinitions" data-linktype="absolute-path">, de tipo , es una lista de objetos que definen el alto de las filas de
RowDefinitionsRowDefinitionCollectionRowDefintioncuadrícula. - Xamarin_Forms _Grid_RowSpacing" data-linktype="absolute-path">, de tipo , indica la distancia
RowSpacingentre las filas dedoublecuadrícula. El valor predeterminado de esta propiedad es 6 unidades independientes del dispositivo. RowSpan, de tipo , que es una propiedad adjunta que indica el número total de filas que abarca una vistaintdentro de un elementoGridprimario. El valor predeterminado de esta propiedad es 1. Una devolución de llamada de validación garantiza que, cuando se establece la propiedad, su valor es mayor o igual que 1.
Estas propiedades están copiadas por objetos , lo que significa que las propiedades pueden ser destinos de enlaces BindableProperty de datos y con estilo.
La Grid clase se deriva de la clase , que define una propiedad de tipo Layout<T>ChildrenIList<T> . La propiedad es de la clase y, por tanto, no es necesario establecer ChildrenContentPropertyLayout<T> explícitamente desde XAML.
Sugerencia
Para obtener el mejor rendimiento de diseño posible, siga las instrucciones de Optimización del rendimiento del diseño.
Filas y columnas
De forma predeterminada, Grid contiene una fila y una columna:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
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>
En este ejemplo, contiene un único elemento secundario Grid que se coloca automáticamente en una sola Label ubicación:
pantalla de un diseño de cuadrícula
Diseño de
El comportamiento de diseño de se puede definir con las propiedades Grid _Grid_RowDefinitions Xamarin_Forms Grid data-linktype="absolute-path">y RowDefinitions Xamarin_Forms _Grid_ColumnDefinitions" data-linktype="absolute-path">, ColumnDefinitionsRowDefinitionColumnDefinition que son colecciones de objetos y , respectivamente. Estas colecciones definen las características de fila y columna de y deben contener un objeto para cada fila de y un objeto Grid para cada columna de RowDefinitionGridColumnDefinitionGrid .
La clase define una propiedad Xamarin_Forms _RowDefinition_Height" data-linktype="absolute-path">, de tipo , y la clase define una propiedad RowDefinitionRowDefinitionHeight Xamarin_Forms GridLengthColumnDefinition _ColumnDefinition_Width" data-linktype="absolute-path">, Width de tipo GridLength . La estructura especifica un alto de fila o un ancho de columna en GridLength términos de enumeración, GridUnitType que tiene tres miembros:
Absolute: el alto de fila o el ancho de columna es un valor en unidades independientes del dispositivo (un número en XAML).Auto: el alto de fila o el ancho de columna se autoequiruta en función del contenido de la celda (Autoen XAML).Star: el alto de fila o el ancho de columna que quedan se asignan proporcionalmente (un número seguido de*en XAML).
Una fila con una propiedad de restringe el alto de las vistas de esa fila de Grid la misma manera que un HeightAutoStackLayout vertical. De forma similar, una columna con Width una propiedad de funciona de forma muy similar a una AutoStackLayout horizontal.
Precaución
Intente asegurarse de que el menor número de filas y columnas posibles estén establecidos en Xamarin_Forms _GridLength_Auto" data-linktype="absolute-path">Auto size. Cada fila o columna de tamaño automático hará que el motor de diseño tenga que realizar cálculos de diseño adicionales. En su lugar, use filas y columnas de tamaño fijo si es posible. Como alternativa, establezca filas y columnas para ocupar una cantidad proporcional de espacio con el valor de enumeración Xamarin_Forms _GridUnitType_Star" data-linktype="absolute-path">GridUnitType.Star enumeración.
El código XAML siguiente muestra cómo crear un con Grid tres filas y dos columnas:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.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>
En este ejemplo, Grid tiene un alto general que es el alto de la página. sabe Grid que el alto de la tercera fila es de 100 unidades independientes del dispositivo. Resta ese alto de su propio alto y asigna el alto restante proporcionalmente entre la primera y la segunda fila según el número anterior a la estrella. En este ejemplo, el alto de la primera fila es el doble que el de la segunda fila.
Los dos objetos establecen el valor de ColumnDefinition Xamarin_Forms ColumnDefinition _ColumnDefinition_Width" data-linktype="absolute-path">en , que es el mismo que , lo que significa que el ancho de la pantalla se divide equitativamente debajo de las Width dos *1* columnas.
Importante
El valor predeterminado de la Xamarin_Forms _RowDefinition_Height" data-linktype="absolute-path">RowDefinition.Height propiedad es * . De forma similar, el valor predeterminado de la Xamarin_Forms _ColumnDefinition_Width" data-linktype="absolute-path">ColumnDefinition.Width propiedad es * . Por lo tanto, no es necesario establecer estas propiedades en casos en los que estos valores predeterminados sean aceptables.
Las vistas secundarias se pueden colocar en celdas Grid específicas con las propiedades Grid.ColumnGrid.Row adjuntas y . Además, para que las vistas secundarias se abarquen en varias filas y columnas, use las Grid.RowSpan propiedades Grid.ColumnSpan adjuntas y .
El código XAML siguiente muestra la misma Grid definición y también coloca las vistas secundarias en celdas Grid específicas:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.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>
Nota:
Las Grid.Row propiedades y se indexa a partir de 0, por lo que hace referencia a la tercera fila, mientras Grid.Column que hace referencia a la segunda Grid.Row="2"Grid.Column="1" columna. Además, ambas propiedades tienen un valor predeterminado de 0, por lo que no es necesario establecer en vistas secundarias que ocupan la primera fila o la primera columna de Grid un .
En este ejemplo, las tres Grid filas están ocupadas por las BoxView vistas y Label . La tercera fila tiene 100 unidades independientes del dispositivo de alto, y las dos primeras filas ocupan el espacio restante (la primera fila es el doble de alta que la segunda fila). Las dos columnas tienen el mismo ancho y dividen Grid en la mitad. El BoxView de la tercera fila abarca ambas columnas.
Basic básico de cuadrícula) Captura de pantalla de un diseño básico de cuadrícula
Además, las vistas secundarias de un pueden Grid compartir celdas. El orden en que los elementos secundarios aparecen en xaml es el orden en que los elementos secundarios se colocan en Grid . En el ejemplo anterior, los Label objetos solo son visibles porque se representan sobre los BoxView objetos . Los Label objetos no serían visibles si BoxView los objetos se representaran encima de ellos.
El código de C# equivalente es el siguiente:
public class BasicGridPageCS : ContentPage
{
public BasicGridPageCS()
{
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 needs to be added to the
// Grid.Children collection to get default row and column settings.
grid.Children.Add(new BoxView
{
Color = Color.Green
});
grid.Children.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.Children.Add(new BoxView
{
Color = Color.Blue
}, 1, 0);
grid.Children.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.Children.Add(new BoxView
{
Color = Color.Teal
}, 0, 1, 1, 2);
grid.Children.Add(new Label
{
Text = "Row 1, Column 0",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 0, 1, 1, 2); // These arguments indicate that that the child element goes in the column starting at 0 but ending before 1.
// They also indicate that the child element goes in the row starting at 1 but ending before 2.
grid.Children.Add(new BoxView
{
Color = Color.Purple
}, 1, 2, 1, 2);
grid.Children.Add(new Label
{
Text = "Row1, Column 1",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 2, 1, 2);
// Row 2
// Alternatively, the BoxView and Label can be positioned in cells with the Grid.SetRow
// and Grid.SetColumn methods.
BoxView boxView = new BoxView { Color = Color.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.Children.Add(boxView);
grid.Children.Add(label);
Title = "Basic Grid demo";
Content = grid;
}
}
En el código, para especificar el alto de un objeto y el ancho de un objeto, se usan valores de la estructura , a menudo en combinación RowDefinitionColumnDefinition con la GridLengthGridUnitType enumeración .
El código de ejemplo anterior también muestra varios enfoques diferentes para agregar elementos secundarios a y especificar las celdas en las Grid que residen. Cuando se usa la sobrecarga que especifica los argumentos izquierdo, derecho, superior e inferior, mientras que los argumentos izquierdo y superior siempre hacen referencia a las celdas dentro de , los argumentos derecho e inferior parecen hacer referencia a AddAdd celdas que están fuera de . Esto se debe a que el argumento derecho siempre debe ser mayor que el argumento izquierdo y el argumento inferior siempre debe ser mayor que el argumento superior. En el ejemplo siguiente, en el que se da por supuesto un 2x2, se muestra Grid código equivalente mediante ambas Add sobrecargas:
// left, top
grid.Children.Add(topLeft, 0, 0); // first column, first row
grid.Children.Add(topRight, 1, 0); // second column, first tow
grid.Children.Add(bottomLeft, 0, 1); // first column, second row
grid.Children.Add(bottomRight, 1, 1); // second column, second row
// left, right, top, bottom
grid.Children.Add(topLeft, 0, 1, 0, 1); // first column, first row
grid.Children.Add(topRight, 1, 2, 0, 1); // second column, first tow
grid.Children.Add(bottomLeft, 0, 1, 1, 2); // first column, second row
grid.Children.Add(bottomRight, 1, 2, 1, 2); // second column, second row
Nota:
Además, las vistas secundarias se pueden agregar a con los métodos y , que agregan elementos secundarios a una sola fila GridAddHorizontal o columna AddVerticalGrid única. A continuación, se expande en filas o columnas a medida que se realizan estas llamadas, así como colocar automáticamente los secundarios Grid en las celdas correctas.
Simplificación de las definiciones de filas y columnas
En XAML, las características de fila y columna de se pueden especificar mediante una sintaxis simplificada que evita tener que definir objetos y Grid para cada fila y RowDefinitionColumnDefinition columna. En su lugar, las propiedades data-linktype="absolute-path">y RowDefinitionsRowDefinitions Xamarin_Forms _Grid_ColumnDefinitions" data-linktype="absolute-path">ColumnDefinitionsGridUnitTypeXamarin.FormsRowDefinitionColumnDefinition de Xamarin_Forms _Grid_RowDefinitions" se pueden establecer en cadenas que contienen valores delimitados por comas, a partir de los cuales los convertidores de tipos integrados en los objetos create y :
<Grid RowDefinitions="1*, Auto, 25, 14, 20"
ColumnDefinitions="*, 2*, Auto, 300">
...
</Grid>
En este ejemplo, tiene Grid cinco filas y cuatro columnas. La tercera, la cuarta y la quinta fila se establecen en alturas absolutas, con el ajuste de tamaño automático de la segunda fila a su contenido. A continuación, el alto restante se asigna a la primera fila.
La columna forth se establece en un ancho absoluto, con el ajuste de tamaño automático de la tercera columna a su contenido. El ancho restante se asigna proporcionalmente entre la primera y la segunda columna según el número anterior a la estrella. En este ejemplo, el ancho de la segunda columna es el doble que el de la primera columna (porque * es idéntico a 1* ).
Espacio entre filas y columnas
De forma predeterminada, Grid las filas están separadas por 6 unidades de espacio independientes del dispositivo. De forma similar, Grid las columnas están separadas por 6 unidades de espacio independientes del dispositivo. Estos valores predeterminados se pueden cambiar estableciendo las propiedades Xamarin_Forms _Grid_RowSpacing" data-linktype="absolute-path">y RowSpacing Xamarin_Forms RowSpacing _Grid_ColumnSpacing" data-linktype="absolute-path">, ColumnSpacing respectivamente:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.GridSpacingPage"
Title="Grid spacing demo">
<Grid RowSpacing="0"
ColumnSpacing="0">
..
</Grid>
</ContentPage>
En este ejemplo se crea Grid un que no tiene espaciado entre sus filas y columnas:
de pantalla de Cuadrícula sin espaciado entre celdas
Sugerencia
Las propiedades Xamarin_Forms _Grid_RowSpacing" data-linktype="absolute-path">and RowSpacing Xamarin_Forms RowSpacing _Grid_ColumnSpacing" data-linktype="absolute-path">ColumnSpacing se pueden establecer en valores negativos para que el contenido de la celda se superponga.
El código de C# equivalente es el siguiente:
public GridSpacingPageCS()
{
Grid grid = new Grid
{
RowSpacing = 0,
ColumnSpacing = 0,
// ...
};
// ...
Content = grid;
}
Alineación
Las vistas secundarias de pueden colocarse dentro de sus celdas mediante las propiedades GridGridHorizontalOptions data-linktype="absolute-path">y Xamarin_Forms _View_VerticalOptions" data-linktype="absolute-path">" de Xamarin_Forms _View_HorizontalOptions" data-linktype="absolute-path". VerticalOptions Estas propiedades se pueden establecer en los siguientes campos de LayoutOptions la estructura :
Importante
Los AndExpands campos de la estructura solo son LayoutOptions aplicables a los objetos StackLayout .
El código XAML siguiente crea un objeto con nueve celdas del mismo tamaño y coloca un elemento Grid en cada celda con una Label alineación diferente:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GridDemos.Views.GridAlignmentPage"
Title="Grid alignment demo">
<Grid RowSpacing="0"
ColumnSpacing="0">
<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>
En este ejemplo, los objetos de cada fila se alinean de forma Label idéntica vertical, pero usan alineaciones horizontales diferentes. Como alternativa, esto se puede pensar como si los objetos de cada columna se alineasen de forma idéntica horizontal, pero con Label alineaciones verticales diferentes:
El código de C# equivalente es el siguiente:
public class GridAlignmentPageCS : ContentPage
{
public GridAlignmentPageCS()
{
Grid grid = new Grid
{
RowSpacing = 0,
ColumnSpacing = 0,
RowDefinitions =
{
new RowDefinition(),
new RowDefinition(),
new RowDefinition()
},
ColumnDefinitions =
{
new ColumnDefinition(),
new ColumnDefinition(),
new ColumnDefinition()
}
};
// Row 0
grid.Children.Add(new BoxView
{
Color = Color.AliceBlue
});
grid.Children.Add(new Label
{
Text = "Upper left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Start
});
grid.Children.Add(new BoxView
{
Color = Color.LightSkyBlue
}, 1, 0);
grid.Children.Add(new Label
{
Text = "Upper center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Start
}, 1, 0);
grid.Children.Add(new BoxView
{
Color = Color.CadetBlue
}, 2, 0);
grid.Children.Add(new Label
{
Text = "Upper right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Start
}, 2, 0);
// Row 1
grid.Children.Add(new BoxView
{
Color = Color.CornflowerBlue
}, 0, 1);
grid.Children.Add(new Label
{
Text = "Center left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Center
}, 0, 1);
grid.Children.Add(new BoxView
{
Color = Color.DodgerBlue
}, 1, 1);
grid.Children.Add(new Label
{
Text = "Center center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}, 1, 1);
grid.Children.Add(new BoxView
{
Color = Color.DarkSlateBlue
}, 2, 1);
grid.Children.Add(new Label
{
Text = "Center right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center
}, 2, 1);
// Row 2
grid.Children.Add(new BoxView
{
Color = Color.SteelBlue
}, 0, 2);
grid.Children.Add(new Label
{
Text = "Lower left",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.End
}, 0, 2);
grid.Children.Add(new BoxView
{
Color = Color.LightBlue
}, 1, 2);
grid.Children.Add(new Label
{
Text = "Lower center",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.End
}, 1, 2);
grid.Children.Add(new BoxView
{
Color = Color.BlueViolet
}, 2, 2);
grid.Children.Add(new Label
{
Text = "Lower right",
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.End
}, 2, 2);
Title = "Grid alignment demo";
Content = grid;
}
}
Objetos grid anidados
Se Grid puede usar como un diseño primario que contiene objetos secundarios Grid anidados u otros diseños secundarios. Al anidar objetos, las propiedades adjuntas , , y siempre hacen referencia a Grid la posición de las vistas dentro de su elemento Grid.RowGrid.ColumnGrid.RowSpanGrid.ColumnSpanGrid primario.
El código XAML siguiente muestra un ejemplo de anidamiento de Grid objetos:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:GridDemos.Converters"
x:Class="GridDemos.Views.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 />
<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 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 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 Grid.Row="5"
Text="{Binding Source={x:Reference blueSlider},
Path=Value,
Converter={StaticResource doubleToInt},
ConverterParameter=255,
StringFormat='Blue = {0}'}" />
</Grid>
</Grid>
</ContentPage>
En este ejemplo, el diseño raíz contiene un elemento en su primera fila y un Grid elemento secundario en su segunda BoxViewGrid fila. El elemento secundario contiene objetos que manipulan el Grid color mostrado por y objetos que muestran el valor de cada SliderBoxViewLabelSlider :
Importante
Cuanto más se Grid anidan objetos y otros diseños, más impacto tendrán los diseños anidados en el rendimiento. Para obtener más información, vea Elegir el diseño correcto.
El código de C# equivalente es el siguiente:
public class ColorSlidersGridPageCS : ContentPage
{
BoxView boxView;
Slider redSlider;
Slider greenSlider;
Slider blueSlider;
public ColorSlidersGridPageCS()
{
// 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(),
new RowDefinition()
}
};
boxView = new BoxView { Color = Color.Black };
rootGrid.Children.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.Children.Add(redSlider);
Label redLabel = new Label();
redLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Red = {0}", source: redSlider));
Grid.SetRow(redLabel, 1);
childGrid.Children.Add(redLabel);
greenSlider = new Slider();
greenSlider.ValueChanged += OnSliderValueChanged;
Grid.SetRow(greenSlider, 2);
childGrid.Children.Add(greenSlider);
Label greenLabel = new Label();
greenLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Green = {0}", source: greenSlider));
Grid.SetRow(greenLabel, 3);
childGrid.Children.Add(greenLabel);
blueSlider = new Slider();
blueSlider.ValueChanged += OnSliderValueChanged;
Grid.SetRow(blueSlider, 4);
childGrid.Children.Add(blueSlider);
Label blueLabel = new Label();
blueLabel.SetBinding(Label.TextProperty, new Binding("Value", converter: doubleToInt, converterParameter: "255", stringFormat: "Blue = {0}", source: blueSlider));
Grid.SetRow(blueLabel, 5);
childGrid.Children.Add(blueLabel);
// Place the child Grid in the root Grid
rootGrid.Children.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);
}
}