How to add a Controls.Grid in a Canvas - c#

I would like add a Grid in a Canvas and put inside a Rectangle.
Here my code
Grid gridForModules = new Grid();
Canvas.SetLeft(gridForModules, 600);
Canvas.SetTop(gridForModules, 80);
AddRowsOfGrid(gridForModules, 5);
AddColumnsOfGrid(gridForModules, 8);
gridForModules.ShowGridLines = true;
m_grid.RegisterName("ModulesGRID", gridForModules);
m_canvas.Children.Add(gridForModules);
Rectangle rect = new Rectangle();
Grid.SetColumn(rect, 2);
Grid.SetRow(rect, 2);
Grid.SetRowSpan(rect, 2);
Grid.SetColumnSpan(rect, 2);
rect.Fill = new SolidColorBrush(Colors.Coral);
rect.Name = "ModuloEsempio";
gridForModules.Children.Add(rect);
m_grid.RegisterName(rect.Name, rect);
Thanks

You specify that the columns/rows of the Grid should be equally wide/high by setting new GridLength(1.0, GridUnitType.Star) on both. So if you have 5 rows then the height of each row should be the height of the Grid divided by 5.
The problem in your code is that the Grid doesn't have a height or width because the Canvas is just a drawing board that doesn't size its contents.
To solve your problem you either have to set the size on the Grid using
gridForModules.Width = 300;
gridForModules.Height = 200;
or you have to set it in the Column/RowDefinitions
col.Width = new GridLength(30);
row.Height = new GridLength(30);
After that you should see your Grid and your Rectangle (if you look a bit far to the right).

Related

How can I resize the width and height of a UserControl according to a child Label?

I'm coding a clone messaging app. I have a user control called "Bubble" that I use as a message bubble. And its user control layout is like this:
It contains only lblMessage, lblTime and pictureBox. lblMessage's AutoSize property off and Anchor is top-left-right. My goal is to size or wrap this according to the content. I am able to resize vertically using this code.
void SetHeight()
{
//SizeF maxSize = new Size(500, int.MaxValue);
Graphics g = CreateGraphics();
SizeF size = g.MeasureString(lblMessage.Text, lblMessage.Font, lblMessage.Width);
lblMessage.Height = int.Parse(Math.Round(size.Height + 2, 0).ToString());
lblTime.Top= lblMessage.Bottom +10;
this.Height = lblTime.Bottom + 10;
}
My result is like this:
I can resize vertically, but not horizontally at the same time. The way I resize it vertically is to use width property of lblMessage as the limit size. I want to resize user control according to size of short text. I thought about creating a maxSize for MeasureString but I can't get it to work. I'm trying to find a function that continues from a bottom line when it reaches a certain width value. I look forward to your help.
I searched all stackowerflow questions in depth but none of them worked in my case.
**Edit after Jimi comments
I tried to apply his solution to my project. I don't think I did everything right, but with a little bit of comment, something came up that worked for me at least.
private void Bubble_Paint(object sender, PaintEventArgs e)
{
float minimumWidth = lblTime.Width + pictureBox1.Width + 35;
float maximumWidth = 500;
string measureString = lblMessage.Text;
Font stringFont = new Font("Helvetica", 12.0F);
CharacterRange[] characterRanges = { new CharacterRange(0, measureString.Length) };
float layautWidth = maximumWidth - minimumWidth;
RectangleF layoutRect = new RectangleF(10, 6, layautWidth, this.Height);
StringFormat stringFormat = new StringFormat();
stringFormat.SetMeasurableCharacterRanges(characterRanges);
Color myColor = Color.FromArgb(211, 212, 212);
SolidBrush myBrush = new SolidBrush(myColor);
Region[] stringRegions = e.Graphics.MeasureCharacterRanges(measureString, stringFont, layoutRect, stringFormat);
RectangleF measureRect1 = stringRegions[0].GetBounds(e.Graphics);
//When I gave Rectangle to the DrawString, some last letter was truncated, so I used plain text printing until I got to the bottom line.
if (measureRect1.Height < 30)
e.Graphics.DrawString(measureString, stringFont, myBrush, 10, 6, stringFormat);
else e.Graphics.DrawString(measureString, stringFont, myBrush, measureRect1, stringFormat);
e.Graphics.DrawRectangle(new Pen(Color.Transparent, 0), Rectangle.Round(measureRect1));
this.Width = Convert.ToInt32(measureRect1.Width + minimumWidth);
lblTime.Top = Convert.ToInt32(measureRect1.Height) + 10;
this.Height = lblTime.Bottom + 10;
}
Result in container preview:
user control that goes down one line from the specified limit
and for one line
dynamically result inside the application

