How to change the orientation of legend of pie chart?

Hi, I'm trying Pie Chart on Windows Phone 7. The default position of legend is at the right side of the chart, layout vertically. If I set the LegendPosition to Bottom, the layout of legend will change to horizontal, which will cause some legend items exceed the legend frame. I want to make it stack vertically. How to do that?

Hello

To create a vertical legend in the Bottom position, you will need to create a custom legend style. Here is the xaml code for a legend that is always vertical:

<DataTemplate x:Key="LegendItemTemplate">
    <StackPanel Orientation="Horizontal" Margin="6,0,6,0">
        <ContentPresenter Content="{Binding}" ContentTemplate="{Binding LegendIconTemplate}" VerticalAlignment="Center" />
        <TextBlock Text="{Binding LegendLabel}" Margin="7,0,0,0" VerticalAlignment="Center" />
    </StackPanel>
</DataTemplate>

<DataTemplate x:Key="LegendHeaderTemplate">
    <TextBlock Text="{Binding}" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Left" FontWeight="Bold" />
</DataTemplate>

<Style x:Key="LegendStyle" TargetType="ch:Legend">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="White" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Header" Value="Legend" />
    <Setter Property="HeaderTemplate" Value="{StaticResource LegendHeaderTemplate}" />
    <Setter Property="ItemTemplate" Value="{StaticResource LegendItemTemplate}" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="Padding" Value="6" />
    <Setter Property="Margin" Value="5" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Margin="{TemplateBinding Margin}" Background="{TemplateBinding Background}">
                    <StackPanel Margin="{TemplateBinding Padding}">
                        <ContentControl Content="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}"
                                        ContentTemplate="{Binding HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                        Foreground="{TemplateBinding Foreground}" />
                        <ItemsControl ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource TemplatedParent}}"
                                      ItemTemplate="{Binding ItemTemplate, RelativeSource={RelativeSource TemplatedParent}}" Margin="0,0,0,2" />
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

You can use this style to set the PieChart.LegendStyle property.

 - Jason

Thanks Jason. That's what I want. But I wonder if I could edit legend's style in Expression Blend designer surface directly, just like I edit other controls' style? I noticed the legend inside a pie chart is not selectable, and when I tried to edit the pie chart's template, Blend prompted my a blank grid, which made me feel confused.

- Allen

Oh I see what you mean. Unfortunatly I'm not an expert with Expression Blend so not sure what's happening here. You will need to stick to using the xaml I gave you for now.

Regards
 - Jason