Missing Chart Legend

Posted Sat, Jan 29 2011 17:18 by Deborah Kurata

If you built a custom theme for your application (similar to this prior post) then you may find that your chart legend contents disappear.

NOTE: This post is part of a series that starts with this prior post. The example in this post uses the application that is built as part of that series.

The chart built in this prior post looks like this:

image

Notice that the legend (circled in red) is empty.

The problem appears to be a mismatch between the standard theme dll (which displays the legend correctly) and the theme source file provided for customization (which does not display the legend correctly).

To fix the legend:

1)  Find the visualizationToolkit:Legend Style in your theme.

2) Replace the StackPanel in the theme file with an ItemsPresenter.

3) Rebuild the solution.

The legend then magically appears:

image

You can then set other style properties, such as the size and font, to improve the look of the legend.

image

The resulting style is shown below with the modified lines shown in red.

<!--Legend-->
<Style TargetType="visualizationToolkit:Legend">
    <Setter Property="BorderBrush"
     Value="{StaticResource ControlBorderBrush}"/>
    <Setter Property="Background"
     Value="{StaticResource ControlBackgroundBrush}"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="TitleStyle">
        <Setter.Value>
            <Style TargetType="visualizationToolkit:Title">
                <Setter Property="Margin" Value="0,5,0,10"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="visualizationToolkit:Legend">
                <Border
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    VerticalAlignment="Center"
                    Padding="2">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <visualizationToolkit:Title
                            Grid.Row="0"
                            Content="{TemplateBinding Header}"
                            Style="{TemplateBinding TitleStyle}"/>
                        <ScrollViewer
                            Grid.Row="1"
                            VerticalScrollBarVisibility="Auto"
                            BorderThickness="0"
                            Padding="0"
                            IsTabStop="False">
                            <ItemsPresenter
                                x:Name="LegendItemsArea"
                                Margin="10,0,10,10" />
                        </ScrollViewer>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

If you use the same custom theme for your entire application, you will only need to do this one time. If you use multiple custom themes, you will need to repeat this process for each theme file.

Enjoy!

Filed under: , , , ,

Comments

# Silverlight: Wish List II

Friday, February 25, 2011 8:05 PM by Deborah's Developer MindScape

Just in time for the Academy Awards, this post sounds more like a movie title (similar to Death Wish

Leave a Comment

(required) 
(required) 
(optional)
(required) 
If you can't read this number refresh your screen
Enter the numbers above: