I want a grid layout for displaying search results. The grids should have headlines Beneficial Owner, Commercial Operator and Registered Owner. The results should then be displayed under the right headline.
I am trying to achieve this layout:
But this is what i get:
My C#/SilverLight code:
// Create a 3 column grid
StackPanel deptStackPanel = new StackPanel();
deptStackPanel.Margin = new Thickness(10);
stackPanelSearchResults.Children.Add(deptStackPanel);
Grid.SetColumn(deptStackPanel, 3);
Grid.SetRow(deptStackPanel, 3);
// Add headlines for theese columns
TextBlock deptListHeadingBeneficialOwner = new TextBlock();
deptListHeadingBeneficialOwner.Text = "Beneficial Owner";
TextBlock deptListHeadingCommercialOperator = new TextBlock();
deptListHeadingCommercialOperator.Text = "Commercial Operator";
TextBlock deptListHeadingRegisteredOwnerName = new TextBlock();
deptListHeadingRegisteredOwnerName.Text = "Registered Owner";
deptStackPanel.Children.Add(deptListHeadingBeneficialOwner);
deptStackPanel.Children.Add(deptListHeadingCommercialOperator);
deptStackPanel.Children.Add(deptListHeadingRegisteredOwnerName);
Grid.SetColumn(deptListHeadingBeneficialOwner, 0);
Grid.SetColumn(deptListHeadingCommercialOperator, 1);
Grid.SetColumn(deptListHeadingRegisteredOwnerName, 2);
Add three grids inside the layout grid from your xaml file or from the back end. Put a stack panel inside that and then add the text blocks for your data. You are just adding text blocks one below the other.
I found the solution my self:
// Create the Grid
Grid myGrid = new Grid();
myGrid.Width = 400;
myGrid.Margin = new Thickness(9, 0, 0, 0);
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 second text cell to the Grid
TextBlock txtBeneficialOwner = new TextBlock();
txtBeneficialOwner.Text = "Beneficial Owner";
txtBeneficialOwner.FontWeight = FontWeights.Bold;
Grid.SetRow(txtBeneficialOwner, 0);
Grid.SetColumn(txtBeneficialOwner, 0);
// Add the third text cell to the Grid
TextBlock txtCommercialOperator = new TextBlock();
txtCommercialOperator.Text = "Commercial Operator";
txtCommercialOperator.FontWeight = FontWeights.Bold;
txtCommercialOperator.Margin = new Thickness(9, 0, 0, 4);
Grid.SetRow(txtCommercialOperator, 0);
Grid.SetColumn(txtCommercialOperator, 1);
// Add the fourth text cell to the Grid
TextBlock txtRegisteredOwnerName = new TextBlock();
txtRegisteredOwnerName.Text = "Registered Owner";
txtRegisteredOwnerName.FontWeight = FontWeights.Bold;
txtRegisteredOwnerName.Margin = new Thickness(9, 0, 0, 4);
Grid.SetRow(txtRegisteredOwnerName, 0);
Grid.SetColumn(txtRegisteredOwnerName, 2);
// Add the TextBlock elements to the Grid Children collection
myGrid.Children.Add(txtBeneficialOwner);
myGrid.Children.Add(txtCommercialOperator);
myGrid.Children.Add(txtRegisteredOwnerName);
stackPanelSearchResults.Children.Add(myGrid);
Related
I am trying to read an "ini" file and to create multiple radiobuttons depending on the number of the lines of this file. The code used is the following:
private void CreateRadioButtons(string filePath)
{
StackPanel mainStackPanel = new StackPanel();
mainStackPanel.Orientation = Orientation.Vertical;
mainStackPanel.HorizontalAlignment = HorizontalAlignment.Stretch;
mainStackPanel.VerticalAlignment = VerticalAlignment.Stretch;
var lines = File.ReadAllLines(filePath).Where(l => !l.StartsWith(";"));
WrapPanel wrapPanel = new WrapPanel();
wrapPanel.Margin = new Thickness(30);
ScrollViewer scrollViewer = new ScrollViewer();
Style style = new Style(typeof(RadioButton));
style.Setters.Add(new Setter(RadioButton.BackgroundProperty, Brushes.Yellow));
style.Setters.Add(new Setter(RadioButton.BorderThicknessProperty, new Thickness(2)));
ControlTemplate controlTemplate = new ControlTemplate(typeof(RadioButton));
FrameworkElementFactory border = new FrameworkElementFactory(typeof(Border));
border.SetValue(Border.BorderThicknessProperty, new TemplateBindingExtension(BorderThicknessProperty));
border.SetValue(Border.BorderBrushProperty, new TemplateBindingExtension(BorderBrushProperty));
border.SetValue(Border.BackgroundProperty, Brushes.Transparent);
border.SetValue(Border.CornerRadiusProperty, new CornerRadius(20));
border.SetValue(BorderBrushProperty, new SolidColorBrush(Colors.Blue));
border.SetValue(Border.BackgroundProperty, Brushes.Transparent);
FrameworkElementFactory image = new FrameworkElementFactory(typeof(Image));
image.SetValue(Image.SourceProperty, new BitmapImage(new Uri("pack://application:,,,/Resources/image.jpg")));
FrameworkElementFactory textBlock = new FrameworkElementFactory(typeof(TextBlock));
textBlock.Name = "TextBlock";
textBlock.SetValue(TextBlock.TextProperty, "Text");
textBlock.SetValue(TextBlock.MarginProperty, new Thickness(5));
FrameworkElementFactory secondaryStack = new FrameworkElementFactory(typeof(StackPanel));
secondaryStack.SetValue(StackPanel.OrientationProperty, Orientation.Vertical);
secondaryStack.SetValue(StackPanel.MarginProperty, new Thickness(5, 10, 5, 0));
secondaryStack.AppendChild(image);
secondaryStack.AppendChild(textBlock);
border.AppendChild(secondaryStack);
controlTemplate.VisualTree = border;
style.Setters.Add(new Setter(Control.TemplateProperty, controlTemplate));
Trigger trigger = new Trigger() { Property = RadioButton.IsCheckedProperty, Value = false };
trigger.Setters.Add(new Setter(UIElement.OpacityProperty, 0.5));
style.Triggers.Add(trigger);
FrameworkElementFactory label = new FrameworkElementFactory(typeof(Label));
foreach (var line in lines)
{
RadioButton radioButton = new RadioButton();
radioButton.Style = style;
radioButton.Width = 135;
radioButton.Height = 125;
radioButton.Margin = new Thickness(15, 0, 0, 15);
radioButton.Content = border;
wrapPanel.Children.Add(radioButton);
}
This code is functioning at the moment. The problem comes when i try to implement textblocks with dynamic text: I just need the text inside the radiobutton to be equal to the string line. I have tried multiple ways but in the end I only encounter exceptions about windowspresentation (which I think mean that the elements are presented in the wrong way). How can I make textBlock dynamic?
I'm preparing control to present some data. It is built in the following way:
-> ScrollViewer
--> StackPanel
---> Border
----> Grid
---> Border
----> Grid
...
---> Border
----> Grid
And there is my code for each item
public class PresenterItem : Border
{
// Variables
private Submission submission;
private int index;
private Grid grid = new Grid();
// Constructor
public PresenterItem(int i, Submission subm)
{
index = i;
submission = subm;
Child = grid;
Background = Global.GET_BRUSH("ItemBackground");
CornerRadius = new CornerRadius(5);
Margin = new Thickness(0, 0, 0, 10);
Padding = new Thickness(5);
grid.ShowGridLines = true;
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(40, GridUnitType.Pixel) });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(40, GridUnitType.Pixel) });
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(30, GridUnitType.Pixel) });
grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
InsertContent();
}
private Label CreateLabel(int row, int column, string content, int columnSpan = 1)
{
Label newLabel = new Label();
newLabel.Content = content;
Grid.SetRow(newLabel, row);
Grid.SetColumn(newLabel, column);
Grid.SetColumnSpan(newLabel, columnSpan);
grid.Children.Add(newLabel);
return newLabel;
}
private TextBlock CreateTextBlock(int row, int column, int columnSpan = 1)
{
TextBlock newTextBlock = new TextBlock();
newTextBlock.Foreground = Brushes.Silver;
Grid.SetRow(newTextBlock, row);
Grid.SetColumn(newTextBlock, column);
Grid.SetColumnSpan(newTextBlock, columnSpan);
grid.Children.Add(newTextBlock);
return newTextBlock;
}
private void InsertContent()
{
// Number
Label number = CreateLabel(0, 0, $"#{index + 1}");
number.HorizontalAlignment = HorizontalAlignment.Center;
number.VerticalAlignment = VerticalAlignment.Center;
number.FontSize = 17;
// Header
Label header = CreateLabel(0, 1, $"{submission.Name} ({submission.Rank})");
header.Foreground = Global.GET_BRUSH("HeaderForeground");
header.HorizontalAlignment = HorizontalAlignment.Left;
header.VerticalAlignment = VerticalAlignment.Center;
header.FontSize = 17;
// Timestamp
TextBlock timestamp = CreateTextBlock(0, 2);
timestamp.Inlines.Add(new Run("Timestamp"));
timestamp.Inlines.Add(new Run($"{submission.Timestamp}") { Foreground = Global.GET_BRUSH("HeaderForeground") });
timestamp.HorizontalAlignment = HorizontalAlignment.Right;
timestamp.VerticalAlignment = VerticalAlignment.Center;
timestamp.FontSize = 13.5;
// Range
TextBlock range = CreateTextBlock(1, 1);
range.Inlines.Add(new Run("Some text "));
range.Inlines.Add(new Run($"{submission.Range.ToStringWithDayNames()}") { Foreground = Global.GET_BRUSH("HeaderForeground") });
range.HorizontalAlignment = HorizontalAlignment.Left;
range.VerticalAlignment = VerticalAlignment.Center;
range.Margin = new Thickness(5, 0, 0, 0);
range.FontSize = 13.5;
// Conflict
Label conflict = CreateLabel(1, 2, "Nie wykryto konfliktu");
conflict.Foreground = Global.GET_BRUSH("GreenForeground");
conflict.HorizontalAlignment = HorizontalAlignment.Right;
conflict.VerticalAlignment = VerticalAlignment.Center;
conflict.FontSize = 13.5;
// Content
TextBlock content = CreateTextBlock(2, 1, 2);
content.Inlines.Add(new Run($"{submission.Content}"));
cotent.HorizontalAlignment = HorizontalAlignment.Left;
content.VerticalAlignment = VerticalAlignment.Top;
content.Margin = new Thickness(5, 0, 0, 0);
content.TextWrapping = TextWrapping.WrapWithOverflow;
content.FontSize = 13.5;
}
How it looks like
It perfectly works but when I added last TextBlock whole control is stretching to the right. In designer the same way of creating elements works, but in code no. What am I doing wrong?
I would like to achieve this effect with column 1 and 2 with the same width everywhere.
What I want
You have to set the dependency property Grid.IsSharedSizeScope to true in the StackPanel and then set the Property SharedSizeGroup for every ColumnDefinition to a string that definies the group with same size.
I dealt with this problem on my own. If someone will be having the same problem like me, I will write how to repair it.
In the place where my app initializes ScrollViewer I set property HorizontalScrollBarVisibility to Hidden. After setting this property to Disabled everything starts to work correctly.
There is something about this:
https://crmdev.wordpress.com/2010/01/16/how-to-deal-with-stubborn-silverlight-a-k-a-stubborn-me/
I'm setting up an Xamarin.Forms app where i am trying to add a "Module", saving it in a list and then visualizing it on Android via grid cells.
The problem is within the visualization. The problem is that i am trying to add multiple children to the same grid cell, but they are overlaying with each other.
public void CreateModuleGrids()
{
foreach (Module item in _mm.ModulesList)
{
gOut.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(100) });
gOut.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });
gOut.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });
Label lblBez = new Label();
lblBez.Text = item.Name.ToString();
lblBez.VerticalOptions = LayoutOptions.Center;
lblBez.HorizontalOptions = LayoutOptions.Center;
lblBez.WidthRequest = 151;
lblBez.HeightRequest = 25;
Label lblStatus = new Label();
lblStatus.WidthRequest = 151;
lblStatus.HeightRequest = 25;
if (item.Type == "blind")
{
lblStatus.Text = "100 %";
lblStatus.VerticalOptions = LayoutOptions.Center;
lblStatus.HorizontalOptions = LayoutOptions.Center;
}
else
{
lblStatus.Text = "Closed";
lblStatus.VerticalOptions = LayoutOptions.Center;
lblStatus.HorizontalOptions = LayoutOptions.Center;
}
if (item.Type == "blind")
{
bmp100.WidthRequest = (119);
bmp100.HeightRequest = (117);
bmp100.Aspect = Aspect.AspectFit;
bmp100.VerticalOptions = LayoutOptions.Center;
bmp100.HorizontalOptions = LayoutOptions.Center;
gOut.Children.Add(bmp100, 0, 0);
}
else
{
bmpClosed.WidthRequest = (119);
bmpClosed.HeightRequest = (117);
gOut.Children.Add(bmpClosed, 0, 0);
}
if (item.Type == "blind")
{
ImageButton btnArrowUp = new ImageButton();
btnArrowUp.WidthRequest = 37;
btnArrowUp.HeightRequest = 50;
btnArrowUp.Source = "ArrowUp.png";
btnArrowUp.Aspect = Aspect.AspectFit;
btnArrowUp.VerticalOptions = LayoutOptions.Start;
btnArrowUp.HorizontalOptions = LayoutOptions.Start;
btnArrowUp.Clicked += new EventHandler(this.btnArrowUp_click);
ImageButton btnArrowDown = new ImageButton();
btnArrowDown.WidthRequest = 37;
btnArrowDown.HeightRequest = 50;
btnArrowDown.Source = "ArrowDown.png";
btnArrowDown.Aspect = Aspect.AspectFit;
btnArrowDown.VerticalOptions = LayoutOptions.End;
btnArrowDown.HorizontalOptions = LayoutOptions.End;
btnArrowDown.Clicked += new EventHandler(this.btnArrowDown_click);
gOut.Children.Add(lblBez, 0, 0);
gOut.Children.Add(lblStatus, 0, 0);
gOut.Children.Add(btnArrowDown, 0, 0);
gOut.Children.Add(btnArrowUp, 0, 0);
}
else
{
ImageButton btnOut = new ImageButton();
btnOut.Measure(37, 50);
btnOut.Source = "ArrowLeft.png";
btnOut.Clicked += new EventHandler(this.btnTipOpen_click);
ImageButton btnIn = new ImageButton();
btnIn.Measure(37, 50);
btnIn.Source = "ArrowRight.png";
btnIn.Clicked += new EventHandler(this.btnTipClose_click);
gOut.Children.Add(lblBez, 0, 0);
gOut.Children.Add(lblStatus, 0, 0);
gOut.Children.Add(btnIn, 0, 0);
gOut.Children.Add(btnOut, 0, 0);
}
}
My expectation is having a grid instance that contains a label with the name of the module on the upper part, an imagebutton on the left side, an imagebutton on the right side, an image in the center and last a label under the image that shows the status. Thanks in advance!
The problem is that i am trying to add multiple children to the same
grid cell, but they are overlaying with each other.
The items are overlaying with each other because you add them to the same position in Grid.
To place views in a Grid you'll need to add them as children to the grid, then specify which row and column they belong in.
The last two parameter in function grid.Children.Add specify the position of the item in Grid. For example, there is a Grid with two rows and two Columns, then (0,0) means top left, and (1,1) means bottom right.
// left, top
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 1, 0);
grid.Children.Add(bottomLeft, 0, 1);
grid.Children.Add(bottomRight, 1, 1);
Back to your code, you add all your elements to (0,0), so they will appear in the same position.
gOut.Children.Add(lblBez, 0, 0);
gOut.Children.Add(lblStatus, 0, 0);
gOut.Children.Add(btnIn, 0, 0);
gOut.Children.Add(btnOut, 0, 0);
Another problem in your code is you need a Layout container(Like stacklayout or other layouts) as Jason said to manage your elements. Because you create them in a foreach loop, and in each loop you add the same thing with same position to the gOut.
I think the RIGHT way is create a Grid with your labels and imageButtons with right position in each loop.Then add this Grid to a Layout container(This layout container is use to layout the Grid created in each loop). At last, set this layout container as ContentPage's content, Content = layout container to display your elements.
Have a look at this document may help you and there is also a sample there.
I have a grid with rowdefinitions
RowDefinition rd0 = new RowDefinition();
rd0.Height = new GridLength(1, GridUnitType.Auto);
RowDefinition rd1 = new RowDefinition();
rd1.Height = new GridLength(1, GridUnitType.Star);
RowDefinition rd2 = new RowDefinition();
rd2.Height = new GridLength(1, GridUnitType.Auto);
grdMain.RowDefinitions.Add(rd0);
grdMain.GetGrdPlugins().RowDefinitions.Add(rd1);
grdMain.GetGrdPlugins().RowDefinitions.Add(rd2);
now in the first row I add a textblock
var tbxTitle = new TextBlock(){};
Grid.SetRow(tbxTitle, 0);
grdMain.Children.Add(tbxTitle);
in the third a stack panel of buttons
StackPanel spButtons = new StackPanel() { Orientation = Orientation.Horizontal, HorizontalAlignment = HorizontalAlignment.Center, };
grdMain.Children.Add(spButtons);
Grid.SetRow(spButtons, 2);
...
in the second a stackpanel.
Now I want an event to be called all the times the grid changes in size:
var spMatrix_Volatile = new StackPanel() { HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Stretch, Background = Brushes.RosyBrown};
spMatrix_Volatile.SizeChanged += (sender, args) =>
{
Console.Beep();
double dHeight = spMatrix_Volatile.ActualHeight;
CreateCellMatrix(out strResult, ref spMatrix_Volatile, false, dHeight);
};
Grid.SetRow(spMatrix_Volatile, 1);
grdMain.Children.Add(spMatrix_Volatile);
now the peculiar thing is that the size changed event is called all the times the height of the grid is increased but never when decreased.
Thank you
That happens to me as well using your code.
I have therefore put the stackpanel in a grid and that didn't happen anymore.
That is the event is fired both when increasing and decreasing.
I am working on c# silverlight. I have to color(Green) the particular column which is created using c#.
I have grid with 6 rows and 3 columns like this:
Grid myGrid = new Grid();
myGrid.Width = 350;
myGrid.Height = 280;
myGrid.HorizontalAlignment = HorizontalAlignment.Left;
myGrid.VerticalAlignment = VerticalAlignment.Top;
myGrid.ShowGridLines = false;
ColumnDefinition colDef1 = new ColumnDefinition();
ColumnDefinition colDef2 = new ColumnDefinition();
ColumnDefinition colDef3 = new ColumnDefinition();
myGrid.ColumnDefinitions.Add(colDef1);
myGrid.ColumnDefinitions.Add(colDef2);
myGrid.ColumnDefinitions.Add(colDef3);
RowDefinition rowDef1 = new RowDefinition();
RowDefinition rowDef2 = new RowDefinition();
RowDefinition rowDef3 = new RowDefinition();
RowDefinition rowDef4 = new RowDefinition();
RowDefinition rowDef5 = new RowDefinition();
RowDefinition rowDef6 = new RowDefinition();
myGrid.RowDefinitions.Add(rowDef1);
myGrid.RowDefinitions.Add(rowDef2);
myGrid.RowDefinitions.Add(rowDef3);
myGrid.RowDefinitions.Add(rowDef4);
myGrid.RowDefinitions.Add(rowDef5);
myGrid.RowDefinitions.Add(rowDef6);
Now if i have to color second full row(i mean in 3 columns in this row as well) of this grid then how i will do this ?
var greenBackgroundBorder = new Border(){
Background=new SolidColorBrush(Colors.Green)};
myGrid.Children.Add(greenBackgroundBorder);
// stay always behind other elements
Canvas.SetZOder(greenBackgroundBorder, -100);
//entire second row
Grid.SetColumnSpan(greenBackgroundBorder,3);
Grid.SetRow(greenBackgroundBorder, 1 );