i am using a for loop to add 198 items, half numbers and half images for an app just to get familiar with xamarin forms but am unable to switch from vertical to horizontal. the desired output is to have 4 images with their serial number in one line.
EDIT: i am unable to get it to display in multiple lines
Image[] show = new Image[100];
for(int i=0;i<100;i++)
{
show[i]=new Image{ Aspect = Aspect.AspectFit };
show[i].WidthRequest = 30;
show[i].HeightRequest = 30;
show[i].Source = images[i];
}
for (int i=0;i<99;i++)
{
if (i % 4 == 0)
{
layout.HorizontalOptions = LayoutOptions.Start;
layout.Spacing = 15;
layout.Orientation = StackOrientation.Vertical;
layout.Children.Add(new Label { Text = (i+1).ToString() });
layout.Spacing = 10;
layout.Children.Add(show[i]);
}
else
{
layout.HorizontalOptions = LayoutOptions.StartAndExpand;
layout.Spacing = 10;
layout.Orientation = StackOrientation.Horizontal;
layout.Children.Add(new Label { Text = (i+1).ToString() });
layout.Children.Add(show[i]);
}
}
This is the current outputOutput
I would recommend using a grid, but to use layouts you would need something more like this:
var outerLayout = new StackLayout {Orientation = StackOrientation.Vertical};
var innerLayout = new StackLayout();
for (int i = 0; i < 99; i++)
{
if (i%4 == 0)
{
if (i != 0)
outerLayout.Children.Add(innerLayout);
innerLayout = new StackLayout {Orientation = StackOrientation.Horizontal};
}
innerLayout.Children.Add(new Label { Text = (i + 1).ToString() });
innerLayout..Children.Add(show[i]);
}
outerLayout.Children.Add(innerLayout);
MainPage = new ContentPage {Content = outerLayout};
This creates an outer vertical layout to hold all the horizontal layouts, then creates a horizontal layout for each group that you want displayed horizontally.
Related
I tried to decrease space between space between columns and also wanted to decrease width of columns, but I was only able to adjust width of columns not space between columns.
please help for solution. I really appreciate the effort.
Code snap: `
for (int i = 0; i < dss.Tables[1].Rows.Count; i++)
{
yValues[i] = Convert.ToDouble(dss.Tables[1].Rows[i]["admission"].ToString());
if (isDateRange == 1)
{
xValues[i] = dss.Tables[1].Rows[i]["mth"].ToString().Substring(0, dss.Tables[1].Rows[i]["mth"].ToString().IndexOf(" "));
}
else
{
xValues[i] = dss.Tables[1].Rows[i]["mth"].ToString();
}
zValues[i] = Convert.ToDouble(dss.Tables[1].Rows[i]["readmission"].ToString());
}
chart1.Series[0].Points.DataBindXY(xValues, yValues);
chart1.Series[0].ToolTip = "#AXISLABEL: #VALY";
chart1.Series[0]["PieLabelStyle"] = "Outside";
chart1.Series[0]["PieDrawingStyle"] = "Concave";
chart1.Series[1].Points.DataBindXY(xValues, zValues);
chart1.Series[1].ToolTip = "#AXISLABEL: #VALY";
var chartArea_chart1 = chart1.ChartAreas[chart1.Series[0].ChartArea];
// enable autoscroll
chartArea_chart1.CursorY.AutoScroll = true;
// let's zoom to [0,blockSize] (e.g. [0,100])
chartArea_chart1.AxisX.ScaleView.Zoomable = true;
chartArea_chart1.AxisX.ScaleView.SizeType = DateTimeIntervalType.Number;
//chartArea_chart1.AxisY.ScaleView.Zoomable = true;
//chartArea_chart1.AxisY.ScaleView.SizeType = DateTimeIntervalType.Auto;
//chart1.Series[0].CustomProperties ="PixelPointWidth = 10";
//chart1.Series[0].CustomProperties = "PointWidth = 0.1";
int position = 0;
int size = 30;
chartArea_chart1.AxisX.ScaleView.Zoom(position, size);
// disable zoom-reset button (only scrollbar's arrows are available)
chartArea_chart1.AxisX.ScrollBar.ButtonStyle = ScrollBarButtonStyles.SmallScroll;`
EDIT:
Okay so for clarity I will improve my information a bit more:
I have a TableLayoutView (I will call this tlv) that has 5 fixed columns, and x + 2 rows. The first row of tlv contains labels in each cell for header purposes. I dynamically add more rows onto tlv and so that it why it has a variable amount of rows (plus the initial header row which is never removed).
As another tiny small complication, I also keep an empty row entry at the bottom of tlv which I must keep because I use it for other functionality.
To visualise what I have just said, this is an example of tlv consisting with 4 entries (numbered), the header row (H's) and the placeholder row (P's).
HHHHH
11111
22222
33333
44444
PPPPP
I want to go from that, to say, if I wanted to swap entry 2 and 3 the output would be:
HHHHH
11111
33333
22222
44444
PPPPP
The code I have so far is as follows:
for (int j = 0; j < 5; j++)
{
TableLayoutPanelCellPosition tablePosition1 = new
TableLayoutPanelCellPosition(j, rowIndex + 1);
Control moveControl1 = queuedFiles.GetControlFromPosition(j, rowIndex);
queuedFiles.SetCellPosition(moveControl1, tablePosition1);
TableLayoutPanelCellPosition tablePosition2 = new
TableLayoutPanelCellPosition(j, rowIndex);
Control moveControl2 = queuedFiles.GetControlFromPosition(j, rowIndex + 1);
queuedFiles.SetCellPosition(moveControl2, tablePosition2);
if (j.Equals(0))
{
moveControl1.Text = (rowIndex + 1).ToString();
moveControl2.Text = (rowIndex).ToString();
}
}
However this code doesn't work and for the example above it produces:
HHHHH
11111
33222
22333
44444
PPPPP
What I believe is happening is tlv is automatically organising it's contents itself during the process of moving them around (maybe to fill vacant spaces?).
rowIndex above is the index of the target row which must be swapped with the row below it. I don't need to worry about checking if there is only 1 row or if it is the last row because I have done that already. Ignore changing the text too, I just need a pointer as to how I can achieve the intended result!
Thank you for absolutely any help you can give :)
The following code does the job:
Code
using System;
using System.Linq;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
// some content
var panel = new TableLayoutPanel
{
Dock = DockStyle.Fill,
ColumnCount = 5,
RowCount = 2
};
for (var y = 0; y < 2; y++)
for (var x = 0; x < 5; x++)
{
var control = new Button {Text = $#"X = {x}, Y = {y}"};
panel.Controls.Add(control, x, y);
}
// swap button
var button = new Button
{
Dock = DockStyle.Fill,
Text = #"Clicky !"
};
button.Click += (o, args) =>
{
var dictionary = panel.Controls
.Cast<Control>()
.ToDictionary(k => k, v => panel.GetCellPosition(v));
foreach (var pair in dictionary)
{
var position = pair.Value;
position.Row ^= 1; // simple row swap
panel.SetCellPosition(pair.Key, position);
}
};
// add to form
var container = new SplitContainer
{
Dock = DockStyle.Fill,
Orientation = Orientation.Horizontal,
SplitterWidth = 5,
BorderStyle = BorderStyle.Fixed3D
};
container.Panel1.Controls.Add(panel);
container.Panel2.Controls.Add(button);
Controls.Add(container);
}
}
}
Before
After
Note
Next time you ask a question, post a Minimal, Complete, and Verifiable example to maximize your chances of getting an answer !
As on why your code didn't work, see previous sentence, e.g what was rowIndex etc ?
Edit
using System;
using System.Drawing;
using System.Linq;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
const int cols = 5;
const int rows = 6;
// setup layout
var tlp = new TableLayoutPanel
{
ColumnCount = cols,
RowCount = rows,
Dock = DockStyle.Fill,
GrowStyle = TableLayoutPanelGrowStyle.FixedSize
};
for (var i = 0; i < cols; i++)
tlp.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 100.0f / cols));
// add header
var label = new Label
{
Text = #"My Header",
BackColor = Color.Red,
Dock = DockStyle.Fill,
TextAlign = ContentAlignment.MiddleCenter
};
tlp.Controls.Add(label);
tlp.SetColumn(label, 0);
tlp.SetRow(label, 0);
tlp.SetColumnSpan(label, cols);
// add some cells
var yMin = 1;
var yMax = 5;
var xMin = 0;
var xMax = cols;
for (var y = yMin; y < yMax; y++)
for (var x = xMin; x < xMax; x++)
{
var color = Color.FromArgb(
255 / (xMax - xMin) * (x - xMin),
128,
255 / (yMax - yMin) * (y - yMin)
);
var label1 = new Label
{
Text = $#"X = {x}, Y = {y}",
BackColor = color,
ForeColor = Color.White,
Dock = DockStyle.Fill,
TextAlign = ContentAlignment.MiddleCenter,
Margin = DefaultMargin
};
tlp.Controls.Add(label1, x, y);
}
// add swapper
var button = new Button
{
Text = #"Clicky !",
Dock = DockStyle.Fill
};
button.Click += (o, args) =>
{
var srcRow = 2;
var tgtRow = 3;
var controls = tlp.Controls.Cast<Control>().ToArray();
var array1 = controls.Where(s => tlp.GetRow(s) == srcRow).ToArray();
var array2 = controls.Where(s => tlp.GetRow(s) == tgtRow).ToArray();
foreach (var control in array1)
tlp.SetCellPosition(control, new TableLayoutPanelCellPosition(tlp.GetColumn(control), tgtRow));
foreach (var control in array2)
tlp.SetCellPosition(control, new TableLayoutPanelCellPosition(tlp.GetColumn(control), srcRow));
};
// pack things up
var sc = new SplitContainer
{
Orientation = Orientation.Horizontal,
BorderStyle = BorderStyle.Fixed3D,
Dock = DockStyle.Fill
};
sc.Panel1.Controls.Add(tlp);
sc.Panel2.Controls.Add(button);
Controls.Add(sc);
}
}
}
What would be the best way to go about re-creating a view like iOS' UICollectionView in Xamarin.Forms? I need it to be cross platform. The two options i thought of right off the bat are using Xamarin.Forms.Grid, and Xamarin.Forms.Listview (Customizing the cells to have 3 "Columns"). Any other ideas or input? This is going to be used for an image gallery by the way.
Thanks
You can use the following code to use the RelativeLayout to behave like a StackPanel
public class MyContentPage : ContentPage
{
public MyContentPage()
{
var layout = new RelativeLayout();
var box1 = new ContentView
{
BackgroundColor = Color.Gray,
Content = new Label
{
Text = "0"
}
};
double padding = 10;
layout.Children.Add( box1, () => new Rectangle(((layout.Width + padding) % 60) / 2, padding, 50, 50));
var last = box1;
for (int i = 0; i < 200; i++)
{
var relativeTo = last; // local copy
var box = new ContentView
{
BackgroundColor = Color.Gray,
Content = new Label
{
Text = (i + 1).ToString()
}
};
Func<View, bool> pastBounds = view => relativeTo.Bounds.Right + padding + view.Width > layout.Width;
layout.Children.Add(box, () => new Rectangle(pastBounds(relativeTo) ? box1.X : relativeTo.Bounds.Right + padding,
pastBounds(relativeTo) ? relativeTo.Bounds.Bottom + padding : relativeTo.Y,
relativeTo.Width,
relativeTo.Height));
last = box;
}
Content = new ScrollView { Content = layout, Padding = new Thickness(6) };
}
}
I am adding various dynamically created controls to a panel, based on what the user selects. If a Groupbox, with associated RadioButtons, is the first control, it looks fine:
...but if it's anything other than that, the associated radio buttons seem right-aligned instead of left-aligned, as seen above, and the groupbox is too wide, to boot.
Here is the pertinent code (RepaintMockupPanel() is called when the user opts to see what his mockup looks like at any time, and getGroupBox() is the method it calls that should be where the problem lies, but I can't see it.
private void RepaintMockupPanel(Control padre)
{
const string BTN = "BUTTON";
const string CKBX = "CHECKBOX";
const string EDTTXT = "EDITTEXT";
const string RADGRP = "RADIOGROUP";
const string SPNR = "SPINNER";
const string TXTVU = "TEXTVIEW";
const int LEFT_STARTING_POINT = 4;
const int STANDARD_PADDING = 4;
int currentLeft = LEFT_STARTING_POINT;
string currentSel;
string currentSettings;
ComboBox cmbx;
Label lbl;
try
{
TabPage tp = padre as TabPage;
string panelName = tp.Name.Replace("tabPage", "panel");
Panel p = tp.Controls[panelName] as Panel;
p.Controls.Clear();
for (int i = 0; i < p.Controls.Count; i++)
{
p.Controls[i].Dispose();
}
//cmbxRow0Element0 and lblRow0Element0 to cmbxRow11Element5 and lblRow11Element5
int rowNum = getRowNum(panelName);
for (int i = 0; i < WIDGETS_PER_TABPAGE; i++)
{
cmbx = tp.Controls[string.Format("cmbxRow{0}Element{1}", rowNum, i)] as ComboBox;
lbl = tp.Controls[string.Format("lblRow{0}Element{1}", rowNum, i)] as Label;
if (cmbx.SelectedIndex < 0) continue;
currentSel = cmbx.SelectedItem.ToString().ToUpper();
currentSettings = lbl.Text;
// Possible vals (Android on left, Windows equivalents on the right:
//Button ""
//CheckBox ""
//EditText TextBox
//RadioGroup GroupBox (w. RadioButtons nested within)
//Spinner ComboBox
//TextView Label
if ((currentSel.Length > 0) && (currentSettings.Length > 0))
{
if (currentSel.Equals(BTN))
{
Button btn = getButton(currentSettings, currentLeft);
p.Controls.Add(btn);
currentLeft += btn.Width + STANDARD_PADDING;
}
else if (currentSel.Equals(CKBX))
{
CheckBox ckbx = getCheckBox(currentSettings, currentLeft);
p.Controls.Add(ckbx);
currentLeft += ckbx.Width + STANDARD_PADDING;
}
else if (currentSel.Equals(EDTTXT))
{
TextBox txtbx = getTextBox(currentSettings, currentLeft);
p.Controls.Add(txtbx);
currentLeft += txtbx.Width + STANDARD_PADDING;
}
else if (currentSel.Equals(RADGRP))
{
GroupBox grpbx = getGroupBox(currentSettings, currentLeft);
p.Controls.Add(grpbx);
currentLeft += grpbx.Width + STANDARD_PADDING;
}
else if (currentSel.Equals(SPNR))
{
ComboBox cmbxDyn = getComboBox(currentSettings, currentLeft);
p.Controls.Add(cmbxDyn);
currentLeft += cmbxDyn.Width + STANDARD_PADDING;
}
else if (currentSel.Equals(TXTVU))
{
Label lblDyn = getLabel(currentSettings, currentLeft);
p.Controls.Add(lblDyn);
currentLeft += lblDyn.Width + STANDARD_PADDING;
}
}
}
}
catch (Exception ex)
{
MessageBox.Show(ex.ToString());
}
}
private GroupBox getGroupBox(string currentSettings, int curLeftVal)
{
// "apple~orange~peach~True (must look for "enclose group in a black box" as the last val (ignore for the quick-and-dirty mockup, though))
// Adapted from Pierre's answer at http://stackoverflow.com/questions/23944419/why-is-only-the-first-radiobutton-being-added-to-the-groupbox
IList<string> grpbxVals = new List<string>(currentSettings.Split('~'));
GroupBox gb = new GroupBox { Height = 60, Location = new Point(curLeftVal, 0) };
gb.AutoSize = true;
int radButtonYVal = 0;
for (int i = 0; i < grpbxVals.Count() - 1; i++)
{
//gb.Controls.Add(new RadioButton { Text = grpbxVals[i], Location = new Point(curLeftVal, radButtonPosition) });
gb.Controls.Add(new RadioButton { Text = grpbxVals[i], Location = new Point(gb.Location.X+2, radButtonYVal) });
radButtonYVal += new RadioButton().Height;
}
return gb;
}
The getGroupBox() method is INDEED where the issue lies.
As a Container, GroupBox has its own canvas upon which its child controls are drawn, so when you create a control with an X value of 5, it means it's 5 from the left of the GroupBox, NOT from the left of the form. It's absolute value on the form would be it's own X value (say in this case 5) plus the X value of the GroupBox (which we'll assume has a Left value of 25) for an absolute positon of being 30 from the Left.
This is why your example shows the radio buttons pushed over so far: if you examine the distance between the left edge of the RadioButtons in relation to the left edge of their containing GroupBox, it should be about the same distance as the left edge of the GroupBox from the left edge of ITS container.
Why not use a TableLayoutPanel or FlowLayoutPanel to automatically position the controls, you can insert with fill dock the GroupBox.
Then you just need to add the controls to ... LayoutPanel and positioned automatically.
You have several options to control the rows and / or columns of the TableLayoutPanel
And as other controls to control flow into the FlowLayoutPanel
Here a example using layout panel, place a Button docked Top, and a empty TabControl docked Fill, and try this code
private void button1_Click(object sender, EventArgs e)
{
for (int t = 0; t < 4;t++ )
tabControl1.TabPages.Add(CreateTabPage(t));
}
private TabPage CreateTabPage(int t)
{
TabPage result = new TabPage()
{
Text=string.Format("TabPage {0}",t)
};
FlowLayoutPanel flp = new FlowLayoutPanel()
{
Dock = DockStyle.Fill,
AutoScroll = true,
};
for (int i = 0; i < 10; i++)
{
flp.Controls.Add(CreateGroupBox(i));
}
result.Controls.Add(flp);
return result;
}
private Control CreateGroupBox(int i)
{
GroupBox result = new GroupBox()
{
Text = string.Format("GroupBox {0}", i),
Width = 150,
Height = 100
};
FlowLayoutPanel flp = new FlowLayoutPanel()
{
Dock = DockStyle.Fill,
WrapContents = false,
AutoScroll = true,
FlowDirection=FlowDirection.TopDown
};
CreateRadios(flp, i);
result.Controls.Add(flp);
return result;
}
private void CreateRadios(FlowLayoutPanel flp, int i)
{
for (int c = 0; c < 10; c++) {
flp.Controls.Add(new RadioButton()
{
Text = string.Format("RadioButton {0} in {1}", c, i)
});
}
}
Tricycle Omnivore was right; this works:
int radButtonYVal = 4;
int leftVal = 4;
for (int i = 0; i < grpbxVals.Count() - 1; i++)
{
gb.Controls.Add(new RadioButton { Text = grpbxVals[i], AutoSize = true, Location = new Point(leftVal, radButtonYVal) });
radButtonYVal += new RadioButton().Height -4; // the "-4" is a kludge to scrunch the radiobuttons together a bit
}
I'd like to know how could I change the color of the date time axis of my d3 chartplotter.
The color that I want to change is the brown color and the white background color between the two bars.
If i do that :
It only changes the thing above the first brown bar.
Is it possible to change the color of these two bars ?
Curiously, I've happened to be trying to do the same thing. It turns out those colours are hard-coded in MayorDateTimeLabelProvider.cs (I've noted the lines in comments below). If you're using the compiled DLL then there is no way to change the values. Personally, D3 is so immature that I keep my own build of it and make changes to extend it as needed (such as in this case!).
public override UIElement[] CreateLabels(ITicksInfo<DateTime> ticksInfo)
{
object info = ticksInfo.Info;
var ticks = ticksInfo.Ticks;
UIElement[] res = new UIElement[ticks.Length - 1];
int labelsNum = 3;
if (info is DifferenceIn)
{
DifferenceIn diff = (DifferenceIn)info;
DateFormat = GetDateFormat(diff);
}
else if (info is MayorLabelsInfo)
{
MayorLabelsInfo mInfo = (MayorLabelsInfo)info;
DifferenceIn diff = (DifferenceIn)mInfo.Info;
DateFormat = GetDateFormat(diff);
labelsNum = mInfo.MayorLabelsCount + 1;
//DebugVerify.Is(labelsNum < 100);
}
DebugVerify.Is(ticks.Length < 10);
LabelTickInfo<DateTime> tickInfo = new LabelTickInfo<DateTime>();
for (int i = 0; i < ticks.Length - 1; i++)
{
tickInfo.Info = info;
tickInfo.Tick = ticks[i];
string tickText = GetString(tickInfo);
Grid grid = new Grid
{
Background = Brushes.Beige // **** HARD CODED HERE
};
Rectangle rect = new Rectangle
{
Stroke = Brushes.Peru, // **** AND HERE
StrokeThickness = 2
};
Grid.SetColumn(rect, 0);
Grid.SetColumnSpan(rect, labelsNum);
for (int j = 0; j < labelsNum; j++)
{
grid.ColumnDefinitions.Add(new ColumnDefinition());
}
grid.Children.Add(rect);
for (int j = 0; j < labelsNum; j++)
{
var tb = new TextBlock
{
Text = tickText,
HorizontalAlignment = HorizontalAlignment.Center,
Margin = new Thickness(0, 3, 0, 3)
};
Grid.SetColumn(tb, j);
grid.Children.Add(tb);
}
ApplyCustomView(tickInfo, grid);
res[i] = grid;
}
return res;
}