Develop Reference

Cover an image with black and reveal parts of the image using mouse

So I am creating a "Map Viewer" for a program I am working on. Basically I want to display a map and have it resize the image to fit in the grid. For this I am using Viewbox to hold the image and resize it. I was attempting to use this code to reveal the map but it does not center the circle on the mouse and it does not retain the revealed portions of the map (it ONLY reveals where the mouse is and not where it has been).
Here is the XAML:
<Viewbox x:Name="MapHolder" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="1" Grid.RowSpan="7" Margin="25,5,25,15">
<Image x:Name="SelectedMap" Source="/wizard_dungeon.jpg" Stretch="Uniform" MouseMove="SelectedMap_MouseMove" >
<Image.OpacityMask>
<VisualBrush Stretch="None" >
<VisualBrush.Visual>
<Ellipse Width="400" Height="400" StrokeThickness="1" Fill="Black"/>
</VisualBrush.Visual>
<VisualBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform x:Name="OpacityFilterTransform" X="1" Y="1"/>
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Image.OpacityMask>
</Image>
</Viewbox>
And the code-behind:
private void SelectedMap_MouseMove(object sender, MouseEventArgs e)
{
var position = e.GetPosition(this);
var height = MapHolder.ActualHeight;
var width = MapHolder.ActualWidth;
// with the position values, interpolate a TranslateTransform for the opacity mask
var transX = position.X / width;
var transY = position.Y / height;
OpacityFilterTransform.X = transX - 0.5;
OpacityFilterTransform.Y = transY - 0.5;
}
I want there to basically be a Image under a Black screen and I can erase the black screen to reveal the image in the areas I have erased.

WPF Canvas Fill

I currently have a WPF windows with a Canvas is 600 x 400. Is it possible to scale or automatically zoom in so that the lines take up as much as the 600x600 as possible?
<Border>
<Canvas x:Name="cMap" Width="600" Height="400">
<Line X1="5" Y1="5" X2 ="10" Y2="10" StrokeThickness="2" Stroke="Black"/>
<Line X1="10" Y1="10" X2 ="15" Y2="25" StrokeThickness="2" Stroke="Black"/>
</Canvas>
</Border>
My intention will be to add lines programmatically via code instead of XAML.
Thanks.

Not sure what is your exact usecase, but you could probably benefit by using ViewBox:
<Border>
<Viewbox Stretch="Uniform">
<Canvas x:Name="cMap" Width="15" Height="25">
<Canvas.LayoutTransform>
<ScaleTransform />
</Canvas.LayoutTransform>
<Line X1="5" Y1="5" X2 ="10" Y2="10" StrokeThickness="2" Stroke="Black"/>
<Line X1="10" Y1="10" X2 ="15" Y2="25" StrokeThickness="2" Stroke="Black"/>
</Canvas>
</Viewbox>
</Border>

Hope this helps you!
To draw lines in code you shoud do something like this:
Line line = new Line();
Thickness thickness = new Thickness(101,-11,362,250);
line.Margin = thickness;
line.Visibility = System.Windows.Visibility.Visible;
line.StrokeThickness = 4;
line.Stroke = System.Windows.Media.Brushes.Black;
line.X1 = 10;
line.X2 = 40;
line.Y1 = 70;
line.Y2 = 70;
and don't forget to add:
myCanvas.Children.Add(line);
to put those line in some place
from: Drawing lines in code using C# and WPF
To resize your canvas please read this:
Canvas is the only panel element that has no inherent layout
characteristics. A Canvas has default Height and Width properties of
zero, unless it is the child of an element that automatically sizes
its child elements. Child elements of a Canvas are never resized, they
are just positioned at their designated coordinates. This provides
flexibility for situations in which inherent sizing constraints or
alignment are not needed or wanted. For cases in which you want child
content to be automatically resized and aligned, it is usually best to
use a Grid element.
So as a solution you would make it inside a GRID or using the following code:
public class CanvasAutoSize : Canvas
{
protected override System.Windows.Size MeasureOverride(System.Windows.Size constraint)
{
base.MeasureOverride(constraint);
double width = base
.InternalChildren
.OfType<UIElement>()
.Max(i => i.DesiredSize.Width + (double)i.GetValue(Canvas.LeftProperty));
double height = base
.InternalChildren
.OfType<UIElement>()
.Max(i => i.DesiredSize.Height + (double)i.GetValue(Canvas.TopProperty));
return new Size(width, height);
}
}
at your XAML:
<local:CanvasAutoSize VerticalAlignment="Top" HorizontalAlignment="Left"></local:CanvasAutoSize>
from: WPF: How to make canvas auto-resize?

