Create a template for general use

Question

I have created a RadCartesianChart to plot a bar series. The xaml code is:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <telerik:RadCartesianChart x:Name="chart" Width="400" Height="300">
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.Series>
            <telerik:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding}">
                <telerik:BarSeries.DefaultVisualStyle>
                    <Style TargetType="Border">
                        <Setter Property="Background" Value="{Binding DataItem.Color}" />
                    </Style>
                </telerik:BarSeries.DefaultVisualStyle>
            </telerik:BarSeries>
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>
</Grid>

And the code behind

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {  
        public MainWindow()
        {
            InitializeComponent();
            DataContext = GetData(12);
        }

        public static List<ChartData> GetData(int dataSize)
        {
            Random rnd = new Random();
            var result = new List<ChartData>();

            for (int i = 0; i < dataSize; i++)
            {
                result.Add(new ChartData()
                {
                    Category = i,
                    Value = rnd.Next(1, 100),
                    Color = new SolidColorBrush(
                        Color.FromArgb(255, (byte)rnd.Next(0, 256), (byte)rnd.Next(0, 256), (byte)rnd.Next(0, 256)))
                });
            }

            return result;
        }
    }

    public class ChartData : INotifyPropertyChanged
    {
        private int _category;
        public int Category
        {
            get { return this._category; }
            set { this._category = value; 
this.OnPropertyChanged("Category"); }
        }

        private double _value;
        public double Value
        {
            get { return this._value; }
            set { this._value = value; this.OnPropertyChanged("Value"); }
        }

        private Brush _color;
        public Brush Color
        {
            get { return this._color; }
            set { this._color = value; this.OnPropertyChanged("Color"); }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

My question is how to use the user control as a template? The reason is that we have very similar cases to plot. Do we need to create many user control for each individual controls or we can create a template to reference it?

I am not strong on contentpresenter or ContentControl or ControlTemplate something like.

Answer 1

Declare a Style, for example in App.xaml:

<Style x:Key="myStyle" TargetType="telerik:RadCartesianChart">
    <Setter Property="Width" Value="400" />
    <Setter Property="Width" Value="100" />
    <Setter Property="VerticalAxis">
        <Setter.Value>
            <telerik:LinearAxis/>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalAxis">
        <Setter.Value>
            <telerik:CategoricalAxis/>
        </Setter.Value>
    </Setter>
    <Setter Property="Series">
        <Setter.Value>
            <telerik:BarSeries CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding}">
                <telerik:BarSeries.DefaultVisualStyle>
                    <Style TargetType="Border">
                        <Setter Property="Background" Value="{Binding DataItem.Color}" />
                    </Style>
                </telerik:BarSeries.DefaultVisualStyle>
            </telerik:BarSeries>
        </Setter.Value>
    </Setter>
</Style>

...and apply the Style to any RadCartesianChart using the x:Key:

<telerik:RadCartesianChart x:Name="chart" Style="{StaticResource myStyle}" />