Hello,
I added axis titles to my chart by adding TextBlocks. When providing the Text and FontSize properties through constant literal values immediately within the xaml code, everything works fine. The plot area is reduced in order to leave enough room for the titles, and the titles itself are centered on the axes' extents.
However, when using bindings in order to provide the values for the Text and FontSize properties from a view model (INotifyPropertyChanged, standard observable properties), the plot area is not reduced to accommodate the titles, resulting in the titles being rendered off-center and either partially or fully outside the chart control's bounds.
I have created a minimal demonstration program, which consists of a main window xaml definition containing the chart:
<
Window
x:Class
=
"WpfApplication2.MainWindow"
xmlns
=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
=
"http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
xmlns:wpfApplication2
=
"clr-namespace:WpfApplication2"
Title
=
"MainWindow"
Height
=
"600"
Width
=
"800"
><
DockPanel
LastChildFill
=
"True"
><
telerik:RadCartesianChart
Margin
=
"100"
x:Name
=
"mChart"
BorderBrush
=
"Aquamarine"
BorderThickness
=
"5"
ClipToBounds
=
"False"
><
telerik:RadCartesianChart.DataContext
><
wpfApplication2:ChartViewModel
/></
telerik:RadCartesianChart.DataContext
><
telerik:LineSeries
StrokeThickness
=
"5"
><
telerik:LineSeries.DataPoints
><
telerik:CategoricalDataPoint
Category
=
"A"
Value
=
"2"
/><
telerik:CategoricalDataPoint
Category
=
"B"
Value
=
"5"
/><
telerik:CategoricalDataPoint
Category
=
"C"
Value
=
"3"
/></
telerik:LineSeries.DataPoints
></
telerik:LineSeries
><
telerik:RadCartesianChart.HorizontalAxis
><
telerik:CategoricalAxis
><
telerik:CategoricalAxis.Title
><
TextBlock
Text
=
"{Binding TitleText}"
FontSize
=
"{Binding FontSize, Mode=OneWay}"
/></
telerik:CategoricalAxis.Title
></
telerik:CategoricalAxis
></
telerik:RadCartesianChart.HorizontalAxis
><
telerik:RadCartesianChart.VerticalAxis
><
telerik:LinearAxis
><
telerik:LinearAxis.Title
><
TextBlock
Text
=
"{Binding TitleText}"
FontSize
=
"{Binding FontSize, Mode=OneWay}"
/></
telerik:LinearAxis.Title
></
telerik:LinearAxis
></
telerik:RadCartesianChart.VerticalAxis
></
telerik:RadCartesianChart
></
DockPanel
></
Window
>
The Viewmodel is trivial:
using
System.ComponentModel;
using
System.Runtime.CompilerServices;
using
WpfApplication2.Annotations;
namespace
WpfApplication2
{
class
ChartViewModel : INotifyPropertyChanged
{
#region Fields
private
string
mTitleText;
public
string
TitleText {
get
{
return
mTitleText; }
set
{ SetProperty(
ref
mTitleText, value); } }
private
double
mFontSize;
public
double
FontSize {
get
{
return
mFontSize; }
set
{ SetProperty(
ref
mFontSize, value); } }
#endregion
#region Construction
public
ChartViewModel()
{
mTitleText =
"THIS IS THE AXIS TITLE"
;
mFontSize = 72.0d;
}
#endregion
#region Interface
public
event
PropertyChangedEventHandler PropertyChanged;
#endregion
#region Implementation
protected
bool
SetProperty<TProperty>(
ref
TProperty aStorage, TProperty aValue, [CallerMemberName]
string
aPropertyName =
null
)
{
if
(Equals(aStorage, aValue))
return
false
;
aStorage = aValue;
// ReSharper disable ExplicitCallerInfoArgument
RaisePropertyChanged(aPropertyName);
// ReSharper restore ExplicitCallerInfoArgument
return
true
;
}
public
bool
SetProperty<TProperty>(
ref
TProperty aStorage, TProperty aValue,
ref
bool
aChangedFlag, [CallerMemberName]
string
aPropertyName =
null
)
{
// ReSharper disable once ExplicitCallerInfoArgument
if
(!SetProperty(
ref
aStorage, aValue, aPropertyName))
return
false
;
aChangedFlag =
true
;
return
true
;
}
protected
void
RaiseOtherPropertyChanged(
string
aPropertyName)
{
// ReSharper disable once ExplicitCallerInfoArgument
RaisePropertyChanged(aPropertyName);
}
[NotifyPropertyChangedInvocator]
protected
virtual
void
RaisePropertyChanged([CallerMemberName]
string
aPropertyName =
null
)
{
PropertyChanged?.Invoke(
this
,
new
PropertyChangedEventArgs(aPropertyName));
}
#endregion
}
}
The attached screenshot shows the result. Please note that the aquamarine rectangle is the actual border of the chart, and that the ClipToBounds property is set to false, otherwise the title of the categorical axis would not be visible at all.
My goal is to allow the user to design the axes' titles' appearances dynamically, not only be defining their text, but also their font, font size, weight, etc. Therefore the according properties of the TextBlocks will have to be changed dynamically at run-time. Is there any other way to achieve this without breaking the layout mechanism?
Any help would be greatly appreciated, thanks in advance!