This is a migrated thread and some comments may be shown as answers.

Layout() function

3 Answers 178 Views

Diagram

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

3 Answers, 1 is accepted

answered on 20 Jun 2012, 09:48 PM

I'm calling layout() function after i set the graph source

this.diagram.GraphSource = CreateDatacomThingGraphSource();

this.diagram.Layout();

My xaml looks like this.

<UserControl x:Class="Datacom.CorporateSys.SL.OneManager.Diagram.View.DiagramTestView"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:tools="clr-namespace:Telerik.Windows.Diagrams.Core;assembly=Telerik.Windows.Diagrams.Core"

xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Diagrams.Primitives;assembly=Telerik.Windows.Controls.Diagrams"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

<UserControl.Resources>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">

<Grid.Resources>

<Style x:Key="ShapeStyle" TargetType="telerik:RadDiagramShape">

<Setter Property="Background" Value="Transparent" />

<Setter Property="BorderBrush" Value="Transparent" />

<Setter Property="Foreground" Value="Black" />

<Setter Property="Width" Value="190" />

<Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />

<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />

</Style>

<DataTemplate x:Key="HeaderTemplate">

<Grid Width="184" Height="60">

<StackPanel Margin="5,2,0,0" HorizontalAlignment="Left">

<TextBlock x:Name="PART_Header" Text="{Binding Thing.Name}" Foreground="#FF000000"

TextTrimming="WordEllipsis" TextWrapping="NoWrap" Width="Auto" MaxWidth="160"

Height="20" FontFamily="Segoe UI Semibold" FontSize="12" />

<TextBlock x:Name="PART_SubHeader" Text="{Binding Thing.LongName}" Width="Auto" Height="Auto"

TextWrapping="Wrap" FontSize="12" Foreground="#FF000000" FontFamily="Segoe UI" />

</StackPanel>

</Grid>

</DataTemplate>

<Style TargetType="telerik:RadToggleButton" x:Key="RadToggleButtonStyle">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadToggleButton">

<Grid Background="Transparent" Cursor="Hand">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="rect"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#59000000" />

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed" />

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStates">

<VisualState x:Name="Checked">

<Storyboard>

<DoubleAnimation Storyboard.TargetName="arrow"

Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"

To="180" Duration="0:0:0.2" />

</Storyboard>

</VisualState>

<VisualState x:Name="Unchecked">

<Storyboard>

<DoubleAnimation Storyboard.TargetName="arrow"

Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"

To="0" Duration="0:0:0.2" />

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Rectangle x:Name="rect" RadiusY="2" RadiusX="2" StrokeThickness="2" Width="14"

Height="14" Fill="#FF333333" />

<Grid Width="14" Height="14" x:Name="arrow" RenderTransformOrigin="0.5,0.5">

<Path x:Name="path1"

Data="M8,0 L8,1.999831 L4,4.2555118 L0,1.9998311 L0,1.1920929E-07 L4,2.255681 z"

Fill="White" HorizontalAlignment="Center" Margin="0,0,0,4" Stretch="Fill"

VerticalAlignment="Center" StrokeThickness="2" UseLayoutRounding="False"

Width="6" Height="4" />

<Path x:Name="path2"

Data="M8,0 L8,1.999831 L4,4.2555118 L0,1.9998311 L0,1.1920929E-07 L4,2.255681 z"

Fill="White" HorizontalAlignment="Center" Margin="0,0,0,3" Stretch="Fill"

StrokeThickness="2" UseLayoutRounding="False" Width="6" Height="4"

VerticalAlignment="Bottom" />

<Grid.RenderTransform>

<RotateTransform Angle="0" />

</Grid.RenderTransform>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<DataTemplate x:Key="ClassTemplate" >

<Border BorderBrush="#FF87ACBE" BorderThickness="2" VerticalAlignment="Top" Grid.RowSpan="2"

CornerRadius="5" Background="#FFF1FAFF" Width="Auto" Height="Auto" HorizontalAlignment="Stretch">

<Grid x:Name="PART_maingrid">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Border BorderBrush="#FF87ACBE" BorderThickness="0,0,0,1" VerticalAlignment="Top"

CornerRadius="5,5,0,0" Background="#FFF1FAFF" Cursor="Hand" x:Name="PART_HeaderBorder">

<ContentPresenter x:Name="Header" HorizontalAlignment="Left" Content="{Binding}"

Margin="0 4" ContentTemplate="{StaticResource HeaderTemplate}" />

</Border>

<telerik:RadToggleButton Style="{StaticResource RadToggleButtonStyle}" Width="15" Height="17"

IsChecked="True" x:Name="ShowHideButton" VerticalAlignment="Top"

HorizontalAlignment="Right" Margin="0 6 6 0" />

