Xamarin.Forms Images Causes Grid Row Height To Excessively Increase - c#

The grid is already instantiated with the columns at the start of the code outside the foreach loop, within this loop, rows are being instantiated.
foreach (var post in posts)
{
Frame featuredFrame = new Frame();
featuredFrame.Padding = 20;
featuredFrame.Margin = new Thickness(0, 10, 0, 0);
Label postTitle = new Label();
postTitle.FontSize = Device.GetNamedSize(NamedSize.Subtitle, typeof(Label));
BoxView titleSeparator = new BoxView();
titleSeparator.Color = Color.Gray;
titleSeparator.HeightRequest = 1;
titleSeparator.HorizontalOptions = LayoutOptions.Fill;
Image postFeaturedImage = new Image();
postFeaturedImage.Source = ImageSource.FromUri(imageUri);
postFeaturedImage.Aspect = Aspect.AspectFill;
BoxView imageSeparator = new BoxView();
imageSeparator.Color = Color.Gray;
imageSeparator.HeightRequest = 2;
imageSeparator.HorizontalOptions = LayoutOptions.Fill;
Label publishDate = new Label();
publishDate.FontSize = Device.GetNamedSize(NamedSize.Caption, typeof(Label));
StackLayout postDetails = new StackLayout();
postDetails.Children.Add(postTitle);
postDetails.Children.Add(titleSeparator);
postDetails.Children.Add(postFeaturedImage);
postDetails.Children.Add(imageSeparator);
postDetails.Children.Add(publishDate);
postDetails.Margin = new Thickness(0);
postDetails.Padding = new Thickness(0);
featuredFrame.Content = postDetails;
postGrid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
postGrid.Children.Add(featuredFrame, columnNumber, rowNumber);
}
As you can see, the rows are being created with the height set to Auto, this should mean the rows are the same height as the children.
This is the result of the code above:
This is the result of the code above with postDetails.Children.Add(postFeaturedImage); commented out:
In the screenshot with the images, there is a lot of blank space below the publish date-time text. In the screenshot without the images, this blank space is gone.
I need the pictures visible, but the blank space shouldn't be there. How can I fix this?

