none
Silverlight Chart with Horizontal Legend

    Question

  • Hello,

     I need help in writing a custom template for the chart control available in silverlight.

     I have multiple charts on my UI and i would like to have a custom template so that i can use that template for all the charts on the screen.

    I need a template for the chart in which i want to have the horizontal legend on top and rest the area below it can be used as Plot Area. I have tried to change the orientation of the legend's stack panel to horizontal but cudn't do it may be i am missing something not sure about it.

    </DVC:Chart.Template> 

        <ControlTemplate TargetType="DVC:Chart">

                <Grid>

                <Grid.RowDefinitions>

                        <RowDefinition Height="20"/>

                        <RowDefinition Height="*"/>

               </Grid.RowDefinitions>

             <StackPanel Grid.Row="0" Visibility="Collapsed">

                     <DV:Legend x:Name="Legend" Visibility="Collapsed"

                                           Title="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}"/>

              </StackPanel>

              <Grid x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" Grid.Row="1">

                             <Grid x:Name="PlotArea" Style="{TemplateBinding PlotAreaStyle}">

                             </Grid>

                    </Grid>

              </Grid>

         </ControlTemplate>

    </DVC:Chart.Template>

     Thanks in Advance!!!!!

    Wednesday, January 20, 2010 5:58 PM

Answers

  • Hi,

    You can open the chart control in Expression Blend, then right click on the control, select "Edit Template"-->"Edit a Copy" to edit the template of the chart. In case you don't have Expression Blend, here is what I did for your scenario:

    <Style x:Key="ChartStyle1" TargetType="chartingToolkit:Chart">
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="Palette">
            <Setter.Value>
                <visualizationToolkit:ResourceDictionaryCollection>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFB9D6F7"/>
                            <GradientStop Color="#FF284B70" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFFBB7B5"/>
                            <GradientStop Color="#FF702828" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFB8C0AC"/>
                            <GradientStop Color="#FF5F7143" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFFDE79C"/>
                            <GradientStop Color="#FFF6BC0C" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFA9A3BD"/>
                            <GradientStop Color="#FF382C6C" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFB1A1B1"/>
                            <GradientStop Color="#FF50224F" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FF9DC2B3"/>
                            <GradientStop Color="#FF1D7554" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFB5B5B5"/>
                            <GradientStop Color="#FF4C4C4C" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FF98C1DC"/>
                            <GradientStop Color="#FF0271AE" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFC1C0AE"/>
                            <GradientStop Color="#FF706E41" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFADBDC0"/>
                            <GradientStop Color="#FF446A73" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FF2F8CE2"/>
                            <GradientStop Color="#FF0C3E69" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFDCDCDC"/>
                            <GradientStop Color="#FF757575" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFF4F4F4"/>
                            <GradientStop Color="#FFB7B7B7" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFF4F4F4"/>
                            <GradientStop Color="#FFA3A3A3" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                </visualizationToolkit:ResourceDictionaryCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="TitleStyle">
            <Setter.Value>
                <Style TargetType="visualizationToolkit:Title">
                    <Setter Property="FontSize" Value="16"/>
                    <Setter Property="HorizontalAlignment" Value="Center"/>
                    <Setter Property="Margin" Value="0,10,0,10"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="LegendStyle">
            <Setter.Value>
                <Style TargetType="visualizationToolkit:Legend">
                    <Setter Property="Margin" Value="15,0,15,0"/>
                    <Setter Property="VerticalAlignment" Value="Center"/>
                    <Setter Property="BorderBrush" Value="#FFDBDBDB"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.442,0.005" StartPoint="0.558,0.995">
                                <GradientStop Color="#FFDBDBDB"/>
                                <GradientStop Color="#FFFFFFFF" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="ItemsPanel">
                        <Setter.Value>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="ChartAreaStyle">
            <Setter.Value>
                <Style TargetType="Panel">
                    <Setter Property="MinWidth" Value="100"/>
                    <Setter Property="MinHeight" Value="75"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="PlotAreaStyle">
            <Setter.Value>
                <Style TargetType="Grid">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.457,0.296" StartPoint="0.459,1.296">
                                <GradientStop Color="#FFCBCBCB"/>
                                <GradientStop Color="#FFFFFFFF" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chartingToolkit:Chart">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <visualizationToolkit:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}"/>
                            <Grid Margin="0,15,0,15" Grid.Row="1">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
    
                                <visualizationToolkit:Legend x:Name="Legend" Grid.Row="0" Header="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}"/>
                                <System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel x:Name="ChartArea" Grid.Row="1" Style="{TemplateBinding ChartAreaStyle}">
                                    <Grid Style="{TemplateBinding PlotAreaStyle}" Canvas.ZIndex="-1"/>
                                    <Border BorderBrush="#FF919191" BorderThickness="1" Canvas.ZIndex="10"/>
                                </System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel>
                            </Grid>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Notice that I set LegendStyle's ItemsPanel to be StackPanel with Horizontal orientation to make Legend displayed horizontally. And I changed the Grid which holds Legend and PlotArea to have two rows instead of two columns, and put Legend in the first row to make it displayed on the top of PlotArea.

    Hope this helps

    Friday, January 22, 2010 1:10 AM

