0
votes

In my project, I need directional / moving arrow to hint for people moving direction. I've done part of it (with VisualBrush), snapshot below:

enter image description here

But in reality the line will never be straight, it could for example looks like:

enter image description here

How can I do this in WPF?

Code for the moving line:

<Rectangle x:Key="MovingLine" Width="500" Height="15">
    <Rectangle.RenderTransform>
        <RotateTransform Angle="0" />
    </Rectangle.RenderTransform>
    <Rectangle.Fill>
        <VisualBrush TileMode="Tile" Viewport="0,0,10,15" ViewportUnits="Absolute" Viewbox="0,0,16,16" ViewboxUnits="Absolute">
            <VisualBrush.Transform>
                <TranslateTransform X="0" Y="0" />
            </VisualBrush.Transform>
            <VisualBrush.Visual>
                <Grid Background="Black">
                    <Polygon Fill="Yellow" Points="0,0 8,0 16,8 8,16 0,16 8,8" />
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Rectangle.Fill>
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Control.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="0" To="10" RepeatBehavior="Forever" Storyboard.TargetProperty="(Rectangle.Fill).(VisualBrush.Transform).(TranslateTransform.X)" Duration="0:0:0.1" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>
Can you post your code for the yellow arrow? Otherwise we don't know how you make the arrow and cannot modify based on it.Gqqnbig
@Gqqnbig I added my wpf resource into question. thank you!Val
You can try with <Path StrokeThickness="15" Data="M 7.5 100 L 7.5 30 A 22.5 22.5 0 0 1 30,7.5 L 100 7.5">. But your arrow doesn't follow the direction of the line.Gqqnbig
@Gqqnbig but I need arrow follow direction of the line. It's not so uncommon case, so I was thinking there must be some way that can be done with WPF.Val
I admit it's not an uncommon case but I'm unaware of native WPF support to it. It's like draw gradient following a curve, and there are no easy solutions [[1]](stackoverflow.com/questions/4839666/…). You may get insights from GradientPath.Gqqnbig