I have a project. I have a table. ( Made from grid ) And i have a entry/Textbox. I need make like customer will write number to entry ( Lets call that number "n" ). Then i need add n row inside of my table made from grid. How can i do that ?
Its my codes for make grid table.
gr.RowDefinitions.Add(new RowDefinition
{
Height = new GridLength(1, GridUnitType.Absolute)
});
gr.RowDefinitions.Add(new RowDefinition
{
Height = new GridLength(1, GridUnitType.Star)
});
gr.RowDefinitions.Add(new RowDefinition
{
Height = new GridLength(1, GridUnitType.Absolute)
});
gr.RowDefinitions.Add(new RowDefinition
{
Height = new GridLength(1, GridUnitType.Star)
});
gr.RowDefinitions.Add(new RowDefinition
{
Height = new GridLength(1, GridUnitType.Absolute)
});
gr.RowDefinitions.Add(new RowDefinition
{
Height = new GridLength(1, GridUnitType.Star)
});
gr.RowDefinitions.Add(new RowDefinition
{
Height = new GridLength(1, GridUnitType.Absolute)
});
gr.RowDefinitions.Add(new RowDefinition
{
Height = new GridLength(1, GridUnitType.Star)
});
gr.RowDefinitions.Add(new RowDefinition
{
Height = new GridLength(1, GridUnitType.Absolute)
});
gr.ColumnDefinitions.Add(new ColumnDefinition
{
Width = new GridLength(1, GridUnitType.Absolute)
});
gr.ColumnDefinitions.Add(new ColumnDefinition
{
Width = new GridLength(1, GridUnitType.Star)
});
gr.ColumnDefinitions.Add(new ColumnDefinition
{
Width = new GridLength(1, GridUnitType.Absolute)
});
gr.ColumnDefinitions.Add(new ColumnDefinition
{
Width = new GridLength(1, GridUnitType.Star)
});
gr.ColumnDefinitions.Add(new ColumnDefinition
{
Width = new GridLength(1, GridUnitType.Absolute)
});
var backgroundbox = new BoxView
{
Color = System.Drawing.Color.FromArgb(-32513)
};
gr.Children.Add(backgroundbox, 0, 1);
Grid.SetColumnSpan(backgroundbox, 5);
var ustyatay = new BoxView { Color = System.Drawing.Color.Gray };
gr.Children.Add(ustyatay, 0, 0);
Grid.SetColumnSpan(ustyatay, 5);
var yatay2 = new BoxView { Color = System.Drawing.Color.Gray };
gr.Children.Add(yatay2, 0, 2);
Grid.SetColumnSpan(yatay2, 5);
var yatay3 = new BoxView { Color = Xamarin.Forms.Color.Gray };
gr.Children.Add(yatay3, 0, 4);
Grid.SetColumnSpan(yatay3, 5);
var yatay4 = new BoxView { Color = Xamarin.Forms.Color.Gray };
gr.Children.Add(yatay4, 0, 6);
Grid.SetColumnSpan(yatay4, 5);
var soldik = new BoxView { Color = System.Drawing.Color.Gray };
gr.Children.Add(soldik, 0, 0);
Grid.SetRowSpan(soldik, 7);
var ortadik = new BoxView { Color = Xamarin.Forms.Color.Gray };
gr.Children.Add(ortadik, 2, 0);
Grid.SetRowSpan(ortadik, 7);
var sagdik = new BoxView { Color = System.Drawing.Color.Gray };
gr.Children.Add(sagdik, 4, 0);
Grid.SetRowSpan(sagdik, 7);
gr.Children.Add(new Label
{
Text = "Customer Name",
FontAttributes = FontAttributes.Bold,
TextColor = System.Drawing.Color.Yellow,
FontSize = 16,
Padding=new Thickness(10,10)
}, 1, 1); ;
gr.Children.Add(new Label
{
Text = "T.Type Name",
FontAttributes = FontAttributes.Bold,
TextColor= Xamarin.Forms.Color.Yellow,
FontSize=16,
Padding = new Thickness(10, 10)
}, 3, 1);
I made lines as grid column,row too. I think i made it wrong. When i add n row i need change rowspan too. Idk how can i make that project. Can you guys help me please ? I need learn : How can i add rows with entry , how can i add boxview and rowspan for new row (For make line) ? Thanks for help guys!
That photo for what should i do with my hand drawing : https://prnt.sc/10jxdhn
I can slove the problem by using Data binding.
First, edit your .xaml file like this:
<Entry Text="{Binding N}"></Entry>
<Button Text="Create" Command ="{Binding CreateCommand}"></Button>
<ListView ItemsSource="{Binding Rows}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding}"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Next create a ViewModel, I call it Page1ViewModel.cs.
In .xaml.cs file, add the binding context to Page1ViewModel in the constructor
BindingContext = new Page1ViewModel();
In Page1ViewModel.cs:
class Page1ViewModel : INotifyPropertyChanged
{
private int n;
private List<string> rows;
public List<string> Rows
{
get => rows;
set
{
rows = value;
OnPropertyChanged();
}
}
public int N
{
get => n;
set
{
n = value;
OnPropertyChanged();
}
}
public Command CreateCommand { get; }
public Page1ViewModel()
{
Rows = new List<string>();
CreateCommand = new Command(Create);
}
private void Create()
{
List <string> tmp = new List<string>();
for (int i = 0; i < n; i++)
{
tmp.Add("Row" + i);
}
Rows = tmp;
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
var changed = PropertyChanged;
if (changed == null)
return;
changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
Good luck!
Related
I have some data which is received as response from rest api. I need to display this data in a grid form.
Json is as follow:
{
"field 1" : "name1",
"field 2" : "name 2",
"data" : [
{
"type 1" : "name 1",
"type 2" : "name 2"
},
{
"type 1" : "name 3",
"type 2" : "name 4"
}
]
So, from the above sample the number of entries in "data" field may vary dynamically. I creating a grid to display these fields from code behind as follows:
foreach(var obj in data) //reads data fields
{
//json deserialization goes here
Grid grid = new Grid() //want to create a separate grid for each entry in json *data*
{
VerticalOptions = LayoutOptions.Start,
RowDefinitions =
{
new RowDefinition { Height = GridLength.Auto },
new RowDefinition { Height = GridLength.Auto },
},
};
grid.Children.Add(new Label
{
Text = "Field 1",
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
HorizontalOptions = LayoutOptions.Center
}, 0, 0);
///more code on grid.
}
From the above implementation, only a single grid is created which has entries for last value of data field (i.e, name3, name4). How do I display separate grids for each json nested fields in data
You could try the code below. I use json string for example. Use a boxview to split the column name and data. You could use boxview to split data as well.
public ObservableCollection<Rootobject> list { get; set; }
public MainPage()
{
InitializeComponent();
var datas = #"{
'field1':'name1',
'field2':'name2',
'data':[
{
'type1':'name1',
'type2':'name2'
},
{
'type1':'name3',
'type2':'name4'
}
]
}";
var jsondata = JsonConvert.DeserializeObject<Rootobject>(datas);
list = new ObservableCollection<Rootobject>();
list.Add(jsondata);
Grid grid = new Grid() { RowSpacing = 5, ColumnSpacing = 5, };
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
var field1 = new Label()
{
Text = "field1",
VerticalOptions = LayoutOptions.Center
};
var field2 = new Label()
{
Text = "field2",
VerticalOptions = LayoutOptions.Center
};
var data = new Label()
{
Text = "data",
HorizontalOptions = LayoutOptions.Center
};
var type1 = new Label()
{
Text = "type1",
};
var type2 = new Label()
{
Text = "type2",
};
var boxview = new BoxView()
{
BackgroundColor = Color.Black,
HeightRequest = 1
};
grid.Children.Add(field1, 0, 0);
Grid.SetRowSpan(field1, 2);
grid.Children.Add(field2, 1, 0);
Grid.SetRowSpan(field2, 2);
grid.Children.Add(data, 2, 0);
Grid.SetColumnSpan(data, 2);
grid.Children.Add(type1, 2, 1);
grid.Children.Add(type2, 3, 1);
grid.Children.Add(boxview, 0, 2);
Grid.SetColumnSpan (boxview,4);
foreach (var item in list)
{
var field1_value = new Label()
{
Text = item.field1,
};
grid.Children.Add(field1_value, 0, 3);
Grid.SetRowSpan(field1_value, 2);
var field2_value = new Label()
{
Text = item.field2,
};
grid.Children.Add(field2_value, 1, 3);
Grid.SetRowSpan(field2_value, 2);
int row_type1 = 3;
int row_type2 = 3;
foreach (var type_value in item.data)
{
var type1_value = new Label()
{
Text = type_value.type1,
};
grid.Children.Add(type1_value, 2, row_type1);
var type2_value = new Label()
{
Text = type_value.type2,
};
grid.Children.Add(type2_value, 3, row_type2);
row_type1++;
row_type2++;
}
}
Content = grid;
//this.BindingContext = jsondata;
}
}
public class Rootobject
{
public string field1 { get; set; }
public string field2 { get; set; }
public Datum[] data { get; set; }
}
public class Datum
{
public string type1 { get; set; }
public string type2 { get; set; }
}
}
you need to add your grids to a layout container
StackLayout stack = new StackLayout();
foreach(var obj in data) //reads data fields
{
Grid grid = new Grid()
{
...
}
stack.Children.Add(grid);
}
first of all sorry for the mess, I'm kicking my head in this for a while already, I'm kind new in xamarin and starting with difficult problems. I'm trying to add dynamically a list of random images in a grid.
currently i have the grid printing like
Name1 Detail1
filename1 filename2 filename3
Name2 Detail2
Filename1 filename2
var cell = new DataTemplate(() => {
var grid = new Grid() { Padding = 8, RowSpacing = 5, ColumnSpacing = 5 };
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Auto) });
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Auto) });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(50, GridUnitType.Star) });
Subtitle.SetBinding(Label.TextProperty, "Images");
grid.Children.Add(labelName, 0, 0);
grid.Children.Add(labelDetail, 1, 0);
grid.Children.Add(Subtitle, 1, 1);
the cell in the end is attached to a listview
listdata.ItemTemplate = cell;
in the Object I have defined images as a string, I already tried to create another bind to a list, and create a listview of a custom call and add it to the grid, but throws an error and I can't see any description, it's something like sigsegv-without-stack trace
Also tried to instead of a grid, create a stack layout. again nothing.
CustomCell
public class CustomNocCell : ViewCell
{
public CustomCell()
{
//instantiate each of our views
var image = new Image();
var nameLabel = new Label();
var typeLabel = new Label();
var verticaLayout = new StackLayout();
var horizontalLayout = new StackLayout() { BackgroundColor = Color.Transparent };
//set bindings
nameLabel.SetBinding(Label.TextProperty, new Binding("Name"));
image.SetBinding(Image.SourceProperty, new Binding("Image"));
//Set properties for desired design
horizontalLayout.Orientation = StackOrientation.Horizontal;
horizontalLayout.HorizontalOptions = LayoutOptions.Center;
image.HorizontalOptions = LayoutOptions.End;
nameLabel.FontSize = 24;
//add views to the view hierarchy
verticaLayout.Children.Add(nameLabel);
horizontalLayout.Children.Add(verticaLayout);
horizontalLayout.Children.Add(image);
// add to parent view
View = horizontalLayout;
}
}
what I tried already that gave the error
//ListView listView = new ListView();
//listView.RowHeight = 60;
//listView.ItemTemplate = new DataTemplate(typeof(CustomNocCell));
////listView.ItemsSource = "ImagesNoc";
//listView.SetBinding(ListView.ItemsSourceProperty, "ImagesList");
ImagesList class
[Ignore]
public ListView ImagesList
{
get
{
ListView listView = new ListView();
listView.RowHeight = 60;
listView.ItemTemplate = new DataTemplate(typeof(CustomNocCell));
List<string> list = new List<string>();
if (!string.IsNullOrEmpty(Detail))
{
foreach (string str in Detail.Split(';'))
{
list.Add(str);
}
}
listView.ItemsSource = list.Select(s => new { Name = s, Image = s.ToLower() + ".png" }).ToList();
return listView;
}
}
I had the class also returning a simple List of type Name and Image that the CustomCell is waiting and nothing.
EDIT
public class TestObject
{
public string title { get; set; }
public string countries { get; set; }
}
void load()
{
List<TestObject> list = new List<TestObject>();
list.Add(new TestObject { title = "test1", countries = "esp,ita,prt" });
list.Add(new TestObject { title = "test2", countries = "esp,ita" });
list.Add(new TestObject { title = "test3", countries = "rus" });
var labelTitle = new Label()
{
FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)),
VerticalOptions = LayoutOptions.StartAndExpand,
};
listdata = new ListView();
listdata.ItemsSource = list;
var cell = new DataTemplate(() => {
var grid = new Grid() { Padding = 8, RowSpacing = 5, ColumnSpacing = 5 };
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Auto) });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Auto) });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Auto) });
labelTitle.SetBinding(Label.TextProperty, "title");
countriesLabel.SetBinding(Label.TextProperty, "countries"); //here i want to make a customcell to show the images, like be able to "bind" and calc the countries split the string by "," and add (name + ".png") then show the image.
// i was able to do it in a listview when i have the source in my side.. in this one i have to bind and then calc..
grid.Children.Add(labelTitle, 0, 0);
grid.Children.Add(countriesLabel, 1, 0);
});
listdata.ItemTemplate = cell;
}
I have an page that got a scrollview, with inside a Grid.
Each cell of grid got an image.
I load images with ffimageloader.
Images are from DCIM/Images library
Works good, but when I got many images on the Grid, I have memories issues.
I can't figure how to draw only cells that are currently visible on the scrollview. I see something like that on ffimageloader wiki, but how to adapt the
_myListView.ForcePdfThumbnalisRedraw();
to Grid cells actually visible on screen?
myScrollView.ScrollStateChanged += (object sender, ScrollStateChangedEventArgs scrollArgs) => {
switch (scrollArgs.ScrollState)
{
case ScrollState.Fling:
ImageService.Instance.SetPauseWork(true); // all image loading requests will be silently canceled
break;
case ScrollState.Idle:
ImageService.Instance.SetPauseWork(false); // loading requests are allowed again
// Here you should have your custom method that forces redrawing visible list items
_myListView.ForcePdfThumbnailsRedraw();
break;
}
};
Here is the page ( Slightly lighter because too much nonsense code for the problem )
int GridCellWidth, GridCellHeight;
Grid headerGrid, contentGrid, footerGrid, pageGrid;
ScrollView galerieScrollView;
StackLayout headerLayout, footerLayout;
public Galer()
{
contentGrid = new Grid();
contentGrid.VerticalOptions = LayoutOptions.Center;
contentGrid.BackgroundColor = Color.Transparent;
GridCellWidth = App.ScreenWidthD / 4;
GridCellHeight = App.ScreenHeightD / 4;
contentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(GridCellWidth) });
contentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(GridCellWidth) });
contentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(GridCellWidth) });
contentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(GridCellWidth) });
bool bigOne = false;
int index;
int row = 0;
for (index = 0; index < imagesUrls.Count; index++)
{
if (index + 5 <= imagesUrls.Count)
{
if (!bigOne)
{
contentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(GridCellWidth) });
contentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(GridCellWidth) });
List<string> imagesToDraw = imagesUrls.GetRange(index, 5);
AddToRowWithLeftBigImage(imagesToDraw, row, contentGrid);
bigOne = true;
index = index + 5;
}
else
{
contentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(GridCellWidth) });
contentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(GridCellWidth) });
List<string> imagesToDraw = imagesUrls.GetRange(index, 5);
AddToRowWithRightBigImage(imagesToDraw, row, contentGrid);
index = index + 5;
bigOne = false;
}
row = row + 2;
}
}
if (imagesUrls.Count() - index > 0)
{
contentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(GridCellWidth) });
int lastPosition = index - imagesUrls.Count();
int steelAvialable = Math.Abs(imagesUrls.Count() - index);
List<string> imagesToDraw = imagesUrls.GetRange(lastPosition, steelAvialable);
for (var i = 0; i < imagesToDraw.Count(); i++)
{
contentGrid.Children.Add(GetCachedImageFromStringUrl(imagesToDraw[i]), row, 0);
}
}
galerieScrollView = new ScrollView
{
Content = contentGrid
};
galerieScrollView.BackgroundColor = Color.Transparent;
pageGrid = new Grid();
pageGrid.Padding = new Thickness(0, 0, 0, 0);
//pageGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
pageGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(9, GridUnitType.Star) });
pageGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
pageGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
//pageGrid.Children.Add(headerLayout, 0, 0);
//pageGrid.Children.Add(contentGrid, 0, 0);
pageGrid.Children.Add(galerieScrollView, 0, 0);
//pageGrid.Children.Add(footerLayout, 0, 1);
Content = pageGrid;
}
private void AddToRowWithRightBigImage(List<string> imageToDraw, int currentRow, Grid intoThatGrid)
{
var image = GetCachedImageFromStringUrl(imageToDraw[0], GridCellWidth * 2, GridCellWidth * 2, GridCellWidth);
intoThatGrid.Children.Add(image, 0, currentRow);
Grid.SetColumnSpan(image, 2);
Grid.SetRowSpan(image, 2);
intoThatGrid.Children.Add(GetCachedImageFromStringUrl(imageToDraw[1], GridCellWidth, GridCellWidth), 2, currentRow);
intoThatGrid.Children.Add(GetCachedImageFromStringUrl(imageToDraw[2], GridCellWidth, GridCellWidth), 3, currentRow);
intoThatGrid.Children.Add(GetCachedImageFromStringUrl(imageToDraw[3], GridCellWidth, GridCellWidth), 2, currentRow + 1);
intoThatGrid.Children.Add(GetCachedImageFromStringUrl(imageToDraw[4], GridCellWidth, GridCellWidth), 3, currentRow + 1);
}
private void AddToRowWithLeftBigImage(List<string> imageToDraw, int currentRow, Grid intoThatGrid)
{
intoThatGrid.Children.Add(GetCachedImageFromStringUrl(imageToDraw[1], GridCellWidth, GridCellWidth), 0, currentRow);
intoThatGrid.Children.Add(GetCachedImageFromStringUrl(imageToDraw[2], GridCellWidth, GridCellWidth), 1, currentRow);
intoThatGrid.Children.Add(GetCachedImageFromStringUrl(imageToDraw[3], GridCellWidth, GridCellWidth), 0, currentRow + 1);
intoThatGrid.Children.Add(GetCachedImageFromStringUrl(imageToDraw[4], GridCellWidth, GridCellWidth), 1, currentRow + 1);
var image = GetCachedImageFromStringUrl(imageToDraw[4], GridCellWidth * 2, GridCellWidth * 2, GridCellWidth);
intoThatGrid.Children.Add(image, 2, currentRow);
Grid.SetColumnSpan(image, 2);
Grid.SetRowSpan(image, 2);
}
private CachedImage GetCachedImageFromStringUrl(string url, int heightRequest = 200, int widthRequest = 200, int downSample = 50)
{
CachedImage image = new CachedImage();
image.Source = url;
image.HeightRequest = heightRequest;
image.WidthRequest = widthRequest;
image.DownsampleWidth = downSample;
image.LoadingPlaceholder = "loading.png";
image.Transformations = new System.Collections.Generic.List<ITransformation>() {
new CropTransformation(1, image.Width / 2 - heightRequest, image.Height / 2 - widthRequest)
};
/*image.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(() => {
Navigation.PushModalAsync(new ViewImagePage(image));
}),
NumberOfTapsRequired = 1
});*/
return image;
}
I got this as result
I know that you can set the row height with a "*" in XAML this way:
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
but the same expression in C# returns an error:
new RowDefinition { Height = new GridLength("*", GridUnitType.Auto) },
So my question is how to set the row height of a grid to a "*" in C#?
var grid = new Grid ();
grid.RowDefinitions.Add (new RowDefinition { Height = GridLength.Auto });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
var stacklayout1 = new StackLayout { HeightRequest = 100, BackgroundColor = Color.Red };
var stacklayout2 = new StackLayout { BackgroundColor = Color.Blue };
Grid.SetRow (stacklayout2, 1);
grid.Children.Add (stacklayout1);
grid.Children.Add (stacklayout2);
MainPage = new ContentPage { Content = grid };
I have two separate Silverlight usercontrols containing grids and i want these to share a set of columndefinitions. The columndefinitions must be created dynamically. How can i do this?
You can just add them in code if that is sufficient:
private void CreateColumnDefinitions(Grid grid)
{
grid.ColumnDefinitions.Add(
new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) });
grid.ColumnDefinitions.Add(
new ColumnDefinition() { Width = new GridLength(5, GridUnitType.Star) });
grid.ColumnDefinitions.Add(
new ColumnDefinition() { Width = new GridLength(5, GridUnitType.Star) });
}