I have several pie charts in my application and I’d like to change the formatting of the legend. I was able to create a style for the legend and LegendItemTemplate DataTemplate for the legend items. However, there are 2 things I have not been able to figure out:
1) The legend seems to always evenly space the legend items over the entire height of the legend. I would like to the legend items to be aligned at the top of the legend. I can force the legend items to be closer together by setting the MarginType to “Percent” and setting the bottom margin, but what I really want is for the legend to take all the vertical space it needs and align the items to the top.
2) Sometimes the slices if my pie are very small and it is difficult to read the marker. Is it possible to move the marker outside the slice of pie, or to show the data values in the legend?
Below is an image that shows what my chart currently looks like (top) and what I want it to look like (bottom). Is it possible to do the things I want to do?
John Myczek
the only way i could find to do this is if you know the height of all the legend items combined. see the ContentPresenter below where i have set the Height explicitly to 50 ... this will do the trick, although it's not a perfect solution.
<igCA:XamChart.Resources> <Style TargetType="{x:Type igCA:Legend}"> <Setter Property="Foreground" Value="{StaticResource LegendItemForegroundBrush}"/> <Setter Property="Background" Value="{StaticResource LegendBackgroundBrush}"/> <Setter Property="UseDataTemplate" Value="True"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igCA:Legend}"> <Grid Background="{x:Null}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.08*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="0.08*"/> </Grid.ColumnDefinitions> <Border Width="Auto" Height="Auto" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1" CornerRadius="5,5,5,5" Background="{TemplateBinding Background}" Margin="0,0,0,0" Grid.ColumnSpan="3"/> <Border Width="Auto" Height="Auto" BorderThickness="1,1,1,1" CornerRadius="5,5,5,5" Margin="1,1,1,1" BorderBrush="{DynamicResource LegendBorderSecondaryBrush}" Grid.ColumnSpan="3"/> <ContentPresenter Margin="0,3,0,3" VerticalAlignment="Top" Height="50" Grid.ColumnSpan="3"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="BorderBrush" Value="{DynamicResource LegendBorderBrush}"/> </Style> </igCA:XamChart.Resources>
Thanks for the response, that solution will work fine for me. Any way to do part 2 of my question (relocate the marker or put the value in the legend)?
in order to do that, you need to add LegendItems to the Legend's Items collection, like this:
<igCA:XamChart.Legend> <igCA:Legend> <igCA:Legend.Items> <igCA:LegendItem Text="Hello 12345" Fill="Red" /> </igCA:Legend.Items> </igCA:Legend></igCA:XamChart.Legend>