Change color of link arrowhead on selection

GoXam
1

I have a DataTemplate defined for the links in the DiagramPanel. What I am trying to do is when a link is selected to change the color from black to blue. The problem I haven’t been able to find a solution for is the arrowhead does not change color, the link path and adornments change to blue, but the arrowhead remains black. Below is the xaml:

Thanks, Hawk

  <DataTemplate x:Key="LinkTemplate">
    <DataTemplate.Resources>
      <Storyboard x:Key="Highlight">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="LinkShape" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
          <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MediumBlueBottom}" />
        </ColorAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
          <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MediumBlueBottom}" />
        </ColorAnimationUsingKeyFrames>
      </Storyboard>
    </DataTemplate.Resources>
    <go:LinkPanel go:Part.Copyable="False"
                  go:Part.Deletable="{Binding Data.IsDeletable}"
                  go:Part.Reshapable="True"
                  go:Part.Selectable="{Binding Data.IsSelectable}"
                  go:Part.SelectionAdorned="True"
                  go:Part.SelectionAdornmentTemplate="{StaticResource LinkSelectionAdornmentTemplate}">
      <go:Link.Route>
        <go:Route Curve="None"
                  FromEndSegmentLength="30"
                  ToEndSegmentLength="30"
                  ToShortLength="3"
                  LinkReshapeHandleTemplate="{StaticResource LinkReshapeHandleTemplate}"
                  RelinkableFrom="False"
                  RelinkableTo="False"
                  Routing="AvoidsNodes"
                  Margin="2" />
      </go:Link.Route>
      <go:LinkShape Stroke="Transparent" StrokeThickness="5" />
      <go:LinkShape x:Name="LinkShape"
                    Stroke="Black"
                    StrokeThickness="2.5" />
      <go:LinkShape x:Name="Path"
                    Stroke="Black"
                    StrokeThickness="2.5" />
      <Path Fill="{Binding Stroke, ElementName=Path}"
            Stroke="{Binding Stroke, ElementName=LinkShape}"
            go:LinkPanel.ToArrow="Triangle"
            go:LinkPanel.ToArrowScale="1.25" />
    </go:LinkPanel>
    <DataTemplate.Triggers>
      <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="Path">
        <StopStoryboard BeginStoryboardName="Highlight_BeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="Path">
        <BeginStoryboard x:Name="Highlight_BeginStoryboard" Storyboard="{StaticResource Highlight}" />
      </EventTrigger>
    </DataTemplate.Triggers>
  </DataTemplate>
2

You have a superfluous LinkShape (the third one). Delete it, and move the x:Name=“Path” to the Path element, which is the arrowhead.

3

Thanks for the quick reply. That corrected the arrowhead color to change on selection.

But now the link itself does not change, only the adornments and the arrowhead are changing to blue.

I missed adding in the other templates used in the xaml:

  <DataTemplate x:Key="LinkReshapeHandleTemplate">
    <go:ToolHandle Width="10" Height="10" StrokeThickness="1" go:NodePanel.Figure="Diamond" >
      <go:ToolHandle.Fill>
          <SolidColorBrush Color="{StaticResource MediumBlueBottom}" />
      </go:ToolHandle.Fill>
      <go:ToolHandle.Stroke>
          <SolidColorBrush Color="{StaticResource MediumBlueBottom}" />
      </go:ToolHandle.Stroke>
  <span ="Apple-tab-span" style="white-space:pre">	</span></go:ToolHandle>
  </DataTemplate>

  <DataTemplate x:Key="LinkSelectionAdornmentTemplate">
    <go:SelectionHandle StrokeThickness="5" >
      <go:SelectionHandle.Fill>
          <SolidColorBrush Color="{StaticResource MediumBlueBottom}" />
      </go:SelectionHandle.Fill>
      <go:SelectionHandle.Stroke>
          <SolidColorBrush Color="{StaticResource MediumBlueBottom}" />
      </go:SelectionHandle.Stroke>
  <span ="Apple-tab-span" style="white-space:pre">	</span></go:SelectionHandle>
  </DataTemplate>
4

Is your Path.Fill Binding circular?
Why do you have two ColorAnimations?

You’re going to have to examine your XAML carefully to debug it.

5

Oh, another problem: the x:Name of one of the LinkShapes must be “Path”, since that is the name used by some internal code that might need to find that shape.

So you should actually delete the LinkShape named “LinkShape”, not the one named “Path”. Sorry for any confusion I may have caused earlier.

6

I’ve read through your suggestions and did some cleanup of the xaml code.