<!--<telerik:RadToggleButton Style="{StaticResource RadToggleButtonStyle}" Width="15" Height="17"

IsChecked="True" x:Name="ShowHideButton" VerticalAlignment="Top"

HorizontalAlignment="Right" Margin="0 6 6 0" />-->

<Border Background="White" Padding="0" BorderBrush="Transparent" Grid.Row="1"

BorderThickness="0" CornerRadius="0" VerticalAlignment="Top"

Visibility="{Binding IsChecked, ElementName=ShowHideButton, Converter={StaticResource BooleanToVisibilityConverter}}"

>

<ListBox ItemsSource="{Binding Thing.ThingAttributes, Mode=TwoWay}" Width="250" Margin="0,5,0,10" BorderThickness="0"

DisplayMemberPath="AttributeDetail"/>

<!--<telerik:RadGridView x:Name="ThingsGrid"

Margin="0"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Grid.Row ="1"

ItemsSource="{Binding Thing.ThingAttributes, Mode=TwoWay}"

DataLoadMode="Synchronous"

AutoExpandGroups="False"

CanUserDeleteRows="False"

CanUserFreezeColumns="False"

CanUserReorderColumns="True"

CanUserResizeColumns="True"

RowIndicatorVisibility="Collapsed"

IsFilteringAllowed="True"

GridLinesVisibility="Vertical"

ShowGroupPanel="False"

SelectionMode="Single"

EnableColumnVirtualization="True"

EnableRowVirtualization="True"

CanUserSortColumns="True"

AutoGenerateColumns="False"

ValidatesOnDataErrors="None"

ActionOnLostFocus="CommitEdit"

IsReadOnly="True"

Height="Auto"

Width="Auto"

>

<telerik:RadGridView.Columns>

<telerik:GridViewDataColumn MinWidth="60" IsReadOnly="True" IsGroupable="True" DataMemberBinding="{Binding AttributeMaster.Name, Mode=TwoWay, ValidatesOnDataErrors=False}" Header="Value" />

<telerik:GridViewDataColumn MinWidth="60" IsReadOnly="True" IsGroupable="True" DataMemberBinding="{Binding ValueText, Mode=TwoWay, ValidatesOnDataErrors=False}" Header="Value" />

</telerik:RadGridView.Columns>

</telerik:RadGridView>-->

<!--<telerik:RadTreeView

ItemsSource="{Binding Thing.ThingAttributes}" SelectionMode="Extended"

BorderThickness="0" telerik:AnimationManager.IsAnimationEnabled="False"

Margin="0,0,0,6" x:Name="TreeView" />-->

</Border>

</Grid>

</Border>

</DataTemplate>

<Style x:Key="thingNodeStyle" TargetType="telerik:RadDiagram">

<Setter Property="AllowCopy" Value="False" />

<Setter Property="AllowCut" Value="False" />

<Setter Property="AllowDelete" Value="False" />

<Setter Property="AllowPaste" Value="False" />

<Setter Property="IsConnectorsManipulationEnabled" Value="False" />

<Setter Property="IsEditable" Value="False" />

<Setter Property="IsResizingEnabled" Value="False" />

<Setter Property="IsRotationEnabled" Value="False" />

<Setter Property="IsSnapEnabled" Value="False" />

<Setter Property="ShapeTemplate" Value="{StaticResource ClassTemplate}" />

<Setter Property="ShapeStyle" Value="{StaticResource ShapeStyle}" />

<Setter Property="PositionX" Value="-40" />

<Setter Property="PositionY" Value="-40" />

</Style>

<Style x:Key="pascalEdgeStyle" TargetType="telerik:RadDiagramConnection">

<Setter Property="TargetCapType" Value="Arrow2Filled" />

<Setter Property="SourceCapType" Value="Arrow5" />

<Setter Property="ContentTemplate">

<Setter.Value>

<DataTemplate >

<TextBlock Text="{Binding RelationshipType}" />

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

<telerik:RadDiagram x:Name="diagram" SizeChanged="diagram_SizeChanged"

ConnectionStyle="{StaticResource pascalEdgeStyle}"

Style="{StaticResource thingNodeStyle}" />

</Grid>

</UserControl>

answered on 21 Jun 2012, 09:00 AM

Hi,

The reason for this is that when you call the Layout method, the shapes have not yet been measured and their bounds (position and size) are not yet initialized. We are currently working on this, and you can find an item logged in our system here. Until this is resolved, your best option is to use a Dispatcher to delay the layout process just enough so that the shapes can be measured and initialized.

this.Dispatcher.BeginInvoke(new Action(() =>
{
diagram.Layout();
}), System.Windows.Threading.DispatcherPriority.Background);

Greetings,
Alex Fidanov
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>