hi all,
i am trying to create a control that will allow a grid to be created dynamically depending on the number of rows and columns (number of columns will change per row) defied in a data store.
using a single grid and trying to span rows is proving difficult so i have decided to create a grid, each row in the parent grid will have a new grid with a single row and multiple columns.
CODE
public class SegmentedButtonGroup : Grid
{
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
ReCreateGridLayout();
}
private void OnItemSourceChanged(object sender, NotifyCollectionChangedEventArgs e)
{
ReCreateGridLayout();
}
private int ColumnCountRequired = 5;
private int RowCountRequired = 5;
private void ReCreateGridLayout()
{
// loop through each row that is required on the grid
for (int currentRow = 0; currentRow < RowCountRequired ; currentRow++)
{
// create a new grid
var newGrid = new Grid();
newGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
// loop through each column that is required in the current row
for (int currentColumn = 0; currentColumn < ColumnCountRequired; currentColumn++)
{
newGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
// create a label
var label = new Label
{
Text = string.Format("{0}:{1}", currentRow, currentColumn),
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center
};
// create a frame and add the label to it
var frame = new Frame
{
BackgroundColor = Color.Transparent,
OutlineColor = Color.Blue,
Content = label,
HasShadow = true,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
// add the frame to the cuurent row / column in the newly created grid
newGrid.Children.Add(frame, currentColumn, currentRow);
}
// add the newely created grid to the parent grid
Children.Add(newGrid, 0, currentRow);
// reduce the number of columns on the next row to simulate row span
ColumnCountRequired = ColumnCountRequired - 1;
}
}
}
XAML
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:Smdc.SegmentedButtonExample;assembly=Smdc.SegmentedButtonExample"
xmlns:controls="clr-namespace:Smdc.Controls.SegmentedButton.Version2;assembly=Smdc.Controls.SegmentedButton"
x:Class="Smdc.SegmentedButtonExample.Views.DataEntryView2">
<ContentPage.BindingContext>
<vm:DatEntryViewModel2 />
</ContentPage.BindingContext>
<controls:SegmentedButtonGroup Padding="20,20,20,20">
</controls:SegmentedButtonGroup>
</ContentPage>
the grid width and column widths are working as expected but i am having problems with my row heights along with the spacing between rows. please see attached screen capture.
![]()
this control is to form the basis of a segmented button and so i would like all the rows to be the same height with minimal and consistent space between the rows.
any help would be appreciated.
thanks,
jas
\a\1\s\Xamarin.Forms.Platform.Android\FastRenderers\LabelRenderer.cs:407 \n at Xamarin.Forms.Platform.Android.FastRenderers.LabelRenderer.OnElementPropertyChanged (System.Object sender, System.ComponentModel.PropertyChangedEventArgs e) [0x00123] in 
