FunctionBindingBehavior

• Mar 28, 2019
• 8 minutes to read

The FunctionBindingBehavior class is a special behavior that allows you to bind the function result to your View.

• Getting Started
• Invoking the Bound Function
• Arguments Conversion
• Declaration by Using SmartTag
• Example

Getting Started

Suppose that you have a function in your View Model that filters some collection, and you want to bind the function result to your View.

Below is a code snippet of ViewModel.

C#

public class MainViewModel {
    protected MainViewModel() { ... }

    public static MainViewModel Create() {
        return ViewModelSource.Create(()=>new MainViewModel());
    }

    public virtual ObservableCollection<DataItem> Points { get; set; }

    public IList<DataItem> GetFilteredItems(DateTime start, DateTime end) {
        return this.Points.Where(x => x.Date.Date >= start && x.Date.Date <= end).ToList();
    }
}

VB.NET

Public Class MainViewModel
    Protected Sub New()
        ...
    End Sub

    Public Shared Function Create() As MainViewModel
        Return ViewModelSource.Create(Function() New MainViewModel())
    End Function

    Public Overridable Property Points() As ObservableCollection(Of DataItem)

    Public Function GetFilteredItems(ByVal start As Date, ByVal [end] As Date) As IList(Of DataItem)
        Return Me.Points.Where(Function(x) x.Date.Date >= start AndAlso x.Date.Date <= [end]).ToList()
    End Function
End Class

To bind the View’s ChartControl and ViewModel’s GetFilteredItems function, use the FunctionBindingBehavior. For this, add the behavior to the ChartControl’s dxmvvm:Interaction.Behaviors collection.

XAML

<dxc:ChartControl ... >
    <dxc:ChartControl.Diagram>
        <dxc:SimpleDiagram2D>
            <dxc:SimpleDiagram2D.Series>
                <dxc:FunnelSeries2D x:Name="Series" ... >
                    ...
                </dxc:FunnelSeries2D>
            </dxc:SimpleDiagram2D.Series>
        </dxc:SimpleDiagram2D>
    </dxc:ChartControl.Diagram>
    ...
    <dxmvvm:Interaction.Behaviors>
        <dxmvvm:FunctionBindingBehavior />
    </dxmvvm:Interaction.Behaviors>
</dxc:ChartControl>

Specify the FunctionBindingBehavior’s properties in their corresponding order.

XAML

<dxmvvm:Interaction.Behaviors>
    <dxmvvm:FunctionBindingBehavior         
        Target="{Binding ElementName=Series}"       
        Property="DataSource" 
        Source="{Binding}"
        Function="GetFilteredItems" 
        Arg1="{Binding SelectionRangeStart, ElementName=rangeControl}" 
        Arg2="{Binding SelectionRangeEnd, ElementName=rangeControl}"/>
</dxmvvm:Interaction.Behaviors>

• The Target property contains an object whose property will be populated (by default, the target-object is the behavior’s associated object). Since the ChartControl shows data in a series, the ChartControl’s Series FunnelSeries2D is used as Target.
• The property of target-object should be specified using the Property property. The FunnelSeries2D shows data specified in the DataSource property. Thus, set Property to DataSource.
• The Source property contains an object whose function will be bound to the target-property specified in Function (by default, the source-object is an object located in the data context of the associated object.). Due to the fact that the source-function is defined at the ViewModel level, bind the Source property to the ViewModel.
• The source-function name is specified by the Function property.
• The FunctionBindingBehavior also provides several properties that correspond to the source-function parameters: Arg1, Arg2… Arg15. You can specify no more than 15 arguments.

Invoking the Bound Function

By default, the FunctionBindingBehavior automatically re-invokes the Function when one of the arguments is changed (updated). If you need to manually re-invoke the Function, you can use the POCOViewModelExtensions.UpdateFunctionBinding extension method.

C#

public static class POCOViewModelExtensions {
    public static void UpdateFunctionBinding<T>(this T viewModel, Expression<Action<T>> methodExpression) { ... }
    ...
}

