Layout() function

4 posts, 0 answers
  1. Rob
    Rob avatar
    5 posts
    Member since:
    Apr 2012

    Posted 31 May 2012 Link to this post

    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">

     

  2. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 01 Jun 2012 Link to this post

    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 >>

  3. DevCraft banner
  4. Rob
    Rob avatar
    5 posts
    Member since:
    Apr 2012

    Posted 20 Jun 2012 Link to this post

    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>
  5. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 21 Jun 2012 Link to this post

    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 >>

Back to Top