Zoom In on Canvas - C#

I currently have a canvas that I load an image on in my program, and I would like to be able to right-click on a certain point on that image and click zoom in to zoom in on that point.
One solution I found was:
<Canvas>
<Canvas.RenderTransform>
<ScaleTransform ScaleX="2" ScaleY="2">
</Canvas.RenderTransform>
</Canvas>
This works however it doesn't zoom in to the specific coordinates but rather just zooms in to the top-left of the image. How would I implement coordinate zooming? zooming in on specific coordinates?

Using three separate transforms. One to move the canvas so that the click point is the origin. The second transform to scale and the third to put the click point back at the center again
<Canvas.RenderTransform>
<TransformGroup>
<TranslateTransform X="0" Y="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
<TranslateTransform X="0" Y="0" />
</TransformGroup>
</Canvas.RenderTransform>
private void Image_MouseDown(object sender, MouseButtonEventArgs e)
{
Point p = e.GetPosition(this);
var transformGroup = ImageCanvas.RenderTransform as TransformGroup;
var moveToOriginTransform = transformGroup.Children[0] as TranslateTransform;
var scaleTransform = transformGroup.Children[1] as ScaleTransform;
var moveBackTransform = transformGroup.Children[2] as TranslateTransform;
moveToOriginTransform.X = -p.X;
moveToOriginTransform.Y = -p.Y;
scaleTransform.ScaleX += 1;
scaleTransform.ScaleY += 1;
moveBackTransform.X = p.X;
moveBackTransform.Y = p.Y;
}

How to draw chess board pattern with Brush on Canvas?