I ran into the same issue (that's how I found the question) and I have managed to fix it.
I solved the problem by adding VerticalOptions like this:
postDetails.VerticalOptions = LayoutOptions.Start;
and make sure that you have Height = GridLength.Auto for the RowDefinition.

Related

Grid does not fill the whole window, why?

I have written a UI for an Game of Life (Automation Theory) and the algorithm works just fine. I have also created a pop-up which will start first and where you can set the amount of rows and columns the game should have. This works also fine. Somehow my Grid only fills a small amount of the space in the window (Like it would only be in the left top cell of another Grid). I cannot work out why this is happening. Help would be much appreciated. I am aware that the code is quit complex and messy at this point. The GameCreation() Method is calling the popup window first. After that I declare some variables and my grid. Then I create rows and columns and button which I store in the grid as well. There are no errors or exceptions.
This is how the window looks like:
private void GameCreation()
{
//Pop-up Fenster aufrufen und eingaben in rowCount und colCount speichern
List<int> list = new List<int>();
list = OptionsWindow();
//Variablen deklarieren
int nameNum = 1;
int rowCount = list[0];
int colCount = list[1];
Button[,] buttons = new Button[rowCount, colCount];
Grid MainGrid = new Grid();
Window1.Content = MainGrid;
for (int i = 0; i < rowCount; i++)
{
for (int j = 0; j < colCount; j++)
{
// create Grid.RowDefinition and Grid.ColumnDefinition based on rowCount and colCount
RowDefinition row = new RowDefinition();
GridLengthConverter gridLengthConverter = new GridLengthConverter();
row.Height = (GridLength)gridLengthConverter.ConvertFrom("*");
MainGrid.RowDefinitions.Add(row);
ColumnDefinition column = new ColumnDefinition();
column.Width = (GridLength)gridLengthConverter.ConvertFrom("*");
MainGrid.ColumnDefinitions.Add(column);
// Button erstellen
Button button = new Button
{
Name = "B" + nameNum,
Background = Brushes.Gray,
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch,
Padding = new Thickness(1, 1, 1, 1)
};
button.Click += ChangeColor;
//den Button zum Grid hinzufügen an der richtigen Stelle
Grid.SetRow(button, i);
Grid.SetColumn(button, j);
MainGrid.Children.Add(button);
//Button buttons[,] hinzufügen
buttons[i, j] = button;
nameNum++;
}
}
//resetButton deklarieren
Button resetButton = new()
{
Name = "resetButton",
Background = Brushes.DodgerBlue,
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch,
Padding = new Thickness(1, 1, 1, 1),
Content = new Image
{
Source = new BitmapImage(new Uri("C:\\Users\\myname\\source\\repos\\GameOfLife\\GameOfLifeApp\\ResetButton2.png"))
}
};
resetButton.Click += Reset;
Grid.SetRow(resetButton, rowCount);
Grid.SetColumn(resetButton, 0);
Grid.SetColumnSpan(resetButton, 1);
//StartButton deklarieren
RowDefinition row2 = new RowDefinition();
GridLengthConverter gridLengthConverter2 = new GridLengthConverter();
row2.Height = (GridLength)gridLengthConverter2.ConvertFrom("*");
MainGrid.RowDefinitions.Add(row2);
Button startButton = new()
{
Name = "startButton",
Background = Brushes.DodgerBlue,
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch,
Padding = new Thickness(1, 1, 1, 1),
Content = "Start",
HorizontalContentAlignment = HorizontalAlignment.Center,
VerticalContentAlignment = VerticalAlignment.Center,
Foreground = Brushes.White
};
startButton.Click += Start;
Grid.SetRow(startButton, rowCount);
Grid.SetColumn(startButton, 1);
int colSpan = colCount - 2;
Grid.SetColumnSpan(startButton, colSpan);
//clearButton deklarieren
Button clearButton = new()
{
Name = "clearButton",
Background = Brushes.DodgerBlue,
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch,
Padding = new Thickness(1, 1, 1, 1),
Content = new Image
{
Source = new BitmapImage(new Uri("C:\\Users\\myname\\source\\repos\\GameOfLife\\GameOfLifeApp\\ClearButton.png"))
}
};
clearButton.Click += Clear;
Grid.SetRow(clearButton, rowCount);
Grid.SetColumn(clearButton, colCount - 1);
Grid.SetColumnSpan(clearButton, 1);
//Button Array richtig besetzen
int[,] startArray = new int[rowCount, colCount];
int rowLength = startArray.GetLength(0);
int colLength = startArray.GetLength(1);
startArray = Phasen.StartArray(startArray);
buttons = TranslatetoButtonArray(startArray, buttons, rowLength, colLength);
//Funktionsbutton MainGrid hinzufügen
MainGrid.Children.Add(startButton);
MainGrid.Children.Add(clearButton);
MainGrid.Children.Add(resetButton);
}
I have tried setting the heigth and width of the Grid to auto but that doesnt change anything. When i had a fix amount of buttons and declared the Grid aswell as the buttons in the .xaml file there was no such problem.
The reason I think you have this issue is because your code runs after measure and arrange have been done for your window.
I'm not sure why adding the grid doesn't force that again but I have a suggestion could make your problem go away.
Add
Window1.InvalidateVisual();
To the end of your code.
If that still doesn't work then try instead:
Dispatcher.CurrentDispatcher.InvokeAsync(new Action(() =>
{
Window1.InvalidateVisual();
}), DispatcherPriority.ContextIdle);
Still no joy then try not showing whatever this popup is. Maybe you're showing that as modal.
This approach of building everything out in code is inadvisable. Datatemplating is perfectly capable of working fast enough for basic games.

Set Background Color of Dynamically Generated WPF Canvas?

I have a dynamically created WPF Canvas element inside a ContentControl (the same thing happens in a UserControl.) Whenever I attempt to set the background, either upon creation or later on in the program, the background color won't paint (I am however able to set the background on a Label inside of the Canvas (also added dynamically.) The creation code I have looks like:
_rootGrid = new Grid();
_rootGrid.Name = "_rootGrid";
_rootGrid.Margin = new Thickness(0);
_rootGrid.HorizontalAlignment = HorizontalAlignment.Stretch;
_rootGrid.VerticalAlignment = VerticalAlignment.Stretch;
_rootGrid.RowDefinitions.Add(new RowDefinition());
_rootGrid.RowDefinitions.Add(new RowDefinition());
_rootGrid.ColumnDefinitions.Add(new ColumnDefinition());
_rootGrid.RowDefinitions[0].Height = new GridLength(24);
_rootGrid.RowDefinitions[1].Height = new GridLength(0, GridUnitType.Star);
_rootGrid.ColumnDefinitions[0].Width = new GridLength(0, GridUnitType.Star);
_headerBlock = new Canvas();
_headerBlock.Name = "_headerBlock";
_headerBlock.SetValue(Grid.RowProperty, 0);
_headerBlock.SetValue(Grid.ColumnProperty, 0);
_headerBlock.PreviewMouseLeftButtonUp += _headerBlock_PreviewMouseLeftButtonUp;
_headerBlock.Background = Brushes.Red;
_title = new Label();
_title.Name = "_title";
_title.Content = "Title";
_title.VerticalAlignment = VerticalAlignment.Center;
_title.HorizontalAlignment = HorizontalAlignment.Left;
_title.FontWeight = FontWeights.Bold;
_title.Background = Brushes.Blue;
_clientBlock = new ScrollViewer();
_clientBlock.Name = "_clientBlock";
_clientBlock.Margin = new Thickness(0);
_clientBlock.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;
_clientBlock.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
_clientBlock.SetValue(Grid.RowProperty, 1);
_clientBlock.SetValue(Grid.ColumnProperty, 0);
_clientArea = new Grid();
_clientArea.Name = "_clientArea";
_clientArea.HorizontalAlignment = HorizontalAlignment.Stretch;
_clientArea.VerticalAlignment = VerticalAlignment.Stretch;
_headerBlock.Children.Add(_title);
_rootGrid.Children.Add(_headerBlock);
_clientBlock.Content = _clientArea;
_rootGrid.Children.Add(_clientBlock);
base.Content = _rootGrid;
And is called inside of the ContentControl constructor. From that I would expect the header to contain a full row of Red with a Blue rectangle around the text, but all I get is the Blue rectangle around text with most of the row left Transparent (noticeable due to the Green background of the root Grid.) Any help on this would be appreciated as it is enormously frustrating. I'm using version 6.2 of the .NET framework on Windows 7 if that plays into it (I have noticed some other odd behaviors, but am going for dynamic generation mostly because these ContentControls take lots of child elements and the VS 2017 XAML parser is too broken to allow them to be named - which makes them virtually useless.)
The solution is to use non-zero Width for ColumnDefinition:
_rootGrid.ColumnDefinitions[0].Width = new GridLength(1, GridUnitType.Star); // equal to Width="*" in xaml
When 0 is used, Canvas has 0 witdh. But is is possible to see blue Label because Canvas doesn't clip contents on its bounds.
If you try Grid (var _headerBlock = new Grid();) with zero width column, there won't be anything displayed at all.

How to display my images in a 4 by 4 grid using c#?

Currently my images just go down vertically, I want 4 images to display horizontally in each row, I've tried few suggestions on here but can't seem to get it working to work, its quite confusing to me as a beginner.
foreach (MyWCF.dogs c in lc)
{
RowDefinition row = new RowDefinition();
row.Height = new GridLength(1.0, GridUnitType.Auto);
g.RowDefinitions.Add(row);
StackPanel sp = new StackPanel();
sp.Orientation = Orientation.Horizontal;
BitmapImage image = new BitmapImage();
Image i1 = new Image();
using (InMemoryRandomAccessStream ms = new InMemoryRandomAccessStream())
{
using (DataWriter writer = new DataWriter(ms.GetOutputStreamAt(0)))
{
writer.WriteBytes((byte[])p.images);
writer.StoreAsync().GetResults();
}
//var image = new BitmapImage();
image.SetSource(ms);
}
i1.Source = image;
i1.Height = 100;
sp.Children.Add(i1);
Grid.SetRow(sp, gridRef);
g.Children.Add(sp);
gridRef++;
}
(Trying again with the Microsoft code explicitly included. I presume its OK to point to S.O. answers instead of copying an pasting the entirety of the S.O. answer here )
Perhaps the tutorial Grid Class : "Defines a flexible grid area that consists of columns and rows." will help. Then, this S.O. question Adding Image to Grid C# shows how to add images to a WPF grid.
Here is the material from the Grid Class post:
The following C# example demonstrates how to create a grid. In this case, the grid defines three ColumnDefinition elements and four RowDefinition elements that host child content.
// Create the application's main window
mainWindow = new Window();
mainWindow.Title = "Grid Sample";
// Create the Grid
Grid myGrid = new Grid();
myGrid.Width = 250;
myGrid.Height = 100;
myGrid.HorizontalAlignment = HorizontalAlignment.Left;
myGrid.VerticalAlignment = VerticalAlignment.Top;
myGrid.ShowGridLines = true;
// Define the Columns
ColumnDefinition colDef1 = new ColumnDefinition();
ColumnDefinition colDef2 = new ColumnDefinition();
ColumnDefinition colDef3 = new ColumnDefinition();
myGrid.ColumnDefinitions.Add(colDef1);
myGrid.ColumnDefinitions.Add(colDef2);
myGrid.ColumnDefinitions.Add(colDef3);
// Define the Rows
RowDefinition rowDef1 = new RowDefinition();
RowDefinition rowDef2 = new RowDefinition();
RowDefinition rowDef3 = new RowDefinition();
RowDefinition rowDef4 = new RowDefinition();
myGrid.RowDefinitions.Add(rowDef1);
myGrid.RowDefinitions.Add(rowDef2);
myGrid.RowDefinitions.Add(rowDef3);
myGrid.RowDefinitions.Add(rowDef4);
// Add the first text cell to the Grid
TextBlock txt1 = new TextBlock();
txt1.Text = "2005 Products Shipped";
txt1.FontSize = 20;
txt1.FontWeight = FontWeights.Bold;
Grid.SetColumnSpan(txt1, 3);
Grid.SetRow(txt1, 0);
// Add the second text cell to the Grid
TextBlock txt2 = new TextBlock();
txt2.Text = "Quarter 1";
txt2.FontSize = 12;
txt2.FontWeight = FontWeights.Bold;
Grid.SetRow(txt2, 1);
Grid.SetColumn(txt2, 0);
// Add the third text cell to the Grid
TextBlock txt3 = new TextBlock();
txt3.Text = "Quarter 2";
txt3.FontSize = 12;
txt3.FontWeight = FontWeights.Bold;
Grid.SetRow(txt3, 1);
Grid.SetColumn(txt3, 1);
// Add the fourth text cell to the Grid
TextBlock txt4 = new TextBlock();
txt4.Text = "Quarter 3";
txt4.FontSize = 12;
txt4.FontWeight = FontWeights.Bold;
Grid.SetRow(txt4, 1);
Grid.SetColumn(txt4, 2);
// Add the sixth text cell to the Grid
TextBlock txt5 = new TextBlock();
Double db1 = new Double();
db1 = 50000;
txt5.Text = db1.ToString();
Grid.SetRow(txt5, 2);
Grid.SetColumn(txt5, 0);
// Add the seventh text cell to the Grid
TextBlock txt6 = new TextBlock();
Double db2 = new Double();
db2 = 100000;
txt6.Text = db2.ToString();
Grid.SetRow(txt6, 2);
Grid.SetColumn(txt6, 1);
// Add the final text cell to the Grid
TextBlock txt7 = new TextBlock();
Double db3 = new Double();
db3 = 150000;
txt7.Text = db3.ToString();
Grid.SetRow(txt7, 2);
Grid.SetColumn(txt7, 2);
// Total all Data and Span Three Columns
TextBlock txt8 = new TextBlock();
txt8.FontSize = 16;
txt8.FontWeight = FontWeights.Bold;
txt8.Text = "Total Units: " + (db1 + db2 + db3).ToString();
Grid.SetRow(txt8, 3);
Grid.SetColumnSpan(txt8, 3);
// Add the TextBlock elements to the Grid Children collection
myGrid.Children.Add(txt1);
myGrid.Children.Add(txt2);
myGrid.Children.Add(txt3);
myGrid.Children.Add(txt4);
myGrid.Children.Add(txt5);
myGrid.Children.Add(txt6);
myGrid.Children.Add(txt7);
myGrid.Children.Add(txt8);
// Add the Grid as the Content of the Parent Window Object
mainWindow.Content = myGrid;
mainWindow.Show ();

Button on top of the Scrollview does not show up

I have something like this so far for my view:
public StackLayout OffersSlideViewCarouselChild(Offer offer)
{
Image productImage = new Image
{
Source = ImageSource.FromUri(new Uri(offer.Image.Replace("https://", "http://"))),
HeightRequest = 270,
WidthRequest = 270,
Aspect = Aspect.AspectFit
};
var topStackLayout = new StackLayout
{
Spacing = 0
};
topStackLayout.Children.Add(productImage);
StackLayout contentStackLayout = new StackLayout
{
Spacing = 0,
Padding = new Thickness(5, 10, 5, 10),
Orientation = StackOrientation.Vertical
};
var savedBtn = SavedButtonLayout(offer.IsSelected, offer.Id);
var redeemBtn = RedeemBtnLayout(offer.Id);
var timeRemainingLabel = TimeRemainingLayout(offer, offer.Id);
contentStackLayout.Children.Add(new UILabel(16) {
Text = offer.ProductName,
TextColor = ColorHelper.FromHex(CoreTheme.COLOR_OFFERCELL_PRODUCT_TEXT),
FontFamily = CoreTheme.FONT_FAMILY_DEFAULT_BOLD,
WidthRequest = DeviceDisplaySettings.defaultwidth,
VerticalTextAlignment = TextAlignment.Center
});
contentStackLayout.Children.Add(new UILabel(14)
{
Text = offer.Headline,
TextColor = ColorHelper.FromHex(CoreTheme.COLOR_OFFERCELL_PRODUCT_TEXT),
FontFamily = CoreTheme.FONT_FAMILY_DEFAULT_BOLD,
WidthRequest = DeviceDisplaySettings.defaultwidth,
VerticalTextAlignment = TextAlignment.Center
});
contentStackLayout.Children.Add(new UILabel(14) {
Text = offer.LongRewardsMessage,
TextColor = ColorHelper.FromHex(CoreTheme.COLOR_DEAL_PAGE_LONG_REWARD_MESSAGE_RED),
FontFamily = CoreTheme.FONT_FAMILY_DEFAULT_BOLD,
WidthRequest = DeviceDisplaySettings.defaultwidth,
VerticalTextAlignment = TextAlignment.Center
});
if (!string.IsNullOrEmpty(offer.PowerMessage)) {
var htmlText = string.Format("<html><body style='color:#9b9b9b'>{0}</body></html>", offer.PowerMessage.Replace(#"\", string.Empty));
var browser = new WebView() {
//HeightRequest = (DeviceDisplaySettings.defaultheight > 600) ? 500 : 400,
HeightRequest = 800,
Source = new HtmlWebViewSource() { Html = htmlText },
};
browser.Navigating += OnNavigating;
contentStackLayout.Children.Add(browser);
}
var nestedStackLayout = new StackLayout()
{
VerticalOptions = LayoutOptions.FillAndExpand
};
nestedStackLayout.Children.Add(topStackLayout);
nestedStackLayout.Children.Add(timeRemainingLabel);
nestedStackLayout.Children.Add(contentStackLayout);
var mainScrollView = new ScrollView()
{
Padding = new Thickness(0, 0, 0, 10),
VerticalOptions = LayoutOptions.FillAndExpand,
Orientation = ScrollOrientation.Vertical,
Content = nestedStackLayout
};
var mainStackLayout = new StackLayout()
{
Spacing = 5,
Padding = new Thickness(0, 0, 0, 0),
VerticalOptions = LayoutOptions.Fill,
HorizontalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Vertical,
Children = { savedBtn, mainScrollView, redeemBtn }
};
return mainStackLayout;
}
private StackLayout SavedButtonLayout(bool isSelected, int offerid)
{
int buttonsToShow = 2;
bool displaySaveButton = true;
if (IsPremisesOffer (offerid)) {
buttonsToShow = 3;
displaySaveButton = false;
}
btnShare = new UIFieldDefinition(_pageFieldDefinition.ShareButtonDefinition);
btnShare.Text = "SHARE";
btnShare.ClassId = offerid.ToString();
btnShare.WidthRequest = (DeviceDisplaySettings.defaultwidth / buttonsToShow) - 40;
btnShare.BackgroundColor = Color.FromRgb(167, 188, 33);
btnShare.VerticalContentAlignment = TextAlignment.Center;
btnShare.HandleClick(btnShare_Clicked);
btnSave = new UIFieldDefinition(_pageFieldDefinition.SaveButtonDefinition);
btnSave.Text = isSelected ? "UNSAVE" : "SAVE";
btnSave.ClassId = offerid.ToString();
btnSave.WidthRequest = (DeviceDisplaySettings.defaultwidth / buttonsToShow) - 40;
btnSave.BackgroundColor = Color.FromRgb(167, 188, 33);
btnSave.VerticalContentAlignment = TextAlignment.Center;
btnSave.HandleClick(btnSave_Clicked);
rl = new StackLayout {
Spacing = 10,
Orientation = StackOrientation.Horizontal,
BackgroundColor = Color.FromRgb(196, 221, 57),
Padding = new Thickness(40, 5, 5, 5),
WidthRequest = DeviceDisplaySettings.defaultwidth
};
rl.Children.Add(btnShare);
if (displaySaveButton) rl.Children.Add(btnSave);
return rl;
}
public UIFieldDefinition RedeemBtnLayout(int offerid)
{
int buttonsToShow = 1;
btnRedeem = new UIFieldDefinition(_pageFieldDefinition.RedeemButtonDefinition);
btnRedeem.Text = "REDEEM NOW";
btnRedeem.ClassId = offerid.ToString();
btnRedeem.WidthRequest = (DeviceDisplaySettings.defaultwidth / buttonsToShow) - 10;
// btnRedeem.HorizontalOptions = LayoutOptions.FillAndExpand;
// btnRedeem.VerticalOptions = LayoutOptions.EndAndExpand;
btnRedeem.HandleClick(btnRedeem_Clicked);
return btnRedeem;
}
However, I am noticing that the Redeem button does not even display on the view (It's supposed to be fixed on the bottom).
The scrollview works but the buttom is missing. Why?
Please let me know if you need further code details.
Moving here from comments above. There are two separate issues from what I can tell, and as far as I can tell, are unrelated:
The WebView, nested inside the ScrollView, is not big enough to fully display the content.
The button that is supposed to be at the bottom of the screen is not displaying.
For both of them, the answer is probably in how you are setting HeightRequest. There have been a lot of suggestions by myself and other commenters to change or get rid of some of the HeightRequest settings, and I'm not sure of the current state of your source code. So assuming those are still there:
For solving the WebView issue, read How can I add HTML to a Stacklayout inside a Scrollview in Xamarin forms?. This will let you figure out the right HeightRequest to use. The short answer is that depending on exactly what you want to happen, you may need a custom renderer. Note that the HeightRequest for the WebView will not affect any layout outside of the ScrollView.
For solving the issue of the button not appearing, get rid of the HeightRequest setting on the ScrollView, and the VerticalOptions on the StackLayout created in SavedButtonLayout.
I am assuming you did the experiment suggested above to make sure that the redeemBtn will render if placed before the ScrollView, and it does show up then. If not, you first need to fix that.
If you have "fixed" this by changing the HeightRequest then your real problem is the fixed pixel size of all your views and layouts, I recommend you DON'T use fixed pixel sizes for different screen resolution this will be a bigger problem later, What you can do is get the Screen size and do the math to fit all your elements of the view, one way to get the width and height of the screen is on the OnSizeChanged event of Pages (Like ContentPage), something like this:
SizeChanged += SizeChanged;
void SizeChanged (object sender, EventArgs e)
{
Layout.WidthRequest = Width * 0.3;
Layout.HeightRequest = Height * 0.35;
}
Your layout is pretty busy. A few things:
Set VerticalOptions to EndAndExpand for redeemBtn.
Set VerticalOptions to StartAndExpand for savedBtn.
Set VerticalOptions to Fill for mainScrollView.
Set VerticalOptions to FillAndExpand for mainRelLayout.
Set VerticalOptions and HorizontalOptions to Fill for
mainStackLayout.
I think that will get you to where you want to be.
The options that include "Expand" will grow the element to accommodate the desired height of its contents.

WPF grid cells in C# no text

I need to show some data in a structured way with colored letters and rows with background colors.
I made a grid in a WPF Window. It shows the textboxes and some of the labels, but none of the text. Also the column header, last column, gridseperators, grid bot and left edges are invisible.
My grid is called propertiesView.
Code for adding header elements (labels)
private void AddHeaderElement(string text, int row, int col)
{
Label headerElement = new Label();
headerElement.Height = cellHeight;
headerElement.Width = cellWidth;
headerElement.DataContext = text;
headerElement.Background = headerBackground;
headerElement.BorderBrush = new SolidColorBrush(Color.FromRgb(120, 120, 120));
headerElement.BorderThickness = new Thickness(3);
propertiesView.Children.Add(headerElement);
Grid.SetRow(headerElement, row);
Grid.SetColumn(headerElement, col);
}
Code for adding cells
RichTextBox cell = new RichTextBox();
cell.Height = cellHeight;
cell.Width = cellWidth;
cell.ToolTip = toolTip;
cell.DataContext = text;
cell.Background = rowDifferent;
propertiesView.Children.Add(cell);
//box.SetValue(Grid.RowProperty, rowCount);
//box.SetValue(Grid.ColumnProperty, columnCount);
Grid.SetRow(cell, rowCount);
Grid.SetColumn(cell, columnCount);
Code for adding grid seperators
GridSplitter colSeperator = new GridSplitter();
colSeperator.Margin = new Thickness(-2.5, 0, 0, 0);
colSeperator.Width = 5;
colSeperator.ResizeDirection = GridResizeDirection.Columns;
colSeperator.ResizeBehavior = GridResizeBehavior.CurrentAndNext;
colSeperator.VerticalAlignment = VerticalAlignment.Stretch;
colSeperator.HorizontalAlignment = HorizontalAlignment.Left;
propertiesView.Children.Add(colSeperator);
Grid.SetColumn(colSeperator, 0);
Grid.SetRowSpan(colSeperator, totalRows + 1);
The tooltips do show the right text.
I tried using TextBox instead of RichTextBox and setting all this stuff in the class constructor instead of a seperate method.
Well it seems like you just never set the Content dependency property on your labels, or the Document of your RichTextBoxes.
For your labels, as you set the text parameter as the DataContext, you can just add something like
headerElement.SetBinding(Label.ContentProperty, new Binding());
Turns out I needed labels with textblocks, spans and runs.
Style can be added on the span (through properties like Foreground, TextDecoration or FontWeight). Add the text to the span inside a Run, then add all spans to a textblock, which is shown through a label.
Span span = new Span();
span.Foreground = Brushes.Black;
span.Inlines.Add(new Run("Text"));
textBlock.Inlines.Add(span);
Label cell = new Label();
cell.MinHeight = cellHeight;
cell.MaxWidth = cellWidth * 3;
cell.MinWidth = cellWidth;
cell.ToolTip = "toolTip";
cell.BorderThickness = new Thickness(2);
TextBlock cellText = new TextBlock();
cellText.HorizontalAlignment = HorizontalAlignment.Stretch;
cellText.TextWrapping = TextWrapping.WrapWithOverflow;
cell.Content = cellText;
The text works now, I should be able to get the gridseperators working.

Categories

Resources