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

HorizontalStackedBar Style make bar to vanish

6 Answers 97 Views

Chart

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

Cedric asked on 27 Jul 2011, 06:16 PM

Hi,
I try to a a contextmenu on my HStackedBar to run a command.
I've read on manalo blog that i have to retemplated the serie (http://blogs.telerik.com/manoldonev/posts/10-02-08/wpf_silverlight_integrating_radchart_and_radcontextmenu_controls.aspx , thanks Manolo)

But i must do something wrong because the bars disappear if i use my style
Here is my code sample :

<telerik:RadTileView IsDockingEnabled="True"

Style="{StaticResource TileGraphStyle}"

ItemsSource="{Binding TechnicalItemsPerformance}">

<telerik:RadTileView.ContentTemplate>

<DataTemplate x:Uid="DataTemplate_11">

<telerik:RadChart Name="chartTechnicalItemsMax"

Background="Transparent"

BorderThickness="0"

IsTabStop="False"

UseDefaultLayout="False"

ItemsSource="{Binding StatusGroup}"

PaletteBrushes="{Binding BrushPalette}"

ToolTip="Display matching technical items by libraries"

x:Uid="chartTechnicalitems">

<telerik:RadChart.SeriesMappings>

<telerik:SeriesMapping x:Uid="telerik:SeriesMapping_12"

LegendLabel="Success"

CollectionIndex="0"

ChartAreaName="ItemArea">

<telerik:SeriesMapping.SeriesDefinition>

<telerik:HorizontalStackedBarSeriesDefinition x:Uid="telerik:StackedBarSeriesDefinition_12"

ShowItemLabels="True">

<telerik:HorizontalStackedBarSeriesDefinition.ItemStyle>

<Style x:Uid="Style_22"

TargetType="{x:Type telerik:HorizontalStackedBar}">

<Setter x:Uid="Setter_208"

Property="Template">

<Setter.Value>

<ControlTemplate x:Uid="ControlTemplate_1"

TargetType="{x:Type telerik:HorizontalStackedBar}">

<Canvas x:Uid="PART_MainContainer"

x:Name="PART_MainContainer"

Opacity="0">

<Canvas.ContextMenu>

<ContextMenu x:Uid="ContextMenu_1">

<MenuItem x:Uid="MenuItem_1"

Header="Go to class"

Command="{Binding StartFreeLearn}" />

</ContextMenu>

</Canvas.ContextMenu>

<Canvas.RenderTransform>

<ScaleTransform x:Uid="ScaleTransform_1"

ScaleX="0" />

</Canvas.RenderTransform>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Uid="HoverStates"

x:Name="HoverStates">

<VisualState x:Uid="Normal"

x:Name="Normal">

<Storyboard x:Uid="Storyboard_1">

<DoubleAnimation x:Uid="DoubleAnimation_1"

Duration="0:0:0.15"

To="1"

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="PART_MainContainer" />

</Storyboard>

</VisualState>

<VisualState x:Uid="Hovered"

x:Name="Hovered">

<Storyboard x:Uid="Storyboard_2">

<DoubleAnimation x:Uid="DoubleAnimation_2"

Duration="0:0:0.15"

To="1"

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="PART_MainContainer" />

</Storyboard>

</VisualState>

<VisualState x:Uid="Hidden"

x:Name="Hidden">

<Storyboard x:Uid="Storyboard_3">

<DoubleAnimation x:Uid="DoubleAnimation_3"

Duration="0:0:0.15"

To="0.15"

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="PART_MainContainer" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Uid="SelectionStates"

x:Name="SelectionStates">

<VisualState x:Uid="Unselected"

x:Name="Unselected" />

<VisualState x:Uid="Selected"

x:Name="Selected">

<Storyboard x:Uid="Storyboard_4">

<ObjectAnimationUsingKeyFrames x:Uid="ObjectAnimationUsingKeyFrames_1"

Duration="0:0:0.05"

Storyboard.TargetProperty="Stroke"

Storyboard.TargetName="PART_SelectedState">

<DiscreteObjectKeyFrame x:Uid="DiscreteObjectKeyFrame_1"

KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush x:Uid="SolidColorBrush_1"