Below is a code snippet that illustrates how to use the UpdateFunctionBinding method.

C#

public class MainViewModel {
    ...
    public void Update() {
        this.UpdateFunctionBinding(x => x.GetFilteredItems(default(DateTime), default(DateTime)));
    }
}

VB.NET

Public Class MainViewModel
    ...
    Public Sub Update()
        Me.UpdateFunctionBinding(Function(x) x.GetFilteredItems(Nothing, Nothing))
    End Sub
End Class

Arguments Conversion

The FunctionBindingBehavior automatically converts its specified arguments to the parameterized type, if possible. Suppose that you have the following source-function in your View Model.

C#

public enum DocumentType { Text, Data }

public IList<Documents> ShowDocument(DocumentType parameter) {
...
}

VB.NET

Public Enum DocumentType
    Text
    Data
End Enum
...
Public Function ShowDocument(parameter As DocumentType) As IList(Of Documents)

End Function

In this case, the parameter specified in the Arg1 property will be automatically converted to the DocumentType parameterized type.

Declaration by Using SmartTag

To assign the FunctionBindingBehavior to the required control at design time, click the Smart Tag button at the top right corner of the control.

Open the MVVM tab and add the FunctionBindingBehavior item using the Add Behavior menu.

Specify the Target (by default, it is the behavior’s associated object).

Choose the target’s property from the drop-down list.

Select the source object (by default, the source object is the DataContext of the target object) and the function of the source object, and specify its arguments. Smart Tag will generate argument property lines depending on the maximum number of the chosen function parameters. The maximum number of argument property lines is 15.

The following screenshot demonstrates the result.

The auto generated XAML for the above is the following.

XAML

<Grid>
   ...
   <dxc:ChartControl Name="chartControl1" ...>
      <dxc:ChartControl.Diagram>
          <dxc:SimpleDiagram2D>
              <dxc:SimpleDiagram2D.Series>
                  <dxc:FunnelSeries2D x:Name="Series" ... >
                      ...
                  </dxc:FunnelSeries2D>
              </dxc:SimpleDiagram2D.Series>
          </dxc:SimpleDiagram2D>
      </dxc:ChartControl.Diagram>
      ...
      <dxmvvm:Interaction.Behaviors>
          <dxmvvm:FunctionBindingBehavior
              Property="DataSource"
              Target="{Binding ElementName=Series}"
              Function="GetFilteredItems"
              Arg1="{Binding SelectionRangeStart, ElementName=rangeControl}"
              Arg2="{Binding SelectionRangeEnd, ElementName=rangeControl}"/>
      </dxmvvm:Interaction.Behaviors>
   </dxc:ChartControl>
   <dxe:RangeControl Name="rangeControl" ...>
      ...
   </dxe:RangeControl>
</Grid>

Example

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-use-functionbindingbehavior-t197048.

DataItem.vb

Imports System
Imports System.Linq
Imports System.Collections.Generic
Imports DevExpress.Mvvm.POCO

Namespace FunctionBindingExample.Common
    Public Class DataItem
        Protected Sub New(ByVal [date] As Date, ByVal valueSummary As Double, ByVal stageName As String)
            Me.Date = [date]
            Me.ValueSummary = valueSummary
            Me.StageName = stageName
        End Sub

        Public Shared Function Create(ByVal [date] As Date, ByVal valueSummary As Double, ByVal stageName As String) As DataItem
            Return ViewModelSource.Create(Function() New DataItem([date], valueSummary, stageName))
        End Function

        Public Property [Date]() As Date
        Public Property ValueSummary() As Double
        Public Property StageName() As String
    End Class
End Namespace

MainView.xaml

