Style of Connectors

3 posts, 1 answers
  1. benjamin
    benjamin avatar
    2 posts
    Member since:
    Oct 2016

    Posted 24 Oct Link to this post

    Basically I want the same behavior than your OrgChartDiagram demo.

    I would like to display the bottom connector button only instead of displaying them all.

    Can you please tell me which style should I set to solve my problem ?

    Here you can find my source code :

    https://drive.google.com/drive/folders/0B6VcnKZGRsYHd2hYMDV2YnVaVjA?usp=sharing

    Thank you.

     

    Kind Regards,

    BCornec

  2. Answer
    Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 27 Oct Link to this post

    Hi Benjamin,

    Unfortunately I should say that this demo is too complex and you won't be able to achieve such appearance with XAML only.  Let's shed some more light on how you might have a single connection by looking into the demo's source code:
    1. We have custom style for the RadDiagramConnector (located in Resources.xaml file):

    <Style TargetType="telerik:RadDiagramConnector" x:Key="connectorsStyle" BasedOn="{StaticResource RadDiagramConnectorStyle}">
         <Setter Property="Visibility" Value="Visible" />
         <Setter Property="Canvas.ZIndex" Value="10" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="telerik:RadDiagramConnector">
                     <Canvas Visibility="{Binding Children.Count, Converter={StaticResource CountToVisibilityConverter}}">
                         <telerik:RadToggleButton Canvas.Left="{TemplateBinding Canvas.Left}"
                                                  Canvas.Top="{TemplateBinding Canvas.Top}"
                                                  Command="{Binding ToggleVisibilityCommand}"
                                                  CommandParameter="{Binding}"
                                                  Style="{StaticResource ToggleConnectorStyle}" />
                     </Canvas>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

    Here you might see that it will be represented by a RadToggleButton with it's own style applied (ToggleConnectorStyle) located in the same file. 

    The connectors count however we control in code behind (check the OrgChartExample.xaml.cs file and search for EnsureConnectors method) . As you will see we clear the connectors collection of the shape and then create a single one that we position with the use of Canvas.Left and Canvas.Top attached properties (that's the reason why we wrap the ToggleButton in Canvas in the control template of the Diagram Connector) outside the shape and at its bottom.

    I hope this information helps.

    Regards,
    Evgenia
    Telerik by Progress
    Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
  3. UI for WPF is Visual Studio 2017 Ready
  4. benjamin
    benjamin avatar
    2 posts
    Member since:
    Oct 2016

    Posted 27 Oct in reply to Evgenia Link to this post

    Thank you for your help, I think you gave me everything I need.

    EnsureConnectors was the one I missed.

Back to Top