Layout Cycle Detected Error when templating StackedBar

2 posts, 0 answers
  1. Alexandre BARBIER
    Alexandre BARBIER avatar
    14 posts
    Member since:
    May 2009

    Posted 22 Feb 2010 Link to this post

    I have a layout circle error when I use a custom template for StakedBar. I add a button in the template in order to have more functionality (visual state …).


    Here is the code i use

     

    Thanks in advance...


    <Style x:Key="ButtonStackedBarStyle" TargetType="Button"
     
                <Setter Property="Template"
                    <Setter.Value> 
                        <ControlTemplate TargetType="Button"
                            <Grid> 
                                <VisualStateManager.VisualStateGroups> 
                                    <VisualStateGroup x:Name="CommonStates"
                                        <VisualState x:Name="Normal"/> 
                                        <VisualState x:Name="MouseOver"
                                            <Storyboard> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#AA000000"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#00000000"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#00000000"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#AA000000"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                        <VisualState x:Name="Pressed"
                                            <Storyboard> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#AA000000"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#00000000"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#00000000"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"
                                                    <SplineColorKeyFrame KeyTime="0" Value="#AA000000"/> 
                                                </ColorAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                        <VisualState x:Name="Disabled"
                                            <Storyboard> 
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity"
                                                    <SplineDoubleKeyFrame KeyTime="0" Value=".55"/> 
                                                </DoubleAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                    </VisualStateGroup> 
                                    <VisualStateGroup x:Name="FocusStates"
                                        <VisualState x:Name="Focused"
                                            <Storyboard> 
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity"
                                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
                                                </DoubleAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualState> 
                                        <VisualState x:Name="Unfocused"/> 
                                    </VisualStateGroup> 
                                </VisualStateManager.VisualStateGroups> 
           
                                    <Grid Margin="0" Background="{TemplateBinding Background}"
       
                                        <Rectangle x:Name="BackgroundGradient"
                                            <Rectangle.Fill> 
                                                <LinearGradientBrush EndPoint="0,.7" StartPoint="1,.7"
                                                    <GradientStop Color="#AA000000" Offset="0"/> 
                                                    <GradientStop Color="#20000000" Offset="0.3"/> 
                                                    <GradientStop Color="#20000000" Offset="0.7"/> 
                                                    <GradientStop Color="#AA000000" Offset="1"/> 
                                                </LinearGradientBrush> 
                                            </Rectangle.Fill> 
                                        </Rectangle> 
                                    </Grid> 
                                 
                                <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
                                <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/> 
                                <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/> 
                            </Grid> 
                        </ControlTemplate> 
                    </Setter.Value> 
                </Setter> 
            </Style> 
     
            <ControlTemplate x:Key="ButtonStackedBarControlTemplate" TargetType="telerikCharting:StackedBar"
                <Canvas> 
                    <Rectangle x:Name="PART_DefiningGeometry"  
                                       Height="{TemplateBinding ItemActualHeight}" 
                                       Width="{TemplateBinding ItemActualWidth}" 
                                       RadiusX="5"  
                                       RadiusY="5"  
                                       StrokeThickness="2" /> 
                    <Button  Height="{TemplateBinding ItemActualHeight}"  
                                         Width="{TemplateBinding ItemActualWidth}"  
                                         Background="{TemplateBinding Background}" 
                                         BorderThickness="0" 
                                         Style="{StaticResource ButtonStackedBarStyle}" 
                                         ClickMode="Hover"
     
                    </Button> 
                    <telerikCharting:SeriesItemLabel x:Name="PART_SeriesItemLabel" 
                                       HorizontalAlignment="Center" 
                                       Width="{TemplateBinding ItemActualWidth}" 
                                       Content="{TemplateBinding SeriesItemLabelText}" 
                                       Visibility="{TemplateBinding SeriesItemLabelVisibility}" /> 
                    <Canvas.RenderTransform> 
                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" /> 
                    </Canvas.RenderTransform> 
                    <Canvas.Triggers> 
                        <EventTrigger RoutedEvent="Rectangle.Loaded"
                            <EventTrigger.Actions> 
                                <BeginStoryboard> 
                                    <Storyboard BeginTime="00:00:00.5" 
                                                        x:Name="PART_Storyboard"
                                        <DoubleAnimationUsingKeyFrames  
                                                            Storyboard.TargetName="PART_AnimationTransform"  
                                                            Storyboard.TargetProperty="ScaleY" 
                                                            Duration="00:00:00.5" 
                                                            BeginTime="00:00:00.2"
                                            <SplineDoubleKeyFrame KeySpline="0.646,0.239,1,1" KeyTime="00:00:00" Value="0.025"/> 
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.495" Value="0.99" KeySpline="0.26,0.564,0.512,1"/> 
                                        </DoubleAnimationUsingKeyFrames> 
                                        <DoubleAnimationUsingKeyFrames  
                                                            Storyboard.TargetName="PART_DefiningGeometry"  
                                                            Storyboard.TargetProperty="Opacity" 
                                                            Duration="00:00:00.5" 
                                                            BeginTime="00:00:00.2"
                                            <SplineDoubleKeyFrame KeySpline="0.646,0.239,1,1" KeyTime="00:00:00" Value="0.7"/> 
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.495" Value="1" KeySpline="0.26,0.564,0.512,1"/> 
                                        </DoubleAnimationUsingKeyFrames> 
                                    </Storyboard> 
                                </BeginStoryboard> 
                            </EventTrigger.Actions> 
                        </EventTrigger> 
                    </Canvas.Triggers> 
                </Canvas> 
            </ControlTemplate> 
             
            <Style x:Key="StackedBarErrorStyle" TargetType="telerikCharting:StackedBar"
                <Setter Property="Background" Value="#FFFF0000"/> 
                <Setter Property="Template" Value="{StaticResource ButtonStackedBarControlTemplate}" /> 
            </Style> 

  2. Velin
    Admin
    Velin avatar
    391 posts

    Posted 25 Feb 2010 Link to this post

    Hi Alexandre BARBIER,

    This problem is related to existing limitations imposed by the silverlight platform and appears when a relatively large number of data points should be shown. You can read more about it here. Our suggestion for you is to keep your custom templates as simple as possible to keep layout calculations to the minimum.   

    Best wishes,
    Velin
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. DevCraft banner
Back to Top