<UserControl 
    x:Class="FunctionBindingExample.View.MainView" 
    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:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
    xmlns:dxcr="http://schemas.devexpress.com/winfx/2008/xaml/charts/rangecontrolclient" 
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
    xmlns:vm="clr-namespace:FunctionBindingExample.ViewModel"
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"
    DataContext="{dxmvvm:ViewModelSource Type=vm:MainViewModel}" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>
        <dxc:ChartControl Name="chartControl1" Grid.Column="1" Margin="10">
            <dxc:ChartControl.Diagram>
                <dxc:SimpleDiagram2D>
                    <dxc:SimpleDiagram2D.Series>
                        <dxc:FunnelSeries2D x:Name="Series" ArgumentDataMember="Date" LegendTextPattern="{}{A: MM-yyyy}: {VP: #0.##}" ValueDataMember="ValueSummary" ToolTipEnabled="True">
                            <dxc:FunnelSeries2D.Label>
                                <dxc:SeriesLabel Visible="True" dxc:FunnelSeries2D.LabelPosition="Center"/>
                            </dxc:FunnelSeries2D.Label>
                        </dxc:FunnelSeries2D>
                    </dxc:SimpleDiagram2D.Series>
                </dxc:SimpleDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Legend >
                <dxc:Legend Orientation="Horizontal" HorizontalPosition="Center" VerticalPosition="BottomOutside" BorderThickness="0" Margin="0,0,0,0"/>
            </dxc:ChartControl.Legend>
            <dxmvvm:Interaction.Behaviors>
                <dxmvvm:FunctionBindingBehavior 
                    Property="DataSource" 
                    Target="{Binding ElementName=Series}" 
                    Function="GetFilteredItems" 
                    Source="{Binding}" 
                    Arg1="{Binding SelectionRangeStart, ElementName=rangeControl}" 
                    Arg2="{Binding SelectionRangeEnd, ElementName=rangeControl}"/>
            </dxmvvm:Interaction.Behaviors>
        </dxc:ChartControl>
        <dxe:RangeControl Name="rangeControl" AllowZoom="False" Grid.Row="1" Margin="10" SelectionRangeStart="1/1/2015" SelectionRangeEnd="7/1/2015" ShowRangeBar="False">
            <dxcr:DateTimeChartRangeControlClient SnapAlignment="Month" ArgumentLabelFormatString="{}{0:MMMM-yyyy}" ItemsSource="{Binding Points}" ArgumentDataMember="Date" ValueDataMember="ValueSummary"/>
        </dxe:RangeControl>
    </Grid>

</UserControl>

MainView.xaml.vb

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Windows.Controls

