Ordering Containers in RadDiagram for WPF

[Tulio]

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>

[Martin Ivanov]

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