1
votes

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

3
Where is your GraphData property? In your ViewModel or is it a xceed property? Could you give us a link to the documentation of the component you use? Couldn't find it on xceed website. doc.xceedsoft.com/products/XceedChartnkoniishvt
@nkoniishvt you can download their demo (which shows source code) from xceed.com/WPF_Toolkit_Demo.html - When it loads, under charts expand the Styling option and click on Column Series. From here, on the right you can see the XAML code (which works). I pretty much copied and pasted (it worked) then changed a few things and broke it. I can't see what I brokeMyDaftQuestions
Please post your ViewModel class and post the full xamlnkoniishvt
@nkoniishvt, as requested, full code psotedMyDaftQuestions
did you set the DataContext in the xaml backend code?nkoniishvt

3 Answers

1
votes

After a few hours of voodoo programming (where I just try different things at random) I found the solution.

 <TextBlock Text="{Binding Path=Content.ShortDate}" Style="{StaticResource TextBoxTextStyle}" />

I think this is because of (see the Button Setter in code of OP)

 <ContentPresenter VerticalAlignment="Center" Content="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
0
votes

Try this:

    <DataTemplate x:Key="SeriesTemplate">
        <Button>
            <StackPanel>
                 <TextBlock Text="{Binding Path=ShortDate}" Style="{StaticResource TextBoxTextStyle}" />
            </StackPanel>
        </Button>
    </DataTemplate>
0
votes

From looking at the documentation hereon the XCeed documentation site it appears that you are adding an extra layer of indirection to the binding. Try binding directly to the GraphDataList

<xctk:Series DataPointsSource="{Binding Source={StaticResource GraphDataList}}"
                          Template="{StaticResource SeriesTemplate}"
                          ShowPointsInLegend="true">

and then in the series

<DataTemplate x:Key="SeriesTemplate">
    <Button>
        <StackPanel>
             <TextBlock Text="{Binding Path=ShortDate}" Style="{StaticResource TextBoxTextStyle}" />
        </StackPanel>
    </Button>
</DataTemplate>