So I am encountering some issues with a UICollectionView I have in my Xamarin iOS project.
The cells for the CollectionView are not expanding with the label in them. The label in the cell has lines set to 0 and the following constraints:
(top, bottom, leading, trailing) to superview
Height >= 10
In my ViewDidLoad() I setup the CollectionView as follows:
var source = new CustomCollectionViewSource(collectionView);
collectionView.Source = source;
collectionView.SetCollectionViewLayout(new UICollectionViewFlowLayout()
{
ScrollDirection = UICollectionViewScrollDirection.Vertical,
EstimatedItemSize = new CGSize(collectionView.Frame.Width, 10)
}, false);
var set = this.CreateBindingSet<MainViewController, MainViewModel>();
set.Bind(source).For(v => v.ItemsSource).To(vm => vm.DataSource);
set.Apply();
and my CollectionViewSource
public class CustomCollectionViewSource : MvxCollectionViewSource
{
public IList<Item> Messages { get; set; }
public override void ReloadData()
{
var list = (ItemsSource as IEnumerable<Item>).ToArray();
Messages = list;
}
public CustomCollectionViewSource(UICollectionView collectionView) : base(collectionView)
{
collectionView.RegisterNibForCell(CustomCollectionViewCell.Nib, CustomCollectionViewCell.Key);
}
public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
{
var cell = collectionView.DequeueReusableCell(CustomCollectionViewCell.Key, indexPath) as CustomCollectionViewCell;
cell.DataContext = Messages.ElementAtOrDefault(indexPath.Row);
return cell;
}
}
I am trying to have the cells be the width of the collection view and for the height to be flexible; however, whenever I populate the cells, I always get something like this:
The cells are cutoff and have an ellipses at the end. I've read online that the constraints must be right to dynamically resize, so is there something I'm missing?
I also read that to get a calculated height for each cell I can load the nib of the cell, populate it, then set the size manually in a custom UICollectionViewDelegate. Cool idea, but I could find any working examples for Xamarin iOS.
Please let me know if there is something I'm missing or any other info you require. Thanks in advance!
1.Make your label support multiple lines by
textLabel.LineBreakMode = UILineBreakMode.WordWrap;
textLabel.Lines = 0;
2.Set the cell estimated height
cell.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize
Things to note:
To define the cell’s height, you need an unbroken chain of
constraints and views (with defined heights) to fill the area
between the content view’s top edge and its bottom edge.
If your views have intrinsic content heights, the system uses those
values. If not, you must add the appropriate height constraints,
either to the views or to the content view itself.
Related
I need to display data in WinForms in a very complex way.
There are many rows, and each row needs to be displayed slightly different.
Each row's model has a list of entities inside it, each translated to a button.
The buttons for each row are presnted in specific way according to some rules. Each row has different amount of buttons displayed in a different way in rows and cols.
On top of that, the display needs to be binded to the model and listen for many frequent changes, not only for value changes to display but also calculated data that indicates things like if to display the row or not, or to display the button or not, color indicators and more.
Now it is implemented with Telerik GridView, and, as you might expect, it doesn't function very well, too much data. The scroll bar is faltering, on many occations the rows or cells are not displayed until the user scrolls a bit.
This is an example of how I would like it to be displayed (without colors and stuff)
This is a very short sample of the code:
public class CustomCellElement : GridDataCellElement
{
protected override SizeF ArrangeOverride(SizeF finalSize)
{
try
{
float x = finalSize.Width;
float y = 0;
float maxHeight = 0;
foreach (var child in this.Children.ToList())
{
try
{
var element = child as RadButtonElement;
arrange logic...
child.Arrange(location);
.
.
------------
protected override void CreateChildElements()
{
_childItems = new ThreadSafedBindingList<E>();
_childItemsBindings = new List<Binding>();
base.CreateChildElements();
}
protected override void SetContentCore(object value)
{
...
foreach (var someChild in childs.ToList())
{
AddItem(someChild);
}
...
....
protected override void SetBindings(SomeChildEntity childElement, CustomRadButtonElement item)
{
....
Creating many bindings necessary for each SomeChildEntity
....
}
....
I will be very glad to hear suggestions !
Thanks
I am using Component one FlexGrid in my silverlight Application and it is autogenerating columns in the grid. I want to make one of the column's data behave as a clickable hyperlink. Any help on this problem would be greatly appreciated.
I have figured out a way to add hyperlink cell in C1FlexGrid.
One should extend CellFactory Class and inside the class
override method CreateCellContent(C1FlexGrid grid, Border bdr, CellRange range)
and write something like this:
public override void CreateCellContent(C1FlexGrid grid, Border bdr, CellRange range)
{
//Ofcourse One should figure out first the col in which they want to
//add the cell
var width = GetWidthForHyperlinkControl((string)grid[range.Row, range.Column]);
var cell = new HyperlinkControl
{
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Center,
Width = width,
Height = 16,
NavigateUri = null,
IsTabStop = false,
Content = (string)grid[range.Row, range.Column]
};
}
The sample projects for ComponentOne FlexGrid include a Hyperlink sample. Should be part of your installed items.
If not, you can also access it via the ComponentOne website.
Essentially, you set up a style for the hyperlink cells/columns and apply it. You can use OwnerDrawCell events to do it, as the example shows.
What control should I use to make a list of items display? I want to be able to adjust the height of the item so its height can take up more space then another item in the same control list of items.
I looked at listboxes, but you can't adjust the size of the items. I've considered making blank entries for placeholders to be grouped as the same item but would rather not if possible.
What this control is to be used for is to represent chunks of time from the beginning of the day (the top) to the end of the day (the bottom).
I looked at listboxes, but you can't adjust the size of the items
But you can. Set the DrawMode property to OwnerDrawVariable.
You of course need to tell it how tall each item needs to be, that requires implementing the MeasureItem event. And of course you need to draw it, so you fill up the space that you reserved with MeasureItem, that requires implementing the DrawItem event. You'll find an excellent example in the MSDN Library article for MeasureItem.
A custom panel does it like a charm:
public class AutoPanel : Panel
{
public AutoPanel()
{
AutoScroll = true;
}
private int _nextOffset = 0;
public int ItemMarginX = 5;
public int ItemMarginY = 5;
public void Add(Control child)
{
child.Location = new Point(ItemMarginX, _nextOffset);
_nextOffset += (child.Height + ItemMarginY);
Controls.Add(child);
}
}
Add it to your form and add items to it like this:
panel1.Add(new Button { Text = "smaller item", Height = 20 });
panel1.Add(new Button { Text = "medium item", Height = 23 });
panel1.Add(new Button { Text = "larger item", Height = 32 });
I have data grid view with columns product name and product image and I am populating these values coming from database...
i am using winforms desktop application.....
my problem is I am not able to showing the image in datagridview cell properly ..see the diagram below
i want to display this image in actual product image column for every cell in that column
this task is very simple in webforms by using datalist control but i dont know how to display full image in grid view cell
can any one help on this....
many thanks.......
and this is where i am binding the datagridview by using linq query..
private void EquipmentFinder_Load(object sender, EventArgs e)
{
var products = from prods in abc.products
select new
{
productid = prods.product_Id, //0
productname = prods.product_Name, //1
productimage = prods.product_Image, //2
productprice = prods.product_Price,//3
productdescr = prods.product_Description, //4
};
productbindingsource.DataSource = products;
productgridview.DataSource = productbindingsource;
productgridview.Columns[0].Visible = false;
productgridview.Columns[3].Visible = false;
productgridview.Columns[4].Visible = false;
}
Set the column's ImageLayout to the Stretch value to resolve this problem.
UPDATE: use the following code to change the ImageLayout property:
for(int i = 0; i < dataGridView1.Columns.Count; i ++)
if(dataGridView1.Columns[i] is DataGridViewImageColumn) {
((DataGridViewImageColumn)dataGridView1.Columns[i]).ImageLayout = DataGridViewImageCellLayout.Stretch;
break;
}
Set DataGridViewImageColumn.ImageLayout property to DataGridViewImageCellLayout.Zoom
If you set to "Stretch" your image will be inproportionally scaled to fit whole cell. And that is probably not what you want.
Set to zoom to have The graphic is uniformly enlarged until it fills the width or height of the containing cell.
By default the value is set to "Normal": The graphic is displayed centered using its native resolution.
first right click on grid go to properties of grid in that you will get column (collection) properties click on that. click on image column in that go in appearance-image layout-and choose stretch property you can also increase size of your image column.
its really helpful in that case .you have do not need for such type code.
I have a Form and a DataGridView. I populate the DataGridView at runtime, so I want to know how do I resize the Form dynamically according to the size of the DataGridView? Is there any sort of property or method? Or do I have to determine the size myself and update accordingly?
You can find the actual width by count Columns width.
Don't forget that your form may be more complex and your should count other controls.
public class YourForm : Form
{
public YourForm()
{
DataGridView _dgv = new DataGridView() { Dock = DockStyle.Fill};
Controls.Add(_dgv);
}
public void CorrectWindowSize()
{
int width = WinObjFunctions.CountGridWidth(_dgv);
ClientSize = new Size(width, ClientSize.Height);
}
DataGridView _dgv;
}
public static class WinObjFunctions
{
public static int CountGridWidth(DataGridView dgv)
{
int width = 0;
foreach (DataGridViewColumn column in dgv.Columns)
if (column.Visible == true)
width += column.Width;
return width += 20;
}
}
int dgv_width = dataGridView1.Columns.GetColumnsWidth(DataGridViewElementStates.Visible);
int dgv_height = dataGridView1.Rows.GetRowsHeight(DataGridViewElementStates.Visible);
this.Width = dgv_width;
this.Height = dgv_height;
this.Width resizes this Form width.
Of course you've to add fixed values (for example margin, Form title heigth, ecc.).
With tests i've reached the values working for me (don't ask why...):
this.Width = dgv_width + 147;
this.Height = dgv_height + 47;
Normally controls adapt their sizes to the size of the containing form. To adjust the size of your form to the size of your DataGridView, you do have to determine the size yourself and then set the form's size to match, remembering to take into account the extra size required by the form's menu strip and/or toolbars, status bars or other controls.
In your case, it would probably be best not to resize the form to match the grid view control. Most likely, you will have many more rows in your grid view than could fit on your Windows screen, and you don't want to have a form that extends below the viewable desktop area. Generally speaking, this type of situation is exactly why you want to have a scrollable grid view - for viewing more data than can fit on the screen at one time.
I would go the other direction and size the grid to the form. (some users may have low res)
Set 'WindowState' property of the form => maximized. (optional)
Set 'anchor' property of the DGV => 'Top, Bottom, Left, Right'.
You may be able to make use of the PreferredSize property (MSDN PreferredSize entry). For DataGridView controls, I found that the preferred width and height were about 20 units bigger than I expected. I guess that the control might be calculating its preferred size taking scroll bars into account.
Another caveat I discovered is that the PreferredSize calculation will not be accurate immediately after adding or changing items in the table. To get around this I made a handler for the RowHeadersWidthChanged event.
Here is what worked for me:
class GridToy {
private DataGridView grid;
public GridToy(DataGridView dgv) {
grid = dgv;
grid.RowHeadersWidthChanged += AdjustWidth; // Event handler.
Layout();
}
public void Layout() {
// Just do some arbitrary manipulation of the grid.
grid.TopLeftHeaderCell.Value = "Some Arbitrary Title";
}
public void AdjustWidth() {
Control horizontal = grid.Controls[0]; // Horizontal scroll bar.
Control vertical = grid.Controls[1]; // Vertical scroll bar.
grid.Width = grid.PreferredSize.Width - vertical.Width + 1;
grid.Height = grid.PreferredSize.Height - horizontal.Height + 1;
}
}
You could set the Property " Height " to Auto in the form after classifying or using an ID and this should do it ,,
I just tried it .. and It worked
#form1{
background-color:white;
height:auto;
width:1500px;
border-top:medium solid #3399FF;
margin-top:100px;
margin-left:30px;
display: inline-block;
text-align: center;
float: none;
}
I'm just putting exactly what I did in case you got lost .. Don't worry about the other properties there for my design.
Set AutoSizeColumnsMode :Fill in Grid Properties