We Keep Coding

Draw transparent rectangles on image

I want to create an overlay on an image, similar to the one in the picture.
Creating the translucent cover is easy, I just create a rectangle the size of the image and give it a low alpha value.
How can I get the transparent "cut-outs" though? Drawing over the image again just increases its alpha value. I need to explicitly set it to zero.
var image = picOriginal.Image;
var graphics = Graphics.FromImage(image);
var color = Color.FromArgb(200, Color.Black);
var brush = new SolidBrush(color);
var transparentColor = Color.Transparent;
var transparentBrush = new SolidBrush(transparentColor);
var rectangle = new Rectangle(Point.Empty, image.Size);
graphics.FillRectangle(brush, rectangle);
graphics.FillEllipse(transparentBrush, 100, 100, 100, 150);
var bitmap = new Bitmap(image);
picGenerated.Image = bitmap;

How to add a Controls.Grid in a Canvas

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).

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?

create polygon filled up with dots

Am using the below code to create polygon. i just want to fill this polygon surface with black dots, how i can do that, then i want to convert this polygon to bitmap or in memory stream, how to do this??
// Create a blue and a black Brush
SolidColorBrush yellowBrush = new SolidColorBrush();
yellowBrush.Color = Colors.Transparent;
SolidColorBrush blackBrush = new SolidColorBrush();
blackBrush.Color = Colors.Black;
// Create a Polygon
Polygon yellowPolygon = new Polygon();
yellowPolygon.Stroke = blackBrush;
yellowPolygon.Fill = yellowBrush;
yellowPolygon.StrokeThickness = 4;
// Create a collection of points for a polygon
System.Windows.Point Point1 = new System.Windows.Point(50, 100);
System.Windows.Point Point2 = new System.Windows.Point(200, 100);
System.Windows.Point Point3 = new System.Windows.Point(200, 200);
System.Windows.Point Point4 = new System.Windows.Point(300, 30);
PointCollection polygonPoints = new PointCollection();
polygonPoints.Add(Point1);
polygonPoints.Add(Point2);
polygonPoints.Add(Point3);
polygonPoints.Add(Point4);
// Set Polygon.Points properties
yellowPolygon.Points = polygonPoints;
// Add Polygon to the page
mygrid.Children.Add(yellowPolygon);

Do the dots have to be positioned in a particular order or do you just want to have a dotted pattern in your polygon without specific order?
If you don't need a special order you could use a Brush, a DrawingBrush for instance. Check out this link: http://msdn.microsoft.com/en-us/library/aa970904.aspx
You can then set this Brush as the Fill-Property of your Polygon instead of the SolidColorBrush.
This is the DrawingBrush example from the msdn link, but modified to display dots:
// Create a DrawingBrush and use it to
// paint the rectangle.
DrawingBrush myBrush = new DrawingBrush();
GeometryDrawing backgroundSquare =
new GeometryDrawing(
Brushes.Yellow,
null,
new RectangleGeometry(new Rect(0, 0, 100, 100)));
GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new EllipseGeometry(new Rect(0, 0, 20, 20)));
SolidColorBrush checkerBrush = new SolidColorBrush(Colors.Black);
GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);
DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);
myBrush.Drawing = checkersDrawingGroup;
myBrush.Viewport = new Rect(0, 0, 0.05, 0.05);
myBrush.TileMode = TileMode.Tile;
yellowPolygon.Fill = myBrush;