MSDN writes:
DrawingVisual is a lightweight drawing class that is used to render shapes, images, or text. This class is considered lightweight because it does not provide layout, input, focus, or event handling, which improves its performance. For this reason, drawings are ideal for backgrounds and clip art.
I wrote a code drawing thousand lines via Line objects and thousand lines via DrawingVisual objects over an image. Comparing performance of both ways I haven't seen a difference. Scrolling a final picture isn't smooth enough in either case.
Why is the lag of scrolling identical in each case and where is the performance benefit of DrawingVisual?
The first way
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Canvas Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"
Name="layoutView">
<Image>
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<ImageDrawing x:Name="testImage"/>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</Canvas>
</ScrollViewer>
and
ImageSource imageSource = new BitmapImage(uri);
testImage.Rect = new Rect(
0, 0, imageSource.Width, imageSource.Height);
testImage.ImageSource = imageSource;
layoutView.Width = imageSource.Width;
layoutView.Height = imageSource.Height;
Random r = new Random();
int max = Math.Min(
(int)imageSource.Height, (int)imageSource.Width);
for (int i = 0; i < 1000; i++)
{
Point p1 = new Point(r.Next(max), r.Next(max));
Point p2 = new Point(r.Next(max), r.Next(max));
Line line = new Line();
line.X1 = p1.X;
line.Y1 = p1.Y;
line.X2 = p2.X;
line.Y2 = p2.Y;
line.Stroke = Brushes.Red;
layoutView.Children.Add(line);
}
The second way
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<my:VisualView Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"
x:Name="layoutView">
</my:VisualView>
</ScrollViewer>
and
public class VisualView : Canvas
{
List<Visual> visuals = new List<Visual>();
protected override int VisualChildrenCount
{
get
{
return visuals.Count;
}
}
protected override Visual GetVisualChild(int index)
{
return visuals[index];
}
public void AddVisual(Visual visual)
{
visuals.Add(visual);
base.AddVisualChild(visual);
base.AddLogicalChild(visual);
}
public void RemoveVisual(Visual visual)
{
visuals.Remove(visual);
base.RemoveVisualChild(visual);
base.RemoveLogicalChild(visual);
}
}
and
ImageSource imageSource = new BitmapImage(uri);
Random r = new Random();
int max = Math.Min(
(int)imageSource.Height, (int)imageSource.Width);
DrawingVisual dv = new DrawingVisual();
using (DrawingContext dc = dv.RenderOpen())
{
dc.DrawImage(imageSource, new Rect(
0, 0, imageSource.Width, imageSource.Height));
dc.Close();
layoutView.AddVisual(dv);
layoutView.Width = imageSource.Width;
layoutView.Height = imageSource.Height;
}
Pen pen = new Pen(Brushes.Red, 1);
for (int i = 0; i < 1000; i++)
{
dv = new DrawingVisual();
using (DrawingContext dc = dv.RenderOpen())
{
Point p1 = new Point(r.Next(max), r.Next(max));
Point p2 = new Point(r.Next(max), r.Next(max));
dc.DrawLine(pen, p1, p2);
dc.Close();
layoutView.AddVisual(dv);
}
}
You need to measure carefully to see the real difference. May be there are some WPF ETW events which can help.
If you're case, you have both images and vector graphics. If image is dominating perf here, then either way could be quite similar.
Try to remove images first to see if you see a difference.
With vectors, you should not create 1000 DrawingVisual, you can draw 1000 lines into a single Visual. You can even draw a single polyline.
With a single polyline, you can optimize further by removing points which are not affecting the shape of the line.
Related
I have to implement writing by touch on Wacom tablet ( like on paper) and I need to render up to 200 strokes per second in WPF Canvas. The problem is that after about 20s of constant writing it gets a bit laggs and the laggs grows. I store all strokes in HashSet. I thought about taking screen shoot when HashSet contains over 600 elements and set it as a background image and clear the HashSet, but after ~30 screen shoots it gets a bit blurred. Do you have any idea how to make it better?
You can use WriteableBitmap. This is very fast, but it works by writing individual bytes to bitmap, so if you need to apply effects to the drawing, then you have to write them yourself. This is an example of how you can use WriteableBitmap. It takes ~100 ms in debug mode to draw 1000 lines (each made out of 1600 points) on 1600 x 1200 px image on my computer, but I'm sure this can be optimized.
I'm just randomly drawing lines, but you can get events from Canvas and capture positions of stylus and pass them after each stroke.
public partial class MainWindow : Window
{
private WriteableBitmap _bitmap;
private readonly Random _random = new Random();
private readonly Stopwatch _stopwatch = new Stopwatch();
private const int White = 0x00000000;
private const int Red = 0x00FF0000;
private int _width;
private int _height;
public MainWindow()
{
InitializeComponent();
CanvasImage.Loaded += OnLoaded;
}
private async void OnLoaded(object sender, RoutedEventArgs e)
{
_width = (int)DrawableCanvas.ActualWidth;
_height = (int)DrawableCanvas.ActualHeight;
_bitmap = new WriteableBitmap(_width, _height, 96, 96, PixelFormats.Bgr32, null);
CanvasImage.Source = _bitmap;
while (true)
{
unsafe
{
for (var index = 0; index < _width * _height; index++)
*((int*)_bitmap.BackBuffer + index) = White;
}
_stopwatch.Start();
for (var index = 0; index < 1000; index++)
{
var start = _random.Next(0, _width);
var points = Enumerable.Range(0, _width).Select(x => new Point((x + start) % _width, x % _height));
UpdateImage(points);
}
Debug.WriteLine($"Last 1000 draws took: {_stopwatch.ElapsedMilliseconds} ms");
_stopwatch.Reset();
await Task.Delay(300);
}
}
private void UpdateImage(IEnumerable<Point> points)
{
_bitmap.Lock();
foreach (var point in points)
{
var x = (int)point.X;
var y = (int)point.Y;
var offset = _width * y + x;
unsafe
{
*((int*)_bitmap.BackBuffer + offset) = Red;
}
}
_bitmap.AddDirtyRect(new Int32Rect(0, 0, _width, _height));
_bitmap.Unlock();
}
}
And view:
<Grid>
<Border Width="1604" Height="1204" BorderThickness="2" BorderBrush="Blue">
<Canvas x:Name="DrawableCanvas">
<Image x:Name="CanvasImage"></Image>
</Canvas>
</Border>
</Grid>
Does anyone know of an easy way to animate a movement from an Image's current location to a new location (X,Y) using WPF animation with no XAML, 100% programmatically? And with no reference to "this" (with RegisterName etc).
I am trying to make an extension class for Image to do animation stuff on it. It is easy enough to change the width and height properties through animation, but after searching for location animation of an object it suddenly becomes more advanced.
As it is an extension class I will only have a reference to the actual Image object and the X and Y I want to move it to.
public static void MoveTo(this Image targetControl, double X, double Y, double Width, double Height){
//code here
...
}
Update:
Thanks. Almost working. It seems The GetTop and GetLeft returns 'NaN' not explicitly set. Found the workaround in this post: Canvas.GetTop() returning NaN
public static void MoveTo(this Image target, double newX, double newY) {
Vector offset = VisualTreeHelper.GetOffset(target);
var top = offset.Y;
var left = offset.X;
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
DoubleAnimation anim1 = new DoubleAnimation(0, newY - top, TimeSpan.FromSeconds(10));
DoubleAnimation anim2 = new DoubleAnimation(0, newX - left, TimeSpan.FromSeconds(10));
trans.BeginAnimation(TranslateTransform.YProperty, anim1);
trans.BeginAnimation(TranslateTransform.XProperty, anim2);
}
I had to swap two of the values (FROM) with 0. I assume that must be because in this context the upper left corner of the picture is the origin? But now it works.
Try this:
public static void MoveTo(this Image target, double newX, double newY)
{
var top = Canvas.GetTop(target);
var left = Canvas.GetLeft(target);
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
DoubleAnimation anim1 = new DoubleAnimation(top, newY - top, TimeSpan.FromSeconds(10));
DoubleAnimation anim2 = new DoubleAnimation(left, newX - left, TimeSpan.FromSeconds(10));
trans.BeginAnimation(TranslateTransform.XProperty,anim1);
trans.BeginAnimation(TranslateTransform.YProperty,anim2);
}
Here it is... It changes the size and moves a MediaElement under the Canvas. Just input your parameters:
Storyboard story = new Storyboard();
DoubleAnimation dbWidth = new DoubleAnimation();
dbWidth.From = mediaElement1.Width;
dbWidth.To = 600;
dbWidth.Duration = new Duration(TimeSpan.FromSeconds(.25));
DoubleAnimation dbHeight = new DoubleAnimation();
dbHeight.From = mediaElement1.Height;
dbHeight.To = 400;
dbHeight.Duration = dbWidth.Duration;
story.Children.Add(dbWidth);
Storyboard.SetTargetName(dbWidth, mediaElement1.Name);
Storyboard.SetTargetProperty(dbWidth, new PropertyPath(MediaElement.WidthProperty));
story.Children.Add(dbHeight);
Storyboard.SetTargetName(dbHeight, mediaElement1.Name);
Storyboard.SetTargetProperty(dbHeight, new PropertyPath(MediaElement.HeightProperty));
DoubleAnimation dbCanvasX = new DoubleAnimation();
dbCanvasX.From = 0;
dbCanvasX.To = 5;
dbCanvasX.Duration = new Duration(TimeSpan.FromSeconds(.25));
DoubleAnimation dbCanvasY = new DoubleAnimation();
dbCanvasY.From = 0;
dbCanvasY.To = 5;
dbCanvasY.Duration = dbCanvasX.Duration;
story.Children.Add(dbCanvasX);
Storyboard.SetTargetName(dbCanvasX, mediaElement1.Name);
Storyboard.SetTargetProperty(dbCanvasX, new PropertyPath(Canvas.LeftProperty));
story.Children.Add(dbCanvasY);
Storyboard.SetTargetName(dbCanvasY, mediaElement1.Name);
Storyboard.SetTargetProperty(dbCanvasY, new PropertyPath(Canvas.TopProperty));
story.Begin(this);
<Viewbox Stretch="Uniform" StretchDirection="Both" SnapsToDevicePixels="True">
<Grid Width="640" Height="480" Name="MainLayout" SnapsToDevicePixels="True" Background="Black">
<Canvas Width="640" Height="480" Name="MainCanvas" SnapsToDevicePixels="True">
<MediaElement Height="171" HorizontalAlignment="Left" Name="mediaElement1" VerticalAlignment="Top" Width="337" LoadedBehavior="Manual" Margin="166,140,0,0" Canvas.Left="-162" Canvas.Top="-140" />
<Button Canvas.Left="294" Canvas.Top="196" Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
</Canvas>
</Grid>
</Viewbox>
UPDATE:
Instead of MediaElement use this line:
<Rectangle Height="171" HorizontalAlignment="Left" Name="mediaElement1" VerticalAlignment="Top" Width="337" Margin="166,140,0,0" Canvas.Left="-162" Canvas.Top="-140" Fill="{DynamicResource {x:Static SystemColors.MenuBarBrushKey}}" />
And don't forget to put the C# code to:
private void button1_Click(object sender, RoutedEventArgs e) {}
You can use MediaElement as well but you have to define a VideoClip to see something ;)
Please find a solution that uses the Left and Top properties of Canvas for the extension method. See the following code:
public static void MoveTo(this Image target, Point newP)
{
Point oldP = new Point();
oldP.X = Canvas.GetLeft(target);
oldP.Y = Canvas.GetTop(target);
DoubleAnimation anim1 = new DoubleAnimation(oldP.X, newP.X, TimeSpan.FromSeconds(0.2));
DoubleAnimation anim2 = new DoubleAnimation(oldP.Y, newP.Y , TimeSpan.FromSeconds(0.2));
target.BeginAnimation(Canvas.LeftProperty , anim1);
target.BeginAnimation(Canvas.TopProperty, anim2);
}
This code is based on #DeanChalk's answer.
It moves an Image contained within a Canvas (RFID_Token) diagonally from the top-right to the bottom-left, positioned centrally over another Image within a Canvas (RFID_Reader).
<Canvas>
<Canvas x:Name="RFID_Reader_Canvas">
<Image x:Name="RFID_Reader" Source="RFID-Reader.png" Height="456" Width="682" Canvas.Left="37" Canvas.Top="524"/>
</Canvas>
<Canvas x:Name="RFID_Token_Canvas">
<Image x:Name="RFID_Token" Source="RFID-Token.png" Height="268" Width="343" Canvas.Left="874" Canvas.Top="70"/>
</Canvas>
</Canvas>
var StartX = Canvas.GetLeft(RFID_Token);
var StartY = Canvas.GetTop(RFID_Token);
var EndX = RFID_Reader.Width / 2 + Canvas.GetLeft(RFID_Reader) - StartX - (RFID_Token.Width / 2);
var EndY = RFID_Reader.Height / 2 + Canvas.GetTop(RFID_Reader) - StartY - (RFID_Token.Height / 2);
var AnimationX = new DoubleAnimation(0, EndX, TimeSpan.FromSeconds(1));
var AnimationY = new DoubleAnimation(0, EndY, TimeSpan.FromSeconds(1));
var Transform = new TranslateTransform();
RFID_Token_Canvas.RenderTransform = Transform;
Transform.BeginAnimation(TranslateTransform.XProperty, AnimationX);
Transform.BeginAnimation(TranslateTransform.YProperty, AnimationY);
I kept having NaN or 0 values for my nested elements, here's a modified version of Danny's answer :
public void MoveTo(Canvas canvas, FrameworkElement target, FrameworkElement destination)
{
Point oldPoint = target.TransformToAncestor(canvas).Transform(new Point(0, 0));
Point newPoint = destination.TransformToAncestor(canvas).Transform(new Point(0, 0));
var EndX = destination.Width / 2 + newPoint.X - oldPoint.X - (target.Width / 2);
var EndY = destination.Height / 2 + newPoint.Y - oldPoint.Y - (target.Height / 2);
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
DoubleAnimation anim1 = new DoubleAnimation(0, EndX, TimeSpan.FromSeconds(0.3));
DoubleAnimation anim2 = new DoubleAnimation(0, EndY, TimeSpan.FromSeconds(0.3));
trans.BeginAnimation(TranslateTransform.XProperty, anim1);
trans.BeginAnimation(TranslateTransform.YProperty, anim2);
}
We have an application and we need a custom shape per each signal(changeable value in time) to add it in canvas for having a reference. in future by changing the signal value shape must changing to. for example if value=1 the shape must be a rectangle and if value=2 shape must be an ellipse.
I want to save Geometry of these shapes in a list and use them when I want.
I have an Idea for this case but it dosent work.
public class DigitalShape : Shape
{
public Geometry SelectedGeometry
{
get { return (Geometry)GetValue(SelectedGeometryProperty); }
set { SetValue(SelectedGeometryProperty, value); }
}
public static readonly DependencyProperty SelectedGeometryProperty = DependencyProperty.Register("SelectedGeometry",
typeof(Geometry), typeof(DigitalShape), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
protected override Geometry DefiningGeometry
{
get
{
return SelectedGeometry;
}
}
}
Get geometries from shapes with RenderedGeometry like this:
Rectangle rect = new Rectangle();
rect.Width = 20;
rect.Height = 20;
rect.StrokeThickness = 1;
rect.Fill = Brushes.Yellow;
rect.Stroke = Brushes.Yellow;
Canvas.SetLeft(rect, 100);
Canvas.SetTop(rect, 100);
DigitalShape _symbolShape = new DigitalShape();
_symbolShape.SelectedGeometry = rect.RenderedGeometry;
please help me guys.
Update 1:
testing data property of path with this code in new project, but I didn't see the rectangle:
private void button1_Click(object sender, RoutedEventArgs e)
{
Rectangle rect = new Rectangle();
rect.Width = 20;
rect.Height = 20;
rect.StrokeThickness = 1;
rect.Fill = Brushes.Yellow;
rect.Stroke = Brushes.Yellow;
Canvas.SetLeft(rect, 100);
Canvas.SetTop(rect, 100);
Path path = new Path();
path.Data = rect.RenderedGeometry;
myCanvas.Children.Add(path);
}
Update 2:
using path from another way. when myElp is hard coded and created in xaml, rendergeometry is worked and get a right geometry with values but when I create myElp in Code behined rendergeometry give me an empty geometry.
Xaml Code:
<Grid>
<Canvas x:Name="myCanvas" Width="200" Height="200" Background="Aqua"/>
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="62,234,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
<Ellipse x:Name="myElp" Fill="#FFF4F4F5" Height="25" Margin="23,0,30,20" Stroke="Black"/>
</Grid>
Code Behined:
PathGeometry pathGeo = PathGeometry.CreateFromGeometry(myElp.RenderedGeometry);
Path path = new Path();
path.Data = pathGeo;
path.Stroke = Brushes.Yellow;
path.StrokeThickness = 1;
path.Fill = Brushes.Yellow;
Canvas.SetLeft(path, 10);
Canvas.SetTop(path, 10);
myCanvas.Children.Add(path);
I see 2 Ellipse when Run this code. 1 its own ellipse of xaml and 1 my path.
How can i use render geometry for shape who created in code behined?!
I'm having trouble understanding my problem with drawing groups. I'm creating a map editor in wpf which is my first wpf project and I have been searching/playing around with drawing groups.
I have a set of tiles on the left side that on app startup populate based off of a folder of sprites. They all layout according to rules I have set(3 sets of tiles per row at 32 pixels each). Example below:
private void RefreshTileList()
{
// For now load in all textures as possible tiles
DrawingGroup dGroup = new DrawingGroup();
Rect r = new Rect();
r.X = 0.0;
r.Y = 0.0;
r.Width = Settings.Default.TileThumbWidth;
r.Height = Settings.Default.TileThumbHeight;
foreach (WPFTexture tex in imgFind.TileTextures)
{
ImageDrawing iDraw = new ImageDrawing(tex.src, r);
dGroup.Children.Add(iDraw);
r.X += r.Width;
if (r.X > r.Width * Settings.Default.TileThumbMaxColumns)
{
r.X = 0.0;
r.Y += r.Height;
}
}
// Make a drawing image and send it to the Image in canvas
DrawingImage drawImage = new DrawingImage(dGroup);
tileImage.Source = drawImage;
}
Now I Image control in another canvas which I want to do the same exact thing with exception that the tiles are placed dynamically. Here is what I have so far:
private void AreaDrawingCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if(curSelIndex > -1 && curSelIndex < imgFind.TileTextures.Count)
{
BitmapSource tileSrc = imgFind.TileTextures[curSelIndex].src;
Point mousePos = e.GetPosition(sender as Canvas);
Size size = new Size(tileSrc.Width, tileSrc.Height);
Rect r = new Rect(mousePos, size);
ImageDrawing iDraw = new ImageDrawing(tileSrc, r);
areaDrawGroup.Children.Add(iDraw);
}
}
And here is the initialization of what uses areaDrawGroup:
// Setup drawing for area
DrawingImage areaDrawImage = new DrawingImage(areaDrawGroup);
areaImage.Source = areaDrawImage;
areaImage.Stretch = Stretch.None;
AreaDrawingCanvas.Children.Add(areaImage);
If I do not add in a dead image located at point(0, 0) in the draw group and I click on the image control. It will offset to a weird location. As I continue to click more towards the top left location it correct where it draws the tile while shifting all the other ones over.
My question is where could I find a good tiling example or what have I done wrong? Because adding in a dead image to fix where other images locate seems like a really bad hack to something simple I missed.
Here is what I did to solve this for now. I have a i7 and used a list of drawingvisuals. Don't have a problem with it. I thought at one point I should use one drawing visual and add each image to the same visual. The problem with that is if I add a tile I have to re-open the render and redo all the drawing. Since I don't have any hiccups I decided not to use my time on that method.
Here is code to copy and paste:
Make a class that derives framework element and add in the overrides as seen
public class AreaDrawingEdit : FrameworkElement
{
public VisualCollection Visuals { get; set; }
const double COLLISION_OPACITY = 0.8;
public AreaDrawingEdit()
{
Visuals = new VisualCollection(this);
}
public void AddRenderTile(DrawingTile tile)
{
// Add the tile visual
tile.visual = new DrawingVisual();
InvalidateTile(tile);
Visuals.Add(tile.visual);
// Add in collision visual
tile.colVol.visual = new DrawingVisual();
InvalidateCollisionVol(tile.colVol);
Visuals.Add(tile.colVol.visual);
}
public void RemoveRenderTile(DrawingTile tile)
{
Visuals.Remove(tile.visual);
Visuals.Remove(tile.colVol.visual);
}
public void InvalidateTile(DrawingTile tile)
{
// Set up drawing rect for new tile
Rect r = new Rect(tile.pos, new Size(tile.tileTex.src.PixelWidth, tile.tileTex.src.PixelHeight));
DrawingContext dc = tile.visual.RenderOpen();
dc.DrawImage(tile.tileTex.src, r);
dc.Close();
}
public void InvalidateCollisionVol(CollisionVol vol)
{
Rect r = new Rect(vol.pos, vol.size);
DrawingContext dc = vol.visual.RenderOpen();
dc.PushOpacity(COLLISION_OPACITY);
dc.DrawImage(vol.src, r);
dc.Pop();
dc.Close();
}
protected override int VisualChildrenCount
{
get { return Visuals.Count; }
}
protected override Visual GetVisualChild(int index)
{
if (index < 0 || index >= Visuals.Count)
{
throw new ArgumentOutOfRangeException();
}
return Visuals[index];
}
}
Add the framework element thing you made into your xaml file somewhere.
lessthan local:AreaDrawingEdit Canvas.Left="0" Canvas.Top="0" OpacityMask="Black" x:Name="areaDrawingEdit" backslashgreaterthan
Enjoy the solution to my misery of figuring it out the hard-way.
Hey.
I havea 480 x 800 image and would like to place this on my tilemap. I'm trying to split the image into into a grid (6 x 10) and assign each tile that specific portion of the image. Essentially, the tilemap will look like one big image since each tile has the relevant part of the image attached to it. What's the best way of doing this?
I've tried going through each tile and drawing it to a WriteableBitmap, but all the images are the same.
WriteableBitmap wb = new WriteableBitmap(80,80);
Rect src= new Rect(x*Width,y*Height, 80, 80);
Rect dest= new Rect(0, 0, 80, 80);
wb.Blit(dest, mainWb, src);
tile.SetImage(wb);
(x and y) are the just the indexes used when iterating through the tilemap, 80 is the tile height and width and mainWb is the big image I want to split. Thanks for any help.
edit: Full loop code:
var mainImage = Application.GetResourceStream(new Uri("MainImage.jpg", UriKind.Relative)).Stream;
WriteableBitmap mainWb = new WriteableBitmap(480, 800);
mainWb.SetSource(mainImage);
for (int x = 0; x < 6; x++)
{
for (int y = 0; y < 12; y++)
{
Tile tile = new Tile();
WriteableBitmap wb = new WriteableBitmap(80,80);
Rect src = new Rect(x*Width,y*Height, 80, 80);
Rect dest = new Rect(0, 0, 80, 80);
wb.Blit(dest, mainWb, src);
tile.SetImage(wb);
Canvas.SetLeft(tile, x * WIDTH);
Canvas.SetTop(tile, y * HEIGHT);
LayoutRoot.Children.Add(tile);
ls.Add(tile);
}
}
The Tile class is a simple 80x80 canvas with an Image control called img. The SetImage method above is this:
public void SetImage(WriteableBitmap wb)
{
img.Source = wb;
}
you can do it with a nice trick - just crop the image each time using a canvas, and move the image so each time another piece is showing:
<Canvas Width="80" Height="80">
<Canvas.Clip>
<RectangleGeometry Rect="0,0,80,80" />
</Canvas.Clip>
<Image Source="your_image.png"
Canvas.Left="0" Canvas.Top="0" />
<!-- or -80, -160, -240 etc.. -->
</Canvas>