WPF: Delete white lines between two Shapes

If I render two rectangles on a canvas there is a small white line between them. Why? And how can I remove it?
Code:
var r = new Rectangle {Width = 100, Height = 100, Fill = Brushes.Black};
MyCanvas.Children.Add(r);
Canvas.SetLeft(r, 0);
Canvas.SetTop(r, 0);
var r2 = new Rectangle {Width = 100, Height = 100, Fill = Brushes.Black};
MyCanvas.Children.Add(r2);
Canvas.SetLeft(r2, 100);
Canvas.SetTop(r2, 0);
I already tried to set the stroke to "transparent".

Graphics DrawImage, FillRectangle, and DrawCell on cells in C1FlexGrid

I'm having a difficult time correctly rendering cells in a C1FlexGrid when I need to set a background color, draw an image, and fill a rectangle for a wide border. I can't seem to get the right combination of DrawCell, DrawImage, and FillRectangle for each cell to draw properly.
The "OwnerDrawCell" event is where I am drawing the contents, border, and image.
First I am setting the cell backcolor of each cell to something like this:
e.Style.BackColor = lockedBackColor;
Then for some cells I am drawing an image and text.
// CENTER TEXT IN CELL; IMAGE IS RIGHT JUSTIFIED, CENTERED VERTICALLY
// Must draw cell first - background color, borders, etc..
e.DrawCell(DrawCellFlags.Background | DrawCellFlags.Border);
// Draw cell text
int textWidth = (int)e.Graphics.MeasureString(e.Text, e.Style.Font).Width;
int textHeight = (int)e.Graphics.MeasureString(e.Text, e.Style.Font).Height;
float textCenterX = e.Bounds.Left + ((e.Bounds.Width - textWidth) / 2);
float textCenterY = e.Bounds.Top + ((e.Bounds.Height - textHeight) / 2);
e.Graphics.DrawString(e.Text, e.Style.Font, brushColorForString, textCenterX, textCenterY);
if (e.Row == 8 || PlantHasBins())
{
// Draw cell image
int cellImageX = e.Bounds.Right - _cellImage.Width;
int cellImageY = e.Bounds.Top + ((e.Bounds.Height - _cellImage.Height) / 2);
var cellImagePoint = new Point(cellImageX, cellImageY);
e.Graphics.DrawImage(_cellImage, cellImagePoint);
}
e.Handled = true;
Then for some columns I want to draw a heavy right border to give a visual separation between groups of columns.
e.DrawCell(DrawCellFlags.Border);
Rectangle rc;
Margins m = new Margins(0, 0, 0, 0);
m.Right = 3;
CellRange rg;
rg = PlantAlleyBinGrid.GetCellRange(e.Row, e.Col);
rc = e.Bounds;
rg.c1 = rg.c2 = 2 + 1;
rg.c1 = rg.c2 = 2;
rc.X = rc.Right - m.Right;
rc.Width = m.Right;
e.Graphics.FillRectangle(new SolidBrush(Color.Black), rc);
e.Handled = true;
The code as written is almost there. I've tried many alternatives and flows but it ends up not drawing the cell image, the cell border, the cell contents, or any combination thereof.
I need help on how to draw everything on a cell.
I resolved this by calling DrawCell and DrawString for cells that do not draw an image.

Printing Image from Silverlight

