Using scrollview in TableShape

[Bekzod]

Hi All

I try to build sqlDiagram, I have TableShape sample code. How can I use scrollview in TableShape? I want to scroll TableShape rows.

[Petar Mladenov]

Hello Bekzod,

By default, the RadDiagramContainer shape is ContentControl that looks like ItemsControl but it is not.
When you drop or add shapes in ContainerShape, they are direct children of the RadDiagram. The ContainerShape is resized and it is placed behind the shapes with ZIndex - this way it looks like it is their parent but it is not. On the other hand, if you place a FrameworkElement in ContainerShape - for example Rectangle - the Diagram will create a DiagramShape with Content this Rectangle and the shape will be placed in the ContainerShape.

The short answer is - there is no easy way to achieve such requirement because it is typical for ItemsControls - ItemsPresenter in the ControlTemplate is wrapped with ScrollViewer.  Even if you change the default template of ContainerShape to have ItemsPresenter inside, still a lot of work needs to be done - the shapes will be children of the ContainerShape, not the diagram - much of the built-in feature will not work - connection attaching, binding with graphsource, dragging, etc. Shapes in Diagram need to reside in Diagram and they are not ready to use outside Diagram or inside anything else than Diagram.

The easiest approach you can use is to place  ScrollViewer inside ContainerShape like so:

<telerik:RadDiagramContainerShape>
              <ScrollViewer Height="100">
                  <StackPanel>
                      <telerik:RadDiagramShape Content="shape 1" />
                      <telerik:RadDiagramShape Content="shape 2" />
                      <telerik:RadDiagramShape Content="shape 3" />
                      <telerik:RadDiagramShape Content="shape 4" />
                      <telerik:RadDiagramShape Content="shape 5" />
                  </StackPanel>
              </ScrollViewer>
          </telerik:RadDiagramContainerShape>
      </telerik:RadDiagram>

Of course the Diagram will create a Shape to wrap the ScrollViewer. If you want to avoid this shape appear visually , you can try something like:

<telerik:RadDiagramContainerShape>
              <telerik:RadDiagramShape Padding="0" IsManipulationAdornerVisible="False">
                  <ScrollViewer Height="100">
                      <StackPanel>
                          <telerik:RadDiagramShape Content="shape 1" />
                          <telerik:RadDiagramShape Content="shape 2" />
                          <telerik:RadDiagramShape Content="shape 3" />

We hope this will help you proceed further.

Regards,
Petar Mladenov
Telerik