All replies

  • Hi,

    You can open the chart control in Expression Blend, then right click on the control, select "Edit Template"-->"Edit a Copy" to edit the template of the chart. In case you don't have Expression Blend, here is what I did for your scenario:

    <Style x:Key="ChartStyle1" TargetType="chartingToolkit:Chart">
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="Palette">
            <Setter.Value>
                <visualizationToolkit:ResourceDictionaryCollection>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFB9D6F7"/>
                            <GradientStop Color="#FF284B70" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFFBB7B5"/>
                            <GradientStop Color="#FF702828" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFB8C0AC"/>
                            <GradientStop Color="#FF5F7143" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFFDE79C"/>
                            <GradientStop Color="#FFF6BC0C" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFA9A3BD"/>
                            <GradientStop Color="#FF382C6C" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFB1A1B1"/>
                            <GradientStop Color="#FF50224F" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FF9DC2B3"/>
                            <GradientStop Color="#FF1D7554" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFB5B5B5"/>
                            <GradientStop Color="#FF4C4C4C" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FF98C1DC"/>
                            <GradientStop Color="#FF0271AE" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFC1C0AE"/>
                            <GradientStop Color="#FF706E41" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFADBDC0"/>
                            <GradientStop Color="#FF446A73" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FF2F8CE2"/>
                            <GradientStop Color="#FF0C3E69" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFDCDCDC"/>
                            <GradientStop Color="#FF757575" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFF4F4F4"/>
                            <GradientStop Color="#FFB7B7B7" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                            <GradientStop Color="#FFF4F4F4"/>
                            <GradientStop Color="#FFA3A3A3" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                    </ResourceDictionary>
                </visualizationToolkit:ResourceDictionaryCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="TitleStyle">
            <Setter.Value>
                <Style TargetType="visualizationToolkit:Title">
                    <Setter Property="FontSize" Value="16"/>
                    <Setter Property="HorizontalAlignment" Value="Center"/>
                    <Setter Property="Margin" Value="0,10,0,10"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="LegendStyle">
            <Setter.Value>
                <Style TargetType="visualizationToolkit:Legend">
                    <Setter Property="Margin" Value="15,0,15,0"/>
                    <Setter Property="VerticalAlignment" Value="Center"/>
                    <Setter Property="BorderBrush" Value="#FFDBDBDB"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.442,0.005" StartPoint="0.558,0.995">
                                <GradientStop Color="#FFDBDBDB"/>
                                <GradientStop Color="#FFFFFFFF" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="ItemsPanel">
                        <Setter.Value>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="ChartAreaStyle">
            <Setter.Value>
                <Style TargetType="Panel">
                    <Setter Property="MinWidth" Value="100"/>
                    <Setter Property="MinHeight" Value="75"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="PlotAreaStyle">
            <Setter.Value>
                <Style TargetType="Grid">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.457,0.296" StartPoint="0.459,1.296">
                                <GradientStop Color="#FFCBCBCB"/>
                                <GradientStop Color="#FFFFFFFF" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chartingToolkit:Chart">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <visualizationToolkit:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}"/>
                            <Grid Margin="0,15,0,15" Grid.Row="1">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
    
                                <visualizationToolkit:Legend x:Name="Legend" Grid.Row="0" Header="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}"/>
                                <System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel x:Name="ChartArea" Grid.Row="1" Style="{TemplateBinding ChartAreaStyle}">
                                    <Grid Style="{TemplateBinding PlotAreaStyle}" Canvas.ZIndex="-1"/>
                                    <Border BorderBrush="#FF919191" BorderThickness="1" Canvas.ZIndex="10"/>
                                </System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel>
                            </Grid>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Notice that I set LegendStyle's ItemsPanel to be StackPanel with Horizontal orientation to make Legend displayed horizontally. And I changed the Grid which holds Legend and PlotArea to have two rows instead of two columns, and put Legend in the first row to make it displayed on the top of PlotArea.

    Hope this helps

    Friday, January 22, 2010 1:10 AM
  • Thanks Frank!!!!

     Was exactly what i was looking for .....Did know that chart control can be edited in EB.

     Thanks for the Help!!!!!!!

    Friday, January 22, 2010 3:45 PM
  • Hey,

    Did you try to access wrap lagend text ??

    I tried with above code but its not wrpping my lagend text. I tried a lot and got solution over it.

    Here is what makes lagend item text wrap. Sharing solution. May be it will be helpful for you.

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



    Saturday, April 07, 2012 7:56 AM