Ordering Containers in RadDiagram for WPF

1 Answer 19 Views
Diagram
Tulio
Top achievements
Rank 1
Tulio asked on 04 May 2021, 01:10 AM

Hi,

We ended up giving up on this issue a while back, but we are back trying to solve it, and I am wondering if there is any new way that we could set the order that Containers appear in the diagram.

We have a RadDiagram with several rectangular containers which contains several hexagons inside of them. we can easily place the hexagons wherever we want, but we cannot assure that the containers are displayed in an order we want.

We can easily do that for shapes, however whenever we bind to the position of a container, the binding gets overridden with (0,-26).

What we want is to be able to display containers on the diagram, ordered by the container's display header. From Left to right, top to bottom. Is that possible?


This is roughly what we are using:


Diagram:

<RadDiagram 
                                                    MinWidth="500"
                                                    IsPanEnabled="True"
                                                    ContainerShapeStyle="{StaticResource ContainerStyle}"
                                                    ShapeStyle="{StaticResource ShapeStyle}"
                                                    Style="{StaticResource RadDiagramStyle}"
                                                    PreviewMouseMove="diagram_PreviewMouseMove"
                                                    Grid.Row="0"
                                                    telerik:DiagramSurface.IsVirtualizing="True"
                                                    ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                                                    ScrollViewer.VerticalScrollBarVisibility="Hidden"
                                                    Background="{DynamicResource RadDiagram_Base_Normal_Background}"
                                                    IsSnapToGridEnabled="False"
                                                    IsConnectorsManipulationEnabled="False"
                                                    SelectionMode="None"
                                                    IsSnapToItemsEnabled="False"
                                                    IsInformationAdornerVisible="False"
                                                    telerik:DiagramAnimations.IsPanAnimationEnabled="False"
                                                    telerik:DiagramAnimations.IsZoomAnimationEnabled="False"
                                                    IsZoomEnabled="True"
                                                    AllowDelete="False"
                                                    IsEditable="False"
                                                    AllowPaste="False"
                                                    Primitives:BackgroundGrid.IsGridVisible="False"
                                                    AutoLayout="False"
                                                    Primitives:BackgroundPageGrid.IsGridVisible="False"
                                                    GraphSource="{Binding Nodes, Mode=OneWay}"/>


Container Style:

<Style x:Key="ContainerStyle"
           TargetType="telerik:RadDiagramContainerShape"
           BasedOn="{StaticResource RadDiagramContainerShapeStyle}">
      <Setter Property="Position"
              Value="{Binding Position, Mode=TwoWay}" />
      <Setter Property="AllowDelete"
              Value="False"/>
      <Setter Property="IsCollapsible"
              Value="{Binding IsHidden, Mode=OneTime}"/>
      <Setter Property="CollapsedContent"
              Value=""/>
      <Setter Property="UseDefaultConnectors"
              Value="False"/>
      <Setter Property="UseGlidingConnector"
              Value="False"/>
      <Setter Property="IsConnectorsManipulationEnabled"
              Value="False"/>
      <Setter Property="IsEditable"
              Value="False"/>
      <Setter Property="IsRotationEnabled"
              Value="False"/>
      <Setter Property="IsResizingEnabled"
              Value="False"/>
      <Setter Property="AllowCut"
              Value="False"/>
      <Setter Property="IsDraggingEnabled"
              Value="False"/>
      <Setter Property="ToolTip"
              Value="{Binding Details}"/>
      <Setter Property="ToolTipService.IsEnabled"
              Value="False" />
      <Setter Property="Background"
              Value="Red"/>
      <Setter Property="HorizontalContentAlignment"
              Value="Left"/>
      <Setter Property="BorderBrush"
              Value="Transparent"/>
      <Setter Property="IsCollapsed"
              Value="{Binding IsHidden, Mode=TwoWay}"/>
      <Setter Property="ContentTemplate">
        <Setter.Value>
          <DataTemplate>
            <TextBlock x:Name="HeaderText"
                       Foreground="{DynamicResource FocusAttentionGroupForegroundBrush}"
                       Text="{Binding Content}"
                       Background="Transparent"/>
          </DataTemplate>
        </Setter.Value>
      </Setter>
    </Style>

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 06 May 2021, 12:17 PM

Hello Tulio,

The requested functionality is not supported out of the box. To achieve your requirement, you can position the containers manually by setting their Position property. However, note that you will need to also position the shapes inside (again, with their Position property). If a shape is positioned outside of the container bounds, its size will auto-inflate in order to ensure that the shape is inside.

As a side note, I guess you are referring to the following forum. If this is the case, than the statement there is still valid.

Regards,
Martin Ivanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Diagram
Asked by
Tulio
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question
or