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

Layout() function

3 Answers 123 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 01 Jun 2012, 04:28 AM
How come calling

this.diagram.Layout();

Causes no diagram shapes to appear unless i set width and height properties here?

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

 

3 Answers, 1 is accepted

Sort by
0
Alex Fidanov
Telerik team
answered on 01 Jun 2012, 12:34 PM
Hi,

 I am not able to reproduce this behavior in a clean example. Could you please share more information on your scenario. One thing that comes in my mind, is that probably you are trying to layout the shapes when they are not measured/arranged and their size is still 0.

Regards,
Alex Fidanov
the Telerik team

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

0
Rob
Top achievements
Rank 1
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: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="Height" Value="{Binding Height, Mode=OneWay}" />-->
 
                <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>
                            </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>
0
Alex Fidanov
Telerik team
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 >>

Tags
Diagram
Asked by
Rob
Top achievements
Rank 1
Answers by
Alex Fidanov
Telerik team
Rob
Top achievements
Rank 1
Share this question
or