I'm trying to print a Image in Landscape mode in Silverlight.
I found a great example here. Where most of the code comes from. The code worked perfectly as expected. When I changed the Line to an Image it failed.
Code
Canvas OuterCanvas = new Canvas();
/* a container for everything that will print */
Border OuterBorder = new Border()
{
BorderThickness = new Thickness(3),
BorderBrush = new SolidColorBrush(Colors.Red),
Margin = new Thickness(10)
};
double Width = e.PrintableArea.Width - OuterBorder.Margin.Left - OuterBorder.Margin.Right;
double Height = e.PrintableArea.Height - OuterBorder.Margin.Top - OuterBorder.Margin.Bottom;
/* NOTE: We're trying to force landscape, so swop the width and height */
OuterBorder.Width = Height;
OuterBorder.Height = Width;
/* on portrait, this line goes down (leave the printer settings, we're trying to force landscape) */
Line Line = new Line()
{
X1 = OuterBorder.Width / 2,
Y1 = 0,
X2 = OuterBorder.Width / 2,
Y2 = OuterBorder.Height,
Stroke = new SolidColorBrush(Colors.Blue),
StrokeThickness = 3
};
//
// Here is where I changed the Line to an Image
//
OuterBorder.Child = imageElementInXaml; //Line;
OuterCanvas.Children.Add(OuterBorder);
/* rotate 90 degrees, and move into place */
var transformGroup = new TransformGroup();
transformGroup.Children.Add(new RotateTransform() { Angle = 90 });
transformGroup.Children.Add(new TranslateTransform() { X = e.PrintableArea.Width });
OuterBorder.RenderTransform = transformGroup;
e.PageVisual = OuterCanvas;
e.HasMorePages = false;
I know that a Border can only contain 1 element in which I have done so, and when I printed the image on its own without trying to make it landscape this worked too. So why wont it work when I simply replace the Line with the image Element
So since posting this I found some code (cant remember where now) that has helped me get the printing working. Its not as clean as I would have liked but it works.
void pd_PrintPage(object sender, PrintPageEventArgs e)
{
Image image = new Image();
image.Source = imgPlayer.Source;
//This is important
image.Stretch = Stretch.Uniform;
// Find the full size of the page
Size pageSize = new Size(e.PrintableArea.Width + e.PageMargins.Left + e.PageMargins.Right, e.PrintableArea.Height + e.PageMargins.Top + e.PageMargins.Bottom);
var MARGIN= 10;
// Get additional margins to bring the total to MARGIN (= 96)
Thickness additionalMargin = new Thickness
{
Left = Math.Max(0, MARGIN - e.PageMargins.Left),
Top = Math.Max(0, MARGIN - e.PageMargins.Top),
Right = Math.Max(0, MARGIN - e.PageMargins.Right),
Bottom = Math.Max(0, MARGIN - e.PageMargins.Bottom)
};
// Find the area for display purposes
Size displayArea = new Size(e.PrintableArea.Width - additionalMargin.Left - additionalMargin.Right, e.PrintableArea.Height - additionalMargin.Top - additionalMargin.Bottom);
bool pageIsLandscape = displayArea.Width > displayArea.Height;
bool imageIsLandscape = image.ActualWidth > image.ActualHeight;
double displayAspectRatio = displayArea.Width / displayArea.Height;
double imageAspectRatio = (double)image.ActualWidth / image.ActualHeight;
double scaleX = Math.Min(1, imageAspectRatio / displayAspectRatio);
double scaleY = Math.Min(1, displayAspectRatio / imageAspectRatio);
// Calculate the transform matrix
MatrixTransform transform = new MatrixTransform();
if (pageIsLandscape == imageIsLandscape)
{
// Pure scaling
transform.Matrix = new Matrix(scaleX, 0, 0, scaleY, 0, 0);
}
else
{
// Scaling with rotation
scaleX *= pageIsLandscape ? displayAspectRatio : 1 / displayAspectRatio;
scaleY *= pageIsLandscape ? displayAspectRatio : 1 / displayAspectRatio;
transform.Matrix = new Matrix(0, scaleX, -scaleY, 0, 0, 0);
}
Image image2 = new Image
{
Source = image.Source,
Stretch = Stretch.Fill,
Width = displayArea.Width,
Height = displayArea.Height,
RenderTransform = transform,
RenderTransformOrigin = new Point(0.5, 0.5),
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
Margin = additionalMargin,
};
Border border = new Border
{
Child = image,
};
e.PageVisual = border;
}

WinRT how do you dynamically add a Triangle to a canvas

I would like to dynamically add a Triangle to my canvas. I can do this but only in one very specific way that does not work for my application. What I would like to do is supply a point and a size and get back a triangle.
var poly = shape as Polygon;
Polygon p = new Polygon
{
//Width = size,
//Height = size,
Fill = new SolidColorBrush(Colors.Red),
ManipulationMode = ManipulationModes.All,
RenderTransform = new CompositeTransform()
};
int w = 200;
int h = 200;
Point start = new Point(400, 200);
var right = new Point(start.X + w, start.Y);
var top = new Point(start.X + (w / 2), start.Y - (h));
poly.Points.Add(point);
poly.Points.Add(right);
poly.Points.Add(top);
poly.Points.Add(point);
Then I add the shape to my canvas child controls and and set the X Y on the shapes RenderTransform. Nothing appears. If however I just do this:
Polygon p = new Polygon
{
//Width = size,
//Height = size,
Fill = new SolidColorBrush(Colors.Red),
ManipulationMode = ManipulationModes.All,
RenderTransform = new CompositeTransform()
};
p.Points.Add(new Point(300, 200));
p.Points.Add(new Point(400, 125));
p.Points.Add(new Point(400, 275));
p.Points.Add(new Point(300, 200));
It renders a Triangle just fine. However if you supply a width and height to the above code it will stop rendering.
Can I just create a triangle of a certain size, without having to set actual points on the canvas at first, much like you do an Ellipse or a Rectangle?

Categories