I am trying to do some binding. For the most part, my MVVM application is working fine but I now want to use a Template. In this case, I'm using XCeed chart which expose a SeriesTemplate.
My code is:
<UserControl
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
x:Class="MyApp.AppUi.View.Graph.GraphView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:converter="clr-namespace:MyApp.AppUi.Converters"
>
<Grid>
<Grid.Resources>
<converter:MyIntConverter x:Key="MyIntConverter" />
<DataTemplate x:Key="MyLabelTemplate">
<TextBlock Text="{Binding Path=Text, Converter={StaticResource MyIntConverter}}" />
</DataTemplate>
<!--give it a name, Bind to above, choose property -->
<CollectionViewSource x:Key="GraphDataCollection" Source="{Binding GraphDataList}" />
<Style x:Key="TextBoxTextStyle" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="12"/>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="FontSize" To="19" Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="FontSize" To="12" Duration="0:0:0.4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"
Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle RadiusX="5" RadiusY="5" >
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.8" Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#FFffcf26" Offset="0.0" />
<GradientStop Color="#FFff7f04" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter VerticalAlignment="Center" Content="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="SeriesTemplate">
<Button>
<StackPanel>
<TextBlock Text="{Binding GraphData.ShortDate}" Style="{StaticResource TextBoxTextStyle}" />
</StackPanel>
</Button>
</DataTemplate>
</Grid.Resources>
<GroupBox Header="{Binding Title}">
<GroupBox.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0" >
<GradientStop Offset="0" Color="#FF9d9d9d" />
<GradientStop Offset="1" Color="#FF666666" />
</LinearGradientBrush>
</GroupBox.Background>
<xctk:Chart Height="400" Width="400" ShowLegend="False">
<xctk:Chart.Areas>
<xctk:Area >
<xctk:Area.XAxis>
<xctk:Axis Title="Date"
GraduationMode="Manual"
LabelsType="DateTime"
ScaleMode="Automatic"
TitleMargin="10"
AxisLabelsLayout="ShowAll"
ShowArrow="False"
ShowAxis="True"
ShowGridLines="True"
ShowTicks="True"
ShowTickLabels="True"
ShowAxisLabel="True"
Reversed="False"
/>
</xctk:Area.XAxis>
<xctk:Area.YAxis>
<xctk:Axis Title="Google position"
ScaleMode="Manual"
TitleMargin="10"
AxisLabelsLayout="ShowAll"
ShowArrow="False"
ShowAxis="True"
ShowGridLines="True"
CustomRangeStart="1.00"
CustomRangeEnd="111.00"
ShowTicks="True"
ShowTickLabels="True"
ShowAxisLabel="True"
Reversed="False"
LabelTemplate="{StaticResource MyLabelTemplate}"
/>
</xctk:Area.YAxis>
<xctk:Area.Series>
<xctk:Series DataPointsSource="{Binding Source={StaticResource GraphDataCollection}}"
Template="{StaticResource SeriesTemplate}"
ShowPointsInLegend="true">
<xctk:Series.DataPointBindings>
<xctk:BindingInfo PropertyName="Y">
<xctk:BindingInfo.Binding>
<Binding Path="Position"/>
</xctk:BindingInfo.Binding>
</xctk:BindingInfo>
<xctk:BindingInfo PropertyName="X">
<xctk:BindingInfo.Binding>
<Binding Path="Date"/>
</xctk:BindingInfo.Binding>
</xctk:BindingInfo>
<xctk:BindingInfo PropertyName="Label">
<xctk:BindingInfo.Binding>
<Binding Path="ShortDate"/>
</xctk:BindingInfo.Binding>
</xctk:BindingInfo>
</xctk:Series.DataPointBindings>
</xctk:Series>
</xctk:Area.Series>
</xctk:Area>
</xctk:Chart.Areas>
</xctk:Chart>
</GroupBox>
</Grid>
and my ViewModel
public class GraphViewModel : BaseViewModel
{
public GraphViewModel(List<GraphData> data, string title )
{
this.GraphDataList = data;
this.Title = title;
}
public string Title { get; private set; }
public List<GraphData> GraphDataList { get; private set; }
}
And the DataContext is set in the Resource Dictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:graphView="clr-namespace:MyApp.AppUi.View.Graph"
xmlns:graphViewModel="clr-namespace:MyApp.AppUi.ViewModel.Graph"
xmlns:converter="clr-namespace:MyApp.AppUi.Converters"
>
<DataTemplate DataType="{x:Type graphViewModel:GraphViewModel}">
<graphView:GraphView />
</DataTemplate>
The chart displays as desired but, the SeriesTemplate does not bind. There is an error message in the ouput window, which I understand what the message is saying, but not how to fix it.
The error message is
System.Windows.Data Error: 40 : BindingExpression path error: 'ShortDate' property not found on 'object' ''ColumnPrimitiveInfo' (HashCode=39288004)'. BindingExpression:Path=ShortDate; DataItem='ColumnPrimitiveInfo' (HashCode=39288004); target element is 'TextBlock' (Name=''); target property is 'Text' (type 'String')
How do I get the binding to work for
<DataTemplate x:Key="SeriesTemplate">
<Button x:Name="Bar">
<StackPanel>
<TextBlock Text="{Binding GraphData.ShortDate}" Style="{StaticResource TextBoxTextStyle}" /> <!--THIS IS WHERE THE FAULT IS -->
</StackPanel>
</Button>
</DataTemplate>
XCeed have a working demo with source code, if you download the application, click on Charts -> Styling -> Column Series you can see that my code is very very similar. There's works, but mine does not and I can't see why. Please note, the graph itself displays, it's just the textbox is not showing. However, if I don't use binding, and just use Text="SomeWords" then it works fine
