This is a migrated thread and some comments may be shown as answers.

Advanced connector styling

1 Answer 140 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Kristoffer
Top achievements
Rank 1
Kristoffer asked on 29 Aug 2013, 08:02 AM
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>

1 Answer, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 03 Sep 2013, 08:42 AM
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
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
Diagram
Asked by
Kristoffer
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Share this question
or