CODEWITHSUNDEEP
wpflineimagebrush
Jonthemoon
Jonthemoon

Reputation: 49

How to Use an image as ImageBrush on a Line or Path in WPF

I have a Canvas on which I draw lines (via Lines or Paths) that indicates a road to follow for users. Is there a way to change the line so that it displays a repetitive image instead? What I'm looking for is to have a step icon (png with transparency) instead of a straight line.

Thanks!

Upvotes: 4

Views: 4596

Answers (2)

Fredrik Hedblad
Fredrik Hedblad

Reputation: 84647

This will draw a repeated image as Stroke for a Path. Laborate with the values of Viewport to achieve what you're looking for

<Path StrokeThickness="10" Data="M 10,10 100,10" Stretch="Fill">
    <Path.Stroke>
        <ImageBrush ImageSource="C:\arrow.gif" Viewport="0,0,0.1,1" TileMode="Tile"/>
    </Path.Stroke>
</Path>

Update

To rotate the ImageBrush you can add a RotateTransform to it

        <ImageBrush ImageSource="C:\arrow.gif" Viewport="0,0,1,0.1" TileMode="Tile">
            <ImageBrush.Transform>
                <RotateTransform Angle="90"/>
            </ImageBrush.Transform>
        </ImageBrush>

If you want an Image that follow a Path, you can use a similar approach as the answer to this question. I modified it a bit to use an Image instead

<Window.Resources>
    <PathGeometry x:Key="Path" x:Shared="False" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"/>
    <Image x:Key="followPathImage" x:Shared="False" x:Name="Arrow1" Source="C:\arrow.gif" Width="16" Height="16">
        <Image.RenderTransform>
            <TransformGroup>
                <TranslateTransform X="-8" Y="-8"/>
                <MatrixTransform>
                    <MatrixTransform.Matrix>
                        <Matrix/>
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </TransformGroup>
        </Image.RenderTransform>
        <Image.Triggers>
            <EventTrigger RoutedEvent="Image.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <MatrixAnimationUsingPath Storyboard.Target="{Binding RelativeSource={RelativeSource AncestorType={x:Type Image}}}" 
                                                  Storyboard.TargetProperty="RenderTransform.Children[1].Matrix"                                 
                                                  DoesRotateWithTangent="True" 
                                                  Duration="0:0:5"  
                                                  BeginTime="0:0:0" 
                                                  RepeatBehavior="Forever"
                                                  PathGeometry="{StaticResource Path}" >
                        </MatrixAnimationUsingPath>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
    </Image>
</Window.Resources>
<Canvas Width="400" Height="400" Name="canvas">
    <Path Data="{StaticResource Path}" Opacity="0" Stroke="Blue" StrokeThickness="1"/>
    <Button Canvas.Left="184" Canvas.Top="253" Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
</Canvas>

And some code behind to add the animated arrows

public MainWindow()
{
    InitializeComponent();
    var addAnimationThread = new Thread(new ThreadStart(() =>
    {
        for (int i = 0; i < 25; i++)
        {
            Dispatcher.Invoke(new Action(() =>
            {
                Image image = this.FindResource("followPathImage") as Image;
                canvas.Children.Add(image);
            }));
            Thread.Sleep(199);
        }
    }));
    addAnimationThread.Start();
}

Upvotes: 6

user1234567
user1234567

Reputation: 613

I am not quite sure I understand exactly what you want, but here my two cents on whatever I understood from your post:

You can draw lines using Line and/or Path objects. By using Paths, you can draw curved lines as opposed to linear lines. To simplify the design process, use MS Expression Blend and draw lines using the "Pencil" tool from the toolbox on the left-hand side of the screen. Make sure to play with the "StrokeThickness" property of a Path to change how thick each curve should look.

You can create buttons and paint them with a png image file. You need to initialize a button's "Background" property to an ImageBrush object that has an ImageSource. For example, the step icon can be the UI of a button. You can do this for many other elements and not just a button.

You can also directly import image files as "Image" objects and handle their events like MouseEnter, MouseLeave, MouseLeftButtonDown, and so on. In this case, you can treat an image like an interactive element that users can click, enter, leave, etc.

Also, try using some of the pre-defined shapes in Expression Blend. Click the "Assets" tab on the left-hand side of the screen right next to the toolbox and navigate to "Shapes".

Upvotes: -3

Related Questions