ColumnDataPoint style

Jul 23, 2009 at 4:18 PM

I was hoping someone could help me with a wpf toolkit chart problem i'm having.  I have a vertical bar chart that I want to display the y axis value on top of the bar itself.  This is so I can remove all gridlines and y axis labels to give the chart a cleaner look.  At first I placed the value inside the bar itself.  This looked great but falls apart if the bar height is small, you can no longer see the value inside it.  Now I want to place the value a couple pixels above the bar so it will always be visible.  I have tried everything I can think of to get this to work.  Such as using stack panel, grid with multi rows.  Most things I have tried will dispay the value, but make the actual bar dissapear.  Any help I could get on this would be greatly appreciated.  Here's what I have so for for the style.  The textbox at the bottom which is binding to a property called "Value" is what i'm trying to move above the bar.: 


<Style
                        x:Key="MyColumnDataPointStyle"
                        TargetType="chartingToolkit:ColumnDataPoint">
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="chartingToolkit:ColumnDataPoint">
                                    <Border
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        Opacity="0"
                                        x:Name="Root">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualStateGroup.Transitions>
                                                    <VisualTransition GeneratedDuration="0:0:0.1"/>
                                                </VisualStateGroup.Transitions>
                                                <VisualState x:Name="Normal"/>
                                                <VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <DoubleAnimation
                                                            Storyboard.TargetName="MouseOverHighlight"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="0.6"
                                                            Duration="0"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                            <VisualStateGroup x:Name="SelectionStates">
                                                <VisualStateGroup.Transitions>
                                                    <VisualTransition GeneratedDuration="0:0:0.1"/>
                                                </VisualStateGroup.Transitions>
                                                <VisualState x:Name="Unselected"/>
                                                <VisualState x:Name="Selected">
                                                    <Storyboard>
                                                        <DoubleAnimation
                                                            Storyboard.TargetName="SelectionHighlight"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="0.6"
                                                            Duration="0"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                            <VisualStateGroup x:Name="RevealStates">
                                                <VisualStateGroup.Transitions>
                                                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                                                </VisualStateGroup.Transitions>
                                                <VisualState x:Name="Shown">
                                                    <Storyboard>
                                                        <DoubleAnimation
                                                            Storyboard.TargetName="Root"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="1"
                                                            Duration="0"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Hidden">
                                                    <Storyboard>
                                                        <DoubleAnimation
                                                            Storyboard.TargetName="Root"
                                                            Storyboard.TargetProperty="Opacity"
                                                            To="0"
                                                            Duration="0"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Grid
                                            Background="{TemplateBinding Background}">
                                            <Rectangle >
                                                <Rectangle.Style>
                                                    <Style TargetType="{x:Type Rectangle}">
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding Path=SummaryBarDataColorConverter}" Value="NoChange">
                                                                <Setter Property="Fill" Value="{DynamicResource UnchangedBarFill}" />
                                                                <Setter Property="Stroke" Value="{DynamicResource UnchangedBarStroke}" />
                                                            </DataTrigger>
                                                            <DataTrigger Binding="{Binding Path=SummaryBarDataColorConverter}" Value="Up">
                                                                <Setter Property="Fill" Value="{DynamicResource AdvanceBarFill}" />
                                                                <Setter Property="Stroke" Value="{DynamicResource UnchangedBarStroke}" />
                                                            </DataTrigger>
                                                            <DataTrigger Binding="{Binding Path=SummaryBarDataColorConverter}" Value="Down">
                                                                <Setter Property="Fill" Value="{DynamicResource DeclineBarFill}" />
                                                                <Setter Property="Stroke" Value="{DynamicResource UnchangedBarStroke}" />
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Rectangle.Style>
                                            </Rectangle>
                                            <Border
                                                BorderBrush="#ccffffff"
                                                BorderThickness="1">
                                                <Border
                                                    BorderBrush="#77ffffff"
                                                    BorderThickness="1"/>
                                            </Border>
                                            <Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
                                            <Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
                                            <TextBlock
                                                Text="{Binding Value}"
                                                Canvas.ZIndex="10"
                                                Foreground="WhiteSmoke"
                                                FontWeight="Bold"
                                                FontSize="12"
                                                Margin="2"
                                                VerticalAlignment="Bottom"
                                                HorizontalAlignment="Center" />
                                        </Grid>
                                        <ToolTipService.ToolTip>
                                            <StackPanel>
                                                <ContentControl
                                                    Content="Custom ToolTip"
                                                    FontWeight="Normal"/>
                                                <ContentControl
                                                    Content="{Binding Value}"/>
                                            </StackPanel>
                                        </ToolTipService.ToolTip>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

 

 

Thank you for any help on this.

 

Regards,

Troy

Coordinator
Jul 27, 2009 at 11:15 PM

Troy! We were emailing over the weekend and I said I'd post about this when I wrote about my proposed solution. I wrote it up on the bus this morning, so here you go:

http://blogs.msdn.com/delay/archive/2009/07/27/simple-column-labels-you-can-create-at-home-re-templating-the-silverlight-wpf-data-visualization-columndatapoint-to-add-annotations.aspx

Hope it works for you!

Jul 27, 2009 at 11:45 PM
Thank you so much for writing this up. The annotations on top of the bar are EXACTLY what I was looking for. Thanks again for your effort on this, and on the rest of your chart posts. They have been invaluable to me.



Best regards,


Troy Johnson

http://www.anothercodesite.com/blog





i'm EMAILING FOR THE GREATER GOOD
Join me




From: [email removed]
To: [email removed]
Date: Mon, 27 Jul 2009 16:16:02 -0700
Subject: Re: ColumnDataPoint style [wpf:63341]

From: davidans
Troy! We were emailing over the weekend and I said I'd post about this when I wrote about my proposed solution. I wrote it up on the bus this morning, so here you go:
http://blogs.msdn.com/delay/archive/2009/07/27/simple-column-labels-you-can-create-at-home-re-templating-the-silverlight-wpf-data-visualization-columndatapoint-to-add-annotations.aspx
Hope it works for you!
Mar 28, 2011 at 4:39 PM
davidans wrote:

Troy! We were emailing over the weekend and I said I'd post about this when I wrote about my proposed solution. I wrote it up on the bus this morning, so here you go:

http://blogs.msdn.com/delay/archive/2009/07/27/simple-column-labels-you-can-create-at-home-re-templating-the-silverlight-wpf-data-visualization-columndatapoint-to-add-annotations.aspx

Hope it works for you!


Hi,

I've tried the example in the attached link and it worked fine with the values stated. However, if I have small and big values, i.e. 1,3, 9998 and set the maximum value for the y-axis to 10000, the small points no longer display the value (I was hoping although the bar would not appear that the value above would still be rendered). If anyone knows how I can achieve this it would be great.

Thanks,

Keith