Color="#B2000000" />

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames x:Uid="ObjectAnimationUsingKeyFrames_2"

Duration="0:0:0.05"

Storyboard.TargetProperty="StrokeThickness"

Storyboard.TargetName="PART_SelectedState">

<DiscreteObjectKeyFrame x:Uid="DiscreteObjectKeyFrame_2"

KeyTime="0"

Value="2">

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Rectangle x:Uid="PART_DefiningGeometry"

x:Name="PART_DefiningGeometry"

Height="{TemplateBinding ItemActualHeight}"

RadiusY="1"

RadiusX="1"

Style="{TemplateBinding ItemStyle}"

Width="{TemplateBinding ItemActualWidth}" />

<Rectangle x:Uid="Rectangle_1"

Height="{TemplateBinding ItemActualHeight}"

OpacityMask="Black"

RadiusY="1"

RadiusX="1"

Stroke="Transparent"

StrokeThickness="0"

Width="{TemplateBinding ItemActualWidth}">

<Rectangle.Fill>

<LinearGradientBrush x:Uid="LinearGradientBrush_1"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop x:Uid="GradientStop_1"

Color="Transparent" />

<GradientStop x:Uid="GradientStop_2"

Color="Transparent"

Offset="1" />

<GradientStop x:Uid="GradientStop_3"

Color="#19FFFFFF"

Offset="0.2" />

<GradientStop x:Uid="GradientStop_4"

Color="#B2FFFFFF"

Offset="0.2" />

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle x:Uid="PART_SelectedState"

x:Name="PART_SelectedState"

Fill="Transparent"

Height="{TemplateBinding ItemActualHeight}"

RadiusY="1"

RadiusX="1"

Width="{TemplateBinding ItemActualWidth}" />

</Canvas>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</telerik:HorizontalStackedBarSeriesDefinition.ItemStyle>

</telerik:HorizontalStackedBarSeriesDefinition>

</telerik:SeriesMapping.SeriesDefinition>

<telerik:SeriesMapping.ItemMappings>

<telerik:ItemMapping x:Uid="telerik:ItemMapping_23"

DataPointMember="YValue"

FieldName="Count" />

<telerik:ItemMapping x:Uid="telerik:ItemMapping_24"

DataPointMember="XCategory"

FieldName="Name" />

</telerik:SeriesMapping.ItemMappings>

</telerik:SeriesMapping>

<telerik:SeriesMapping x:Uid="telerik:SeriesMapping_13"

ChartAreaName="ItemArea"

LegendLabel="Hesitation"

CollectionIndex="1">

<telerik:SeriesMapping.SeriesDefinition>

<telerik:HorizontalStackedBarSeriesDefinition x:Uid="telerik:StackedBarSeriesDefinition_13"

ItemStyle="{StaticResource TechnicalBarStyle}"

ShowItemLabels="True" />

</telerik:SeriesMapping.SeriesDefinition>

<telerik:SeriesMapping.ItemMappings>

<telerik:ItemMapping x:Uid="telerik:ItemMapping_25"

DataPointMember="YValue"

FieldName="Count" />

<telerik:ItemMapping x:Uid="telerik:ItemMapping_26"

DataPointMember="XCategory"

FieldName="Name" />

</telerik:SeriesMapping.ItemMappings>

</telerik:SeriesMapping>

<telerik:SeriesMapping x:Uid="telerik:SeriesMapping_14"

ChartAreaName="ItemArea"

LegendLabel="Unknown"

CollectionIndex="2">

<telerik:SeriesMapping.SeriesDefinition>

<telerik:HorizontalStackedBarSeriesDefinition x:Uid="telerik:StackedBarSeriesDefinition_14"

ItemStyle="{StaticResource TechnicalBarStyle}"

ShowItemLabels="True" />

</telerik:SeriesMapping.SeriesDefinition>

<telerik:SeriesMapping.ItemMappings>

<telerik:ItemMapping x:Uid="telerik:ItemMapping_27"

DataPointMember="YValue"

FieldName="Count" />

<telerik:ItemMapping x:Uid="telerik:ItemMapping_28"

DataPointMember="XCategory"

FieldName="Name" />

