Layout Cycle Detected Error when templating StackedBar

[Alexandre BARBIER]

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>

[Velin]

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.