Advanced connector styling

2 posts, 0 answers
  1. Kristoffer
    Kristoffer avatar
    158 posts
    Member since:
    Dec 2012

    Posted 29 Aug 2013 Link to this post

    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>
  2. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 03 Sep 2013 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top