RadDiagramShape Visibility

[Vivian]

Hi, 

I am new to Silverlight and Telerik, therefore it took me 2 days in trying to solve the RadDiagramShape visibility. In the end, I hope this thread will be able to help me to solve my problem. Below is the description of my problem.

I created two RadDiagramShape (shape_1, shape_2), connected with an arrow pointing from shape_1 to shape_2. And I have a RadToggleButton, which invoked a method in code behind, to make the shape_2 and the connection visibility to false/collapsed when it is triggered. However, the problem is I can't change the visibility by using code behind.

Hope there will be an answer to my problem soon.

Thank you.

[Pavel R. Pavlov]

Hi Vivian,

There is a limitation in Silverlight that comes from the framework. You are not allowed to access any Connections or Shapes in the RadDiagram control in code-behind using the x:Name property. However, there are two other ways to achieve your goal:

• The RadDiagram exposes Shapes and Connections properties. They hold all items of type RadDiagramShape and RadDiagramConnection used in the control. Also, there is an Items property, which combines the previous two. You can use any of these properties to access the desired items by index.
• The other way to achieve your goal is to use the FindChildByType() method of the RadDiagram control. With this approach you can find the desired element by it's x:Name property.

Please take a look at the attached project and find the described approaches implemented.

Regards,
Pavel R. Pavlov
the Telerik team

[Vivian]

Hi Pavel,

Thank you very much for the reply and also the sample codes. Based on your code, you were actually finding the child's name and collapsed it. What if I do not know which child(s) it has and do not even know the number of child(s) it contains? 

By the way, may I know is there any way where I can implement scrollview in RadDiagramShape? 
Both statements below worked for RadDiagram, but not RadDiagramShape :
ScrollViewer.SetHorizontalScrollBarVisibility(diagram, ScrollBarVisibility.Visible);
ScrollViewer.SetVerticalScrollBarVisibility(diagram, ScrollBarVisibility.Visible);

[Pavel R. Pavlov]

Hello Vivian,

As I mentioned in my previous post the RadDiagram exposes Shapes and Connections properties of type ShapeCollection and ConnectionCollection hence you will always be able to access their Count property

int shapesCount = xDiagram.Shapes.Count;
int connectionsCount = xDiagram.Connections.Count;

Also, you can bind the Visibility property of the RadDiagramsSapes to a property of your business object using a Style Setter. Please take a look at the attached project and let me know if it works for you.

Regarding your second question, please have in mind that the Content property of the RadDiagramShape is of type Object and you can add a ScrollViewer in it. In order to visualize it you have to set the Height and Width properties of the shape as well as it's X and Y properties. You can do this in XAML with the following code:

<telerik:RadDiagramShape x:Name="xShape_1"
                         Height="150"
                         Width="150"
                         X="100"
                         Y="200">
    <telerik:RadDiagramShape.Content>
        <ScrollViewer>
            ...
        </ScrollViewer>
    </telerik:RadDiagramShape.Content>
</telerik:RadDiagramShape>

Also, if you need to zoom or navigate the RadDiagram control you can use the DiagramNavigationPane extension.

Kind regards,
Pavel R. Pavlov
the Telerik team

[Vivian]

Hi Pavel,

As mentioned I have a RadToggleButton for an event clicked detection. What if I remove the radToggleButton and left shapes. How am I going to trace which shape is being selected and trigger an event to call another function? 

Please note that all my codes are written in code behind and no XAML involved.

Thank you

[Pavel R. Pavlov]

Hi Vivian,

As far as I understand your question is: "How to get the selected RadDiagramShape?". You can achieve your goal by subscribing to the SelectionChanged event of the RadDiagram. When that event is invoked you will be able to cast the e.AddedItems[0] to a RadDiagramShape object. Note the e.AddedItems is of type IList and it will be populated with all selected items (shapes or connections). Also, the arguments of the SelectionChanged event of the RadDiagram expose RemoverItems property. It is of type IList and it holds all items that are deselected. In order to get the desired shape you can traverse the corresponding collection and find it. I hope this approach will work for you.

Kind regards,
Pavel R. Pavlov
the Telerik team

[Vivian]

Hi Pavel,

Thank you for the explanation. However, could you please provide me some sample of coding. I think I will be able to understand by coding rather than words. =)

Thank you

[Pavel R. Pavlov]

Hello Vivian,

Unfortunately, we don't have sample solution demonstrating this approach. This is why I will kindly ask you to try to implement my description in a sample project. If you have any issues, it will be best to send me your implementation so that I can get a better idea of your progress and suggest the best approach in your case.

Regards,
Pavel R. Pavlov
the Telerik team