Where to Find the default wpf chart template?

Question

I'm using WPFToolKit. I want to change the look of a wpf chart based on default chart style template.

I noticed a chart instance has some properties like TitleStyle LegendStyle ChartAreaStyle PlotAreaStyle I think modifing these properties will change the look of a chart.

Where to find these default style templates?

Answer 1

You can extract default ControlTemplates from Visual Studio directly:

1. In the WPF designer, select the relevant control, or place the mouse cursor on the relevant control in the XAML.

2. Press F4 to open the Properties Window.

3. Open the Miscellaneous category to find the Template property, or type Template in the search field at the top of the Window.

4. Click on the little square to the right of the Template field and select the Convert to New Resource... option:

5. In the popup dialog, name the new ControlTemplate to be added and decide where you want it to be defined:

6. Click on the OK button.

Taken from the How to Extract Default Control Template In Visual Studio? question.

Answer 2

I just did some search on the internet and find a really useful resource from here. It's the updated version of WPFToolKit 3.5, adding lots of useful features, really appreciate the author's work:)

Download the source code, You could build/compile to get the updated (4.0) version of System.Windows.Controls.DataVisualization.Toolkit.dll,

I found the default template in the source code, here it is:

Default Chart Template:

                <ControlTemplate TargetType="charting:Chart">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>

                            <datavis:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" />

                            <!-- Use a nested Grid to avoid possible clipping behavior resulting from ColumnSpan+Width=Auto -->
                            <Grid Grid.Row="1" Margin="0,15,0,15">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <datavis:Legend x:Name="Legend" Header="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}" Grid.Column="1" />
                                <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                                    <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                                    <Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1" />
                                </chartingprimitives:EdgePanel>
                            </Grid>
                        </Grid>
                    </Border>
                </ControlTemplate>

And other styles like:

Axis Style

    <Style TargetType="charting:DisplayAxis">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="TitleStyle">
            <Setter.Value>
                <Style TargetType="datavis:Title">
                    <Setter Property="FontStyle" Value="Italic" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="MajorTickMarkStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="Black" />
                    <Setter Property="X2" Value="4" />
                    <Setter Property="Y2" Value="4" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="GridLineStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="Gray" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="charting:DisplayAxis">
                    <Grid x:Name="AxisGrid" Background="{TemplateBinding Background}">
                        <datavis:Title x:Name="AxisTitle" Style="{TemplateBinding TitleStyle}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Title Style:

    <Style TargetType="datavis:Title">
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="datavis:Title">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Cursor="{TemplateBinding Cursor}" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Legend Style:

    <Style TargetType="datavis:Legend">
        <Setter Property="BorderBrush" Value="Black" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="TitleStyle">
            <Setter.Value>
                <Style TargetType="datavis: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="datavis:Legend">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="2">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <datavis:Title Grid.Row="0" x:Name="HeaderContent" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Style="{TemplateBinding TitleStyle}" />
                            <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" BorderThickness="0" Padding="0" IsTabStop="False">
                                <ItemsPresenter x:Name="Items" Margin="10,0,10,10" />
                            </ScrollViewer>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Legend Item Style:

<Style TargetType="charting:LegendItem">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:LegendItem">
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Width="8" Height="8" Fill="{Binding Background}" Stroke="{Binding BorderBrush}" StrokeThickness="1" Margin="0,0,3,0" />
                        <datavis:Title Content="{TemplateBinding Content}" />
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Everything you need is in the source code, such as default datapointstyle and so on. It realy helped me a lot!!!