</telerik:SeriesMapping.ItemMappings>

</telerik:SeriesMapping>

<telerik:SeriesMapping x:Uid="telerik:SeriesMapping_15"

ChartAreaName="ItemArea"

LegendLabel="Misrecognition"

CollectionIndex="3">

<telerik:SeriesMapping.SeriesDefinition>

<telerik:HorizontalStackedBarSeriesDefinition x:Uid="telerik:StackedBarSeriesDefinition_15"

ItemStyle="{StaticResource TechnicalBarStyle}"

ShowItemLabels="True" />

</telerik:SeriesMapping.SeriesDefinition>

<telerik:SeriesMapping.ItemMappings>

<telerik:ItemMapping x:Uid="telerik:ItemMapping_29"

DataPointMember="YValue"

FieldName="Count" />

<telerik:ItemMapping x:Uid="telerik:ItemMapping_30"

DataPointMember="XCategory"

FieldName="Name" />

</telerik:SeriesMapping.ItemMappings>

</telerik:SeriesMapping>

</telerik:RadChart.SeriesMappings>

<Grid x:Uid="Grid_8">

<Grid.ColumnDefinitions>

<ColumnDefinition x:Uid="ColumnDefinition_15"

Width="*" />

<ColumnDefinition x:Uid="ColumnDefinition_16"

Width="Auto" />

</Grid.ColumnDefinitions>

<ScrollViewer x:Uid="ScrollViewer_1"

Grid.Column="0"

HorizontalScrollBarVisibility="Disabled"

VerticalScrollBarVisibility="Auto">

<telerik:ChartArea x:Uid="ItemArea"

x:Name="ItemArea"

NoDataString="Not available" />

</ScrollViewer>

<telerik:ChartLegend x:Uid="telerik:ChartLegend_2"

Grid.Column="1"

Style="{StaticResource ClassificationLegendStyle}" />

</Grid>

</telerik:RadChart>

</DataTemplate>

</telerik:RadTileView.ContentTemplate>

<telerik:RadTileView.ItemTemplate>

<DataTemplate x:Uid="DataTemplate_5">

<TextBlock x:Uid="TextBlock_12"

Text="{Binding Name}" />

</DataTemplate>

</telerik:RadTileView.ItemTemplate>

</telerik:RadTileView>

TechnicalBarStyle is the same as you can see in the first serie.
It was just a try to see if it made a difference is the style was define in a ressource or in direct content, and not it doesn't...

- Cedric -

6 Answers, 1 is accepted

answered on 28 Jul 2011, 01:33 PM

Hi Cedric,

That is because the custom template shown in Manol's blog post is old and has inappropriate TargetType for your scenario. Please use the latest style from our source with target type telerik:HorizontalStackedBar. You can extract it using Blend as well.

You may find these demos useful:

Chart and ContextMenu
Sorting and Filtering /again there is a context menu/

Regards,
Sia
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

answered on 01 Aug 2011, 05:05 PM

At last, i have found that the problem comes from the template extracted by Blend.
I don't know why but the template comes with a scale transform to 0 !!!!!
I suppose that the transformation is removed internally by your composant !

<Style x:Key="HorizontalStackedBarStyle1" TargetType="{x:Type telerik:HorizontalStackedBar}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:HorizontalStackedBar}">

<Canvas x:Name="PART_MainContainer" Opacity="0">

<Canvas.RenderTransform>

<ScaleTransform ScaleX="0"/>

</Canvas.RenderTransform>

- Cedric -

Accepted

answered on 02 Aug 2011, 02:11 PM

MainWindow.zip

Hi Cedric,

Actually this scale transform is related to the animation in RadChart. The problem with your style is that there is a missing x:Name. Please check the attached files. The commented lines are from the original style extracted with Blend and <Style x:Uid="Style_22" TargetType="{x:Type telerik:HorizontalStackedBar}"> is your style but with one small modification:

<Canvas.RenderTransform>

<ScaleTransform x:Uid="ScaleTransform_1" x:Name="PART_AnimationTransform" ScaleX="0" />

</Canvas.RenderTransform>

Please try to add this and let us know if everything works as expected.

Best wishes,
Sia
the Telerik team

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