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

HorizontalStackedBar Style make bar to vanish

6 Answers 75 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 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 >>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

HorizontalStackedBar Style make bar to vanish

6 Answers, 1 is accepted