0

I have a paint-like application, when I move the mouse it will draw a line by polyline. Now I want to replace the polyline outline with a pattern image, so when I move the mouse in the canvas it repeats that image as polyline's outline. I've already written this code:

<Canvas x:Name="canvas" Background="#00FFFFFF" MouseMove="Canvas_MouseMove">
    <Polyline x:Name="polyline" StrokeThickness="20">
        <Polyline.Stroke>
            <VisualBrush >
                <VisualBrush.Visual>
                    <Image Source="1.png"></Image>
                </VisualBrush.Visual>
            </VisualBrush>
        </Polyline.Stroke>
    </Polyline>
</Canvas>

The only problem is that it uses the image as an invisible background for the whole canvas and when I move the mouse that part of the background became visible! Look at this picture to get what I mean:

http://goo.gl/2wPKN

here is also my image pattern if you want to have a look:

http://goo.gl/staHt

So do you have any idea how should I use this image as my polyline outline?

Max
  • 3
  • 2
  • Can you provide an image of how it *should* look like? What exactly does "outline" mean in your case? – Clemens Feb 28 '13 at 17:07
  • I want to replace the simple line defined in polyline's stroke with a small repeated image. The result would be something like my current output (http://goo.gl/2wPKN) but the image would be repeated in polyline's path and not as the background of canvas. I hope I made myself clear, but sorry if I still don't make any sense! – Max Feb 28 '13 at 17:36
  • Did you try a tiled brush as shown in the answer below? You may set the [ViewportUnits](http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.viewportunits.aspx) to `Absolute` and set an appropriate viewport size. – Clemens Feb 28 '13 at 17:43
  • Yes I tried that answer, this code `` give the same result as before and by adding `ViewportUnits="Absolute"` it only gives a constant pink brush without any image. – Max Feb 28 '13 at 18:04
  • Try setting Viewport to something that makes sense, like `Viewport="0,0,20,20"` or so. – Clemens Feb 28 '13 at 18:14

2 Answers2

0

I've not tried it with PolyLine but with a path you can set it's stroke like this.

<Path StrokeThickness="10" Data="M 10,10 100,10" Stretch="Fill" Margin="81,36,251,100">
   <Path.Stroke>
        <ImageBrush ImageSource="1.png" Viewport="0,0,1,1" TileMode="Tile"/>
   </Path.Stroke>
</Path>
Andy
  • 6,366
  • 1
  • 32
  • 37
  • Thanks for your input, this code `` gives the same result as before and by adding `ViewportUnits="Absolute"` it only gives a constant pink brush without any image. – Max Feb 28 '13 at 18:09
0

You may use an ImageBrush with a TileMode set to Tile and a Viewport that specifies the desired image tile size.

<Polyline x:Name="polyline" StrokeThickness="20">
    <Polyline.Stroke>
        <ImageBrush ImageSource="1.png" TileMode="Tile"
                    ViewportUnits="Absolute" Viewport="0,0,20,20"/>
    </Polyline.Stroke>
</Polyline>
Clemens
  • 123,504
  • 12
  • 155
  • 268