Charts legend textwrap

Question

Hi,

How could I enable text wrapping for each legend Items?

Thank you

Answer 1

Have you tried editing a copy of the template of the control in Blend? You might be able to enable wrapping there.

 (select the control > right click > Edit Template > Edit a Copy)

Answer 2

 I have finish the trial period with Blend; could you, please, post for me the code that i have to use, please?

Thank you a lot!

Answer 3

try applying this style to your chart.

<UserControl.Resources>
<Style x:Key="LegendItemStyle1" TargetType="chartingToolkit:LegendItem">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:LegendItem">
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{Binding Background}" Stroke="{Binding BorderBrush}" StrokeThickness="1" Height="8" Margin="0,0,3,0" Width="8"/>
<TextBlock Text="{TemplateBinding Content}" TextWrapping="Wrap" MaxWidth="100"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<chartingToolkit:Chart>
<chartingToolkit:BarSeries Title="Test test test test test test test" LegendItemStyle="{StaticResource LegendItemStyle1}"/>
</chartingToolkit:Chart>
</Grid> 

What I did was basically switch the standard VisualizationToolkit:Title, which doesn't have wrapping, with a regular textblock. So this:
<visualizationToolkit:Title Content="{TemplateBinding Content}" />
became this:
<TextBlock Text="{TemplateBinding Content}" TextWrapping="Wrap"/>

 Hope this solves your problem.

Answer 4

Well, i faced the same problem with desktop WPF application and finally it was solved

 you really need to edit the LegendItem template this can be achieved easly using blend

1- open a wpf project in blend 

2- add xml name space "chartingToolkit" for clr name space System.Windows.Controls.DataVisualization.Charting and assembly System.Windows.Controls.DataVisualization.Toolkit  and the following control to xaml

  

<chartingToolkit:LegendItem/>

 then in designer view you can click the legend item and chose Edit template

and edit the template as follows:

    

1    <ResourceDictionary
2            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
3    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
4        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
5        xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
6        xmlns:System_Windows_Controls_DataVisualization_Charting_Primitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
7    xmlns:local="clr-namespace:WpfApplication1">
8    <local:Subtractor x:Key="Sub"/>
9    	<Style x:Key="LegendItemStyle1" TargetType="{x:Type chartingToolkit:LegendItem}">
10   		<Setter Property="IsTabStop" Value="False"/>
11   		<Setter Property="Template">
12   			<Setter.Value>
13   				<ControlTemplate TargetType="{x:Type chartingToolkit:LegendItem}">
14   					<StackPanel Orientation="Horizontal">
15   						<Rectangle Fill="{Binding Background}" Stroke="{Binding BorderBrush}" StrokeThickness="1" Margin="0,0,3,0" Width="14" Height="14"/>
16   						<TextBlock Text="{TemplateBinding Content}" Width="{Binding Path=ActualWidth,Mode=OneWay,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Grid,AncestorLevel=4},Converter={StaticResource Sub},ConverterParameter=32}" TextWrapping="Wrap" Height="Auto"/>
17   					</StackPanel>
18   				</ControlTemplate>
19   			</Setter.Value>
20   		</Setter>
21   	</Style>
22   </ResourceDictionary>

 

  the change here from the default template is:

1- At line 16 the width parameter of TextBlock Control, i bind the TextBlock width to the property ActualWidth in OneWay mode the value sourece is a RelativeSource identified by Mode=FindAncestor to serach for TextBlock Ancestor in UI tree provided that the Ancestor is of type Grid and it's 4 levels up.

2- At line 7 i've added the application assembly as "local" name space.

3- At line 8 i've added a resource of type local:Subtractor wich refers to the following class

  

1    namespace WpfApplication1
2    {
3        public class Subtractor:IValueConverter
4        {
5            #region IValueConverter Members
6    
7            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
8            {
9                double measure = (double)value;
10               double sub = Double.Parse((string)parameter);
11               return (measure-sub);
12           }
13   
14           public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
15           {
16               throw new NotImplementedException();
17           }
18   
19           #endregion
20       }
21   }

 the resource has a key x:key="Sub"

4- the resource was used in line 16 Xaml as a Converter="Sub" with Converterparameter="32" this was used to subtract 32 from the grid actual width befor assigning the result to the text block width.

Note; the text block UI tree in the default template is:

Grid-->ScrollViewer-->StackPanel-->StackPanel-->TextBlock

this will be clear once you take a look at the Legend default teplate:

 

1    <Style x:Key="LegendStyle1" TargetType="{x:Type visualizationToolkit:Legend}">
2    		<Setter Property="BorderBrush" Value="Black"/>
3    		<Setter Property="BorderThickness" Value="1"/>
4    		<Setter Property="IsTabStop" Value="False"/>
5    		<Setter Property="TitleStyle">
6    			<Setter.Value>
7    				<Style TargetType="{x:Type visualizationToolkit:Title}">
8    					<Setter Property="Margin" Value="0,5,0,10"/>
9    					<Setter Property="FontWeight" Value="Bold"/>
10   					<Setter Property="HorizontalAlignment" Value="Center"/>
11   				</Style>
12   			</Setter.Value>
13   		</Setter>
14   		<Setter Property="Template">
15   			<Setter.Value>
16   				<ControlTemplate TargetType="{x:Type visualizationToolkit:Legend}">
17   					<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="2">
18   						<Grid>
19   							<Grid.RowDefinitions>
20   								<RowDefinition Height="Auto"/>
21   								<RowDefinition/>
22   							</Grid.RowDefinitions>
23                               <Grid.ColumnDefinitions>
24                                   <ColumnDefinition Width="Auto"/>
25                               </Grid.ColumnDefinitions>
26   							<visualizationToolkit:Title Style="{TemplateBinding TitleStyle}" Content="{TemplateBinding Title}" Grid.Row="0"/>
27   							<ScrollViewer BorderThickness="0" IsTabStop="False" Padding="0" Grid.Row="1" VerticalScrollBarVisibility="Auto">
28   								<StackPanel x:Name="LegendItemsArea" Margin="10,0,10,10" Grid.Column="1"/>
29   							</ScrollViewer>
30   						</Grid>
31   					</Border>
32   				</ControlTemplate>
33   			</Setter.Value>
34   		</Setter>
35   	</Style>

  Finally you need to assign the new LegendItem style to each LegendItem this can be done with the following code:

1    foreach (LegendItem li in Chart.LegendItems)
2                        {
3                            li.Style = (Style)Application.Current.FindResource("LegendItemStyle1");
4                        }

  you need to place this code where you Add a new series to the chart control.

I hope this was helpful.

Answer 5

Hey Thanks for this post.

But it did not resolved my problem.

But when I used following properties, it worked.

May be it will be helpful to some one

                   <Setter Property="ItemsPanel">
                            <Setter.Value>
                                <ItemsPanelTemplate>
                                    <toolkit:WrapPanel Orientation="Horizontal">

                                    </toolkit:WrapPanel>
                                </ItemsPanelTemplate>
                            </Setter.Value>
                        </Setter>