Namespace FunctionBindingExample.View
    ''' <summary>
    ''' Interaction logic for MainView.xaml
    ''' </summary>
    Partial Public Class MainView
        Inherits UserControl

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

MainViewModel.vb

Imports System
Imports System.Linq
Imports DevExpress.Mvvm.POCO
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports FunctionBindingExample.Common

Namespace FunctionBindingExample.ViewModel
    Public Class MainViewModel
        Protected Sub New()
            Points = New ObservableCollection(Of DataItem)() From {DataItem.Create(New Date(2015, 02, 18), 3.47, "A"), DataItem.Create(New Date(2015, 01, 01), 2.08, "B"), DataItem.Create(New Date(2015, 02, 01), 2.42, "C"), DataItem.Create(New Date(2015, 03, 01), 2.78, "E"), DataItem.Create(New Date(2015, 04, 01), 2.78, "F"), DataItem.Create(New Date(2015, 05, 01), 2.57, "G"), DataItem.Create(New Date(2015, 06, 01), 2.69, "H"), DataItem.Create(New Date(2015, 07, 01), 2.96, "I"), DataItem.Create(New Date(2015, 08, 01), 2.36, "J"), DataItem.Create(New Date(2015, 09, 01), 1.97, "K"), DataItem.Create(New Date(2015, 10, 11), 2.75, "L"), DataItem.Create(New Date(2015, 11, 12), 3.45, "M"), DataItem.Create(New Date(2015, 12, 13), 4.08, "N"), DataItem.Create(New Date(2014, 01, 14), 3.47, "P"), DataItem.Create(New Date(2014, 02, 15), 2.64, "Q"), DataItem.Create(New Date(2014, 03, 16), 4.59, "R"), DataItem.Create(New Date(2014, 04, 17), 1.54, "S"), DataItem.Create(New Date(2014, 05, 18), 4.12, "T"), DataItem.Create(New Date(2014, 06, 19), 3.47, "U")}
        End Sub

        Public Shared Function Create() As MainViewModel
            Return ViewModelSource.Create(Function() New MainViewModel())
        End Function

        Public Overridable Property Points() As ObservableCollection(Of DataItem)

        Public Function GetFilteredItems(ByVal start As Date, ByVal [end] As Date) As IList(Of DataItem)
            Return Me.Points.Where(Function(x) x.Date.Date >= start AndAlso x.Date.Date <= [end]).ToList()
        End Function
    End Class
End Namespace

MainViewModel.cs

using System;
using System.Linq;
using DevExpress.Mvvm.POCO;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using FunctionBindingExample.Common;

namespace FunctionBindingExample.ViewModel {
    public class MainViewModel {
        protected MainViewModel() {
            Points = new ObservableCollection<DataItem>(){
                DataItem.Create(new DateTime(2015, 02, 18), 3.47, "A"),
                DataItem.Create(new DateTime(2015, 01, 01), 2.08, "B"),
                DataItem.Create(new DateTime(2015, 02, 01), 2.42, "C"),
                DataItem.Create(new DateTime(2015, 03, 01), 2.78, "E"),
                DataItem.Create(new DateTime(2015, 04, 01), 2.78, "F"),
                DataItem.Create(new DateTime(2015, 05, 01), 2.57, "G"),
                DataItem.Create(new DateTime(2015, 06, 01), 2.69, "H"),
                DataItem.Create(new DateTime(2015, 07, 01), 2.96, "I"),
                DataItem.Create(new DateTime(2015, 08, 01), 2.36, "J"),
                DataItem.Create(new DateTime(2015, 09, 01), 1.97, "K"),
                DataItem.Create(new DateTime(2015, 10, 11), 2.75, "L"),
                DataItem.Create(new DateTime(2015, 11, 12), 3.45, "M"),
                DataItem.Create(new DateTime(2015, 12, 13), 4.08, "N"),
                DataItem.Create(new DateTime(2014, 01, 14), 3.47, "P"),
                DataItem.Create(new DateTime(2014, 02, 15), 2.64, "Q"),
                DataItem.Create(new DateTime(2014, 03, 16), 4.59, "R"),
                DataItem.Create(new DateTime(2014, 04, 17), 1.54, "S"),
                DataItem.Create(new DateTime(2014, 05, 18), 4.12, "T"),
                DataItem.Create(new DateTime(2014, 06, 19), 3.47, "U"),
            };
        }

        public static MainViewModel Create() {
            return ViewModelSource.Create(()=>new MainViewModel());
        }

        public virtual ObservableCollection<DataItem> Points { get; set; }

        public IList<DataItem> GetFilteredItems(DateTime start, DateTime end) {
            return this.Points.Where(x => x.Date.Date >= start && x.Date.Date <= end).ToList();
        }
    }
}

MainView.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Controls;

namespace FunctionBindingExample.View {
    /// <summary>
    /// Interaction logic for MainView.xaml
    /// </summary>
    public partial class MainView : UserControl {
        public MainView() {
            InitializeComponent();
        }
    }
}

DataItem.cs

using System;
using System.Linq;
using System.Collections.Generic;
using DevExpress.Mvvm.POCO;

namespace FunctionBindingExample.Common {
    public class DataItem {
        protected DataItem(DateTime date, double valueSummary, string stageName) {
            Date = date;
            ValueSummary = valueSummary;
            StageName = stageName;
        }

        public static DataItem Create(DateTime date, double valueSummary, string stageName) {
            return ViewModelSource.Create(() => new DataItem(date, valueSummary, stageName));
        }

        public DateTime Date { get; set; }
        public double ValueSummary { get; set; }
        public string StageName { get; set; }
    }
}