Deborah's Developer MindScape

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:

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:

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

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!