With your last suggestion (the X:Name of one of the LinkShapes must be “Path”), it is back to when a link is selected, the link and the adornment changes to blue while the arrowhead remains black.

But my animation of when mousing over the link, both the link and the arrowhead are highlighted in blue.


<go:ToolHandle Width=“15” Height=“15” StrokeThickness=“1” go:NodePanel.Figure=“Diamond” >
go:ToolHandle.Fill

</go:ToolHandle.Fill>
go:ToolHandle.Stroke

</go:ToolHandle.Stroke>
<span =“Apple-tab-span” style=“white-space:pre”> </go:ToolHandle>

  <DataTemplate x:Key="LinkSelectionAdornmentTemplate">
    <go:SelectionHandle StrokeThickness="3" >
      <go:SelectionHandle.Fill>
          <SolidColorBrush Color="{StaticResource MediumBlueBottom}" />
      </go:SelectionHandle.Fill>
      <go:SelectionHandle.Stroke>
          <SolidColorBrush Color="{StaticResource MediumBlueBottom}" />
      </go:SelectionHandle.Stroke>
  <span ="Apple-tab-span" style="white-space:pre">	</span></go:SelectionHandle>
  </DataTemplate>

  <DataTemplate x:Key="LinkTemplate">
    <DataTemplate.Resources>
      <Storyboard x:Key="Highlight">
        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
          <EasingColorKeyFrame KeyTime="0" Value="{StaticResource MediumBlueBottom}" />
        </ColorAnimationUsingKeyFrames>
      </Storyboard>
    </DataTemplate.Resources>
    <go:LinkPanel go:Part.Copyable="False"
                  go:Part.Deletable="{Binding Data.IsDeletable}"
                  go:Part.Reshapable="True"
                  go:Part.Selectable="{Binding Data.IsSelectable}"
                  go:Part.SelectionAdorned="True"
                  go:Part.SelectionAdornmentTemplate="{StaticResource LinkSelectionAdornmentTemplate}">
      <go:Link.Route>
        <go:Route Curve="None"
                  FromEndSegmentLength="30"
                  ToEndSegmentLength="30"
                  ToShortLength="3"
                  LinkReshapeHandleTemplate="{StaticResource LinkReshapeHandleTemplate}"
                  RelinkableFrom="False"
                  RelinkableTo="False"
                  Routing="AvoidsNodes"
                  Margin="2" />
      </go:Link.Route>
      <go:LinkShape Stroke="Transparent" StrokeThickness="5" />
      <go:LinkShape x:Name="Path"
                    Stroke="Black"
                    StrokeThickness="2.5" />
      <Path x:Name="MyPath"
            Fill="{Binding Stroke, ElementName=Path}"
            Stroke="{Binding Stroke, ElementName=Path}"
            go:LinkPanel.ToArrow="Triangle"
            go:LinkPanel.ToArrowScale="1.25" />
      <go:LinkPanel.ToolTip>
        <TextBlock Text="{Binding Data.LinkOutputValue}" FontWeight="Bold" FontSize="14"/>
      </go:LinkPanel.ToolTip>
    </go:LinkPanel>
    <DataTemplate.Triggers>
      <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="Path">
        <StopStoryboard BeginStoryboardName="Highlight_BeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="Path">
        <BeginStoryboard x:Name="Highlight_BeginStoryboard" Storyboard="{StaticResource Highlight}" />
      </EventTrigger>
    </DataTemplate.Triggers>
  </DataTemplate>
7

It appears that you are using an Adornment to show the selection – you have set go:Part.SelectionAdorned=“True”.

I suggest you use two separate Bindings, on the LinkShape.Stroke and on the arrowhead’s Path.Fill (you can set Path.Stroke="{x:Null}")

<go:BooleanBrushConverter x:Key="theSelectionConverter"
                          FalseBrush="Black" TrueBrush="Orange" />

<DataTemplate x:Key="LinkTemplate">
  <go:LinkPanel>
    . . .
    <go:LinkShape x:Name="Path" Stroke="{Binding Path=Part.IsSelected, Converter={StaticResource theSelectionConverter}}" StrokeThickness="1" />
    <Path Fill="{Binding Path=Part.IsSelected, Converter={StaticResource theSelectionConverter}}" go:LinkPanel.ToArrow="Triangle" />
  </go:LinkPanel>
</DataTemplate>
8

Thanks! This is working great now for setting static colors.

Is there a way to specify the FalseBrush of the converter with binding to a property?
It doesn’t allow: FalseBrush="{Binding Data.LinkColor}"

9

MultiBinding converter?