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

Vertical content alignement not working

1 Answer 24 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
bostjan asked on 23 Feb 2016, 07:25 AM


I have been using the RadDiagram for a few weeks now and came across a problem when I tried to align the content on the connection between two shapes. I have defined a template for the RadDiagramConnection and the RouteConnections is set to True on the diagram. On the connection an image is shown that I can not align vertically. I tried using text instead of an image but result is the same. What am I doing wrong? 

Is there perhaps a way to define a template for connectors?

I have pasted below the code of both elements and the image of problem. 

<Style TargetType="telerik:RadDiagram" >
        <Setter Property="AllowCopy" Value="False" />
        <Setter Property="AllowCut" Value="False" />
        <Setter Property="AllowDelete" Value="False" />
        <Setter Property="AllowPaste" Value="False" />
        <Setter Property="IsConnectorsManipulationEnabled" Value="False" />
        <Setter Property="IsInformationAdornerVisible" Value="False" />
        <Setter Property="IsManipulationAdornerVisible" Value="True" />
        <Setter Property="IsResizingEnabled" Value="False" />
        <Setter Property="IsRotationEnabled" Value="False" />
        <Setter Property="IsSnapToItemsEnabled" Value="False" />
        <Setter Property="IsEditable" Value="False" />
        <Setter Property="IsSnapToGridEnabled" Value="False" />
        <Setter Property="ActiveTool" Value="PointerTool" />
        <Setter Property="SelectionMode" Value="Extended" />
        <Setter Property="IsBackgroundSurfaceVisible" Value="True" />
        <Setter Property="RectSelectionMode" Value="Partial" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="MinWidth" Value="500" />
        <Setter Property="RouteConnections" Value="True" />
        <Setter Property="telerik:DiagramSurface.IsVirtualizing" Value="False" />
        <Setter Property="telerik:DiagramAnimations.IsPanAnimationEnabled" Value="False" />
        <Setter Property="telerik:DiagramAnimations.IsZoomAnimationEnabled" Value="False" />
        <Setter Property="telerik:DiagramAnimations.AnimationDuration" Value="0.2" />
        <Setter Property="primitives:BackgroundPageGrid.IsGridVisible" Value="False" />
    <Style TargetType="telerik:RadDiagramConnection" >
        <Setter Property="telerik:RadDiagramConnection.IsAutoUpdateSuppressed" Value="True" />
        <Setter Property="Visibility" Value="{Binding Visibility, Mode=TwoWay}" />
        <Setter Property="ConnectionType" Value="Polyline" />
        <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
        <Setter Property="TargetCapType" Value="Arrow1Filled" />
        <Setter Property="Stroke" Value="{telerik:Windows8Resource ResourceKey=StrongBrush}" />
        <Setter Property="StrokeThickness" Value="2" />
        <Setter Property="VerticalContentAlignment" Value="Top"></Setter>
        <Setter Property="ContentTemplate">
                    <StackPanel Margin="0,0,0,0" Orientation="Vertical">
                        <Image Source="{Binding Converter={StaticResource imageSourceBasedOnNodeType}}" Width="30" Height="30" Margin="10 10 10 10" 
                               ToolTip="{Binding Path=.Target.TransformationTypeDesc}"
                               Visibility="{Binding Converter={StaticResource imageVisibilityBasedOnType}}"></Image>

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 25 Feb 2016, 03:51 PM
Hi ,

Thank you for the provided code snippet, it helped us to reproduce the issue on our side. It seems that the VerticalContentAlignment property does not apply to the RadDiagramConnection content when is set in style. That's why we logged an issue in our Feedback Portal where you can track its progress. As a workaround, you can try to set the property locally.

<telerik:RadDiagramConnection VerticalContentAlignment="Bottom" />
In databinding scenarios , you will have access to the connections in the ItemsChanged event handler of the RadDiagram. You will be able to get the RadDiagramConnection like so:
var connection = this.diagram.ContainerGenerator.ContainerFromItem(e.AddedItems[0]) as RadDiagramConnection;
if (connection  != null)

As for the second question in your post. Basically, you can set a custom style to all RadDiagramConnectors via the  ConnectorStyle property. You can take a look at the Styling and Style Selectors help article which describes the properties you can use to customize the default look of the RadDiagram items.

Hope this information is helpful.

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question