HorizontalStackedBar Style make bar to vanish

7 posts, 1 answers
  1. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 27 Jul 2011 Link to this post

    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 -
  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 28 Jul 2011 Link to this post

    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:
    1. Chart and ContextMenu
    2. 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!

  3. UI for WPF is Visual Studio 2017 Ready
  4. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 28 Jul 2011 Link to this post

    Hi Sia,
    The template i use, was indeed extracted by blend.

    - Cedric -
  5. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 28 Jul 2011 Link to this post

    My style works if the serie definition is StackedBarDefinitions, and if i set accordingly the targettype in the style to Telerik:Bar.

    But no way with HorizontalBarSerieDefinitions & targetType HorizontalBar.

    - Cedric -
  6. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 01 Aug 2011 Link to this post

    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 -
  7. Answer
    Sia
    Admin
    Sia avatar
    667 posts

    Posted 02 Aug 2011 Link to this post

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

  8. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 21 Sep 2011 Link to this post

    Hi Sia
    Sorry for the long delay, i've switched on something else after holidays.
    I don't know why Blend did not extract correctly the Style (i 've just right made another try) but when i put the name as you advise me all is fine.

    Thanks a lot

    - Cedric -
Back to Top
UI for WPF is Visual Studio 2017 Ready