Используйте изображение как контур обводки полилинии

Question

У меня есть приложение, похожее на краску, когда я перемещаю мышь, оно рисует линию полилинией. Теперь я хочу заменить контур полилинии изображением шаблона, поэтому, когда я перемещаю мышь на холсте, он повторяет это изображение как контур полилинии. Я уже написал этот код:

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

Единственная проблема заключается в том, что он использует изображение в качестве невидимого фона для всего холста, и когда я перемещаю мышь, эта часть фона становится видимой! Посмотрите на эту картинку, чтобы понять, что я имею в виду:

http://goo.gl/2wPKN

Вот также мой шаблон изображения, если вы хотите посмотреть:

http://goo.gl/staHt

Итак, у вас есть идея, как мне использовать это изображение в качестве контура моей полилинии?

Answer 1

Вы можете использовать ImageBrush с TileMode установлен в Tile и Viewport это определяет желаемый размер плитки изображения.

<Polyline x:Name="polyline" StrokeThickness="20">
    <Polyline.Stroke>
        <ImageBrush ImageSource="1.png" TileMode="Tile"
                    ViewportUnits="Absolute" Viewport="0,0,20,20"/>
    </Polyline.Stroke>
</Polyline>

Answer 2

Я не пробовал это с PolyLine, но с помощью пути вы можете установить его обводку следующим образом.

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