I got Canvas and some Rectangles of different width but same height.
I draw Rectangles on Canvas pragramticaly, width calculated in real time when i draw it.
Some of Rectangles have SolidColorBrush but rest should look like chess board:
I tried to do it like this:
private static Brush CreateBrush()
{
// Create a DrawingBrush
var blackBrush = new DrawingBrush();
// Create a Geometry with white background
// Create a GeometryGroup that will be added to Geometry
var gGroup = new GeometryGroup();
gGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 10, 10)));
gGroup.Children.Add(new RectangleGeometry(new Rect(10, 10, 10, 10)));
// Create a GeomertyDrawing
var checkers =
new GeometryDrawing(new SolidColorBrush(Colors.Black), null, gGroup);
var checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(checkers);
blackBrush.Drawing = checkersDrawingGroup;
// Set Viewport and TileMode
blackBrush.Viewport = new Rect(0, 0, 0.5, 0.5 );
blackBrush.TileMode = TileMode.Tile;
return blackBrush;
}
As far as Rectangles got different size, same DrawingBrush looks different on different Rectangles - its not repeats to fill it, but stretch.
As i understand, the problem is in blackBrush.Viewport = new Rect(0, 0, 0.5, 0.5 ); - i should set diffrent Viewports according to each Rectangle width, but its no acceptable for me. I need to use one brush for all rectangles of different size and texture should look like one picture - same scale for X and Y, but it can repeat many time in one Rectangle
Maybe there is another Brush type or other way to solve this issues?
Fill free to ask, if my post was unclear, also sorry for my english.
add picture for what i need:
(It's not about width, its about texture fill)

The problem is in the Viewport settings, you should set its ViewportUnits to Absolute instead of RelativeToBoundingBox (as by default):
//we have to use a fixed size for the squares
blackBrush.Viewport = new Rect(0, 0, 60, 60);
blackBrush.Viewport.ViewportUnits = BrushMappingMode.Absolute;
Here is an example showing the checkboard using pure XAML:
<Grid>
<Grid.Background>
<DrawingBrush TileMode="Tile" Viewport="0,0,60,60"
ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="Black"
Geometry="M5,5 L0,5 0,10 5,10 5,5 10,5 10,0 5,0 Z"/>
</DrawingBrush.Drawing>
</DrawingBrush>
</Grid.Background>
</Grid>

By using a DrawingGroup with King King's answer, you can specify different colors for each side:
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="Black" Geometry="M5,5 L0,5 0,10 5,10 5,5 10,5 10,0 5,0 Z"/>
<GeometryDrawing Brush="Blue" Geometry="M0,0 L0,5 0,10 0,5, 10,5 10,10 5,10 5,0 Z"/>
</DrawingGroup>
</DrawingBrush.Drawing>

Radial Sweeping of a Brush

I'm looking for a way to fill something using a radial sweep of a defined brush in WPF. I'm going to break down what I want in a series of images in an attempt to make it clear.
Let's say I define a brush in WPF that looks like so:
I then want to use a slice of that brush like so:
And tile it across the radius of a circle as shown:
Finally, in order to fill the shape, I would like to sweep the brush across all angles of the circle, providing me with a result similar to this:
In this particular case I'm attempting to make concentric circles. I know I could achieve this using RadialGradientBrush but this is an obnoxious solution as in order to precisely control the width of my concentric circles I would need change the number of radial stops based on the size of the circle. To make it worse, if the circle size changes, the radial stops will not change unless I use some kind of converter based on the circle width/height.
I was hoping for a clean solution to do this maybe with paths or something but any other suggestions for making circle slices of controlled size is welcome.

How about this to draw a few concentric circles by use of a Brush?
<Rectangle>
<Rectangle.Fill>
<DrawingBrush Stretch="Uniform">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="1"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry RadiusX="1" RadiusY="1"/>
<EllipseGeometry RadiusX="3" RadiusY="3"/>
<EllipseGeometry RadiusX="5" RadiusY="5"/>
<EllipseGeometry RadiusX="7" RadiusY="7"/>
<EllipseGeometry RadiusX="9" RadiusY="9"/>
<EllipseGeometry RadiusX="11" RadiusY="11"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>

Regarding the concentric circle case, combining Clemens's solution with a converter allows for precisely sized circles whose width can be changed dynamically and the amount of circles is set to as many will fit in the allowed area.
class SizeSpacingToCircleGroupConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (values == null) return values;
var input = values.OfType<double>().ToArray();
if (input.Length != 3) return values;
var width = input[0];
var height = input[1];
var spacing = input[2];
var halfSpacing = spacing / 2;
var diameter = width > height ? height : width;
var lineCount = (int)Math.Floor((diameter / (2 * spacing)) - 1);
if (lineCount <= 0) return values;
var circles = Enumerable.Range(0, lineCount).Select(i =>
{
var radius = halfSpacing + (i * spacing);
return new EllipseGeometry() { RadiusX = radius, RadiusY = radius };
}).ToArray();
var group = new GeometryGroup();
foreach (var circle in circles) group.Children.Add(circle);
return group;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
And the XAML:
<Rectangle Height="{StaticResource Diameter}" Width="{StaticResource Diameter}">
<Rectangle.Fill>
<DrawingBrush Stretch="None">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="{StaticResource ForegroundBrush}" Thickness="{StaticResource SpacingDiv2}"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<MultiBinding Converter="{StaticResource SizeSpacingToCircleGroupConverter}">
<Binding Source="{StaticResource Diameter}" />
<Binding Source="{StaticResource Diameter}" />
<Binding Source="{StaticResource Spacing}" />
</MultiBinding>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
In my case I'm just using doubles defined in my resource dictionary but I could easily use a binding from a view model.
I still won't mark anything as the accepted answer however because the question was about a tiled radial sweep which could be useful for other reasons.