Advanced connector styling

[Kristoffer]

I have custom classes and custom styles for RadDiagram, RadDiagramShape, RadDiagramConnection, RadDiagramConnector. Now I have run into a styling issue that requires pro help from you :)

I want my connectors to show their label when either of these two conditions is met:
1) The connector's shape (or any of its children) is hovered by the mouse.
2) Any connection, from any shape, is being dragged.

I started off adding a TextBlock to my connector style, but it seems I cannot properly toggle its visibility. If I set it to "Collapsed", it is never shown. Maybe this approach is all wrong, but still, here it is:

<Style TargetType="chart:MyChartConnector" x:Key="MyChartConnectorStyle" BasedOn="{StaticResource RadDiagramConnectorStyle}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <!-- Auto seems reasonable? -->
    <Setter Property="Width" Value="Auto" />
    <Setter Property="Height" Value="Auto" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="chart:MyChartConnector">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="MouseStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisplayElement"
                                            Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ActiveStates">
                            <VisualState x:Name="Inactive" />
                            <VisualState x:Name="Active">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0"
                                            Storyboard.TargetName="DisplayElement"
                                            Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid>
                        <Ellipse x:Name="OverElement"
                                 Width="20"
                                 Height="20"
                                 Fill="{TemplateBinding Background}"
                                 StrokeThickness="{TemplateBinding BorderThickness}"
                                 Stroke="{TemplateBinding BorderBrush}" />
                        <Ellipse x:Name="DisplayElement"
                                 Width="20"
                                 Height="20"
                                 Fill="#40000000"
                                 StrokeThickness="{TemplateBinding BorderThickness}"
                                 Stroke="{TemplateBinding BorderBrush}" />

                        <!-- This does not work as intented :( -->
                        <TextBlock Text="{TemplateBinding DisplayName}" Visibility="Collapsed">
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type chart:MyChartShape}}, Path=IsMouseOver}" Value="True" >
                                            <Setter Property="Visibility" Value="Visible" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

[Hristo]

Hello Kristoffer,

Based on your code, I thing the issue is caused by locally set Visibility value to Collapsed. You could try setting the Visibility property to collapsed in a style setter. Then the style trigger will override the style setter.
Currently in your could, setting the Visibility locally on the TextBlock blocks the trigger. This is because local values has higher precedence than style triggers. You could find more info here.

Regards,